はてなブログ用のChrome拡張機能を作ってみようと思う

こんにちは、つばさ（@tsubasa123）です。

タイトル通り、現在、Chromeの拡張機能を作成中です。本当は完成してから記事にしようと思っていたのですが、諸事情がございまして今後のモチベーションを維持するために途中ではありますが、記事にしてみることにしました。

Chromeの拡張機能を作るのは難しくない

難しくないことはないんですが、HTMLとCSS、それとJavaScriptとJSONに関する基礎的な知識があれば簡単な拡張機能を作成することが可能です。これは驚き、てっきりC#とかそっち系の言語がわからないとダメかと思い込んでいました。無知は罪ですね。

もちろん、専門的なことをやろうとすると高度な知識が必要になりますが、はてなブログの記事をちょっと書きやすくするオレオレ拡張機能を作る程度なら、私でもなんとかなりそうな気がしたので挑戦してみました。まぁ、コテンパンにやられてますけどね。

はてなブログ用のChrome拡張機能で有名なのは下記の2つじゃないでしょうか。

見たまま編集モードを使いやすくするものと、アップロードした画像のaltとtitle属性を設定する拡張機能ですね。どちらもとても便利な拡張機能なので、まだ使ったことのない方はチェックしてみると幸せになれるかもしれません。

で、私も両方試してみたんですが、私はブログの記事を書くときはMarkdonw記法を使っているので前者の拡張機能は使えないことになります、残念。

じゃあMarkdown記法でもう少し書きやすくなるような拡張機能を作ってみようかな、と思うのが自然な流れですね。

Markdown記法なら管理画面からHTMLを直接入力することができますので、正直そこまで必要な機能はないんですが、それなりに使うであろうスタイルやタグをワンクリックで挿入できるようにしたら捗ると思って実装を検討したのが下記の機能。

先の2つの拡張機能でできることのいいとこどりしたものを自分用に作ることに決めました。表組みは個人的に欲しいなーと思っていた機能ですね。UIが難しいぜ。

まだまだ人に説明できるほどの技量はありませんので、勉強させてもらったサイトをいくつかご紹介です。

これが一番わかりやすかったかな。isolated worldな概念を掴めるようになるまで、繰り返し何度も読んで手を動かしてみました。

Qiitaの記事が難しく感じたかたはこちらから。かなり簡単なコードを実行するところまで説明されていますので、とりあえず感覚を掴むためにやってみるといい感じです。ただし、AA邪魔なんで試したあとは削除したほうがよいです。

後は公式のサンプルを参考に。まだ全然目を通せていないのですが、シーン別にかなりの量のサンプルがあるので勉強するには持ってこいです。全て英語ですがコードを読むだけならなんとかなる。わかんないところはGoogle翻訳片手にかんばりましょう。

スクショで、こんな感じになっております。

管理画面の空いているスペースを利用して、左から順番に先ほどのリストの機能を担うアイコンを表示するようにしました。クラスの追加とaltの追加はクリックするとポップアップが表示されるので、そこに文字列を入力すると記事中に反映されるようになっています。

表組みは行列数の入力と見出し（th）の有無（1行目、もしくは1列目）をプルダウンから選択できるようにしましたが、正直使いにくい。もっとスマートなUIを考えたいところです。

当然ですが、Googleに登録と申請を行わないと拡張機能を公開することはできません。さて、どうしたものか。開発当初は公開する気なんてサラサラなかったんですが、意外と簡単に公開できると知るとやってみたくなりますね、色々面倒なことが増えると思うのでこちらはゆっくり考えます。

あと、$5お布施が必要みたい。これはイタズラ防止のためだと思いますが、この辺の事務手続きがめんどくさい。

オレオレ拡張機能の紹介でした。自分用、そしてプラットフォームがChromeだけということで、思う存分ES2015で書けるのが気持ちいいです。勉強した甲斐がありました。

後はUI、特に表組み部分の改善とコードの整理。ユーザインタラクションには外部ライブラリを使ってモーダル出すようにすれば見た目は取り繕えますが、管理が大変になるし。まぁ、のんびり開発します。

ではでは、最後までお付き合いいただきありがとうございました。