{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/how-to-use-japanese-tag-in-middleman/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"363d5c02-10ad-5a8e-8866-3dd9f7c84943","excerpt":"こんにちは。 Middlemanで日本語のタグを使ったときに、そのタグのURLが空になってしまうことがあります。 このブログでは日本語のタグも使えるようにしてありますが、一手間加える必要がありました。 なぜそうなるのかと、どうすれば治るのかを残しておこうと思います。 はじめに 使用しているgem…","html":"

こんにちは。
\nMiddlemanで日本語のタグを使ったときに、そのタグのURLが空になってしまうことがあります。
\nこのブログでは日本語のタグも使えるようにしてありますが、一手間加える必要がありました。
\nなぜそうなるのかと、どうすれば治るのかを残しておこうと思います。

\n\n

はじめに

\n

使用しているgemとそのバージョンです

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
gemVersion
middleman4.2.1
middleman-blog4.0.2
\n

原因

\n
      ##\n      # Get a path to the given tag, based on the :taglink setting.\n      #\n      # @param  tag [String] Tag name\n      # @return     [String] Safe Tag URL\n      ##\n      def link( tag )\n        apply_uri_template @tag_link_template, tag: safe_parameterize( tag )\n      end
\n

middleman-bloggemの中のlib/middleman-blog/tag_pages.rbにあります。
\nsafe_parameterizeされた結果がURLになるのですが、これが日本語が弾かれて空文字になります。

\n
      ##\n      # Parametrize a string preserving any multi-byte characters\n      # Reimplementation of this, preserves un-transliterate-able multibyte chars.\n      #\n      # @see http://api.rubyonrails.org/classes/ActiveSupport/Inflector.html#method-i-parameterize\n      ##\n      def safe_parameterize(str)\n        parameterized_string = ::ActiveSupport::Inflector.transliterate(str.to_s)\n        parameterized_string.parameterize\n      end
\n

lib/middleman-blog/uri_templates.rbに定義があります。
\nActiveSupport::Inflector#parameterizeの説明はこちらを読むと良いと思います。

\n

これらの処理が日本語というかマルチバイト文字を弾いてしまい、日本語のタグのURLが空になります。

\n

対処法

\n

ActiveSupport::Inflectorに設定を渡したりして回避はできるそうなのですが、わざわざ日本語と英語のマッピング作るよりも、汎用的に％エンコードすればいいのでは？
\nと思い、そんな感じで対処しました。
\n結論としてはこちらの設定ファイルのような対処をとりました。

\n

after_configurationフックで無理やりモンキーパッチ当ててますが、影響箇所わかってるしブログのビルドツールなのでこれくらいの対処でいいだろうと判断してます。

\n

対処した内容としては、

\n
    def link( tag )\n      safe_tag = safe_parameterize(tag)\n      safe_tag = URI.encode(tag) if safe_tag == ''\n      apply_uri_template @tag_link_template, tag: safe_tag\n    end
\n

です。
\n一度公開してしまってから問題に気づいたので、もともとsafe_parameterizeでうまくいっていた箇所はそのままに、空文字になってしまうものは％エンコードという対処をとりました。
\nもし最初から気付いていれば全て％エンコードでもよかったと思います。

\n

さいごに

\n

英語圏のツールは枯れててもマルチバイトに弱いことが多いので、ローカルで気をつけて動作確認しておくべきでした…
\n同じ悩みを抱えている方がいらっしゃったら解決手段になれば幸いです。

","timeToRead":3,"frontmatter":{"title":"middleman-blogで日本語のタグのURLが空になる問題を解消する方法","tags":["Middleman"],"date":"August 29, 2017","featuredImage":null}}},"pageContext":{"slug":"/how-to-use-japanese-tag-in-middleman/","previous":{"fields":{"slug":"/how-to-build-and-deploy-to-deploygate-in-cli/"},"frontmatter":{"title":"CLIだけでReact NativeアプリをビルドしてDeployGateにデプロイする方法","tags":["iOS","Android","React Native","DeployGate"]}},"next":{"fields":{"slug":"/why-i-need-redux-with-react-new-context/"},"frontmatter":{"title":"ReactのNew Context APIは便利だけどreduxを使うのはやめないと思った","tags":["JavaScript","React","Redux","React Native"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}