つばさのーと

つばさの日常を綴るのーと

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

f:id:tsubasa123:20170214173225j:plain

 

こんにちは、つばさ(@tsubasa123)です。

 

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

 

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

 

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

 

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

 

まずは有名どころを下調べ

 

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

 

shiromatakumi.hatenablog.com

 

psn.hatenablog.jp

 

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

 

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

 

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

 

どんな拡張機能を作ろうか

 

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

 

  • 左寄せ、中央寄せ、右寄せ
  • 改行( )の挿入
  • 選択範囲にクラスの追加
    • 単一行ならpタグに追加
    • 複数行ならdivタグでラップして追加
  • 画像にaltの指定
  • 表組み(tableタグ)の挿入

 

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

 

拡張機能の作り方

 

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

 

qiita.com

 

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

 

language-and-engineering.hatenablog.jp

 

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

 

https://developer.chrome.com/extensions/samples

 

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

 

途中経過

 

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

 

f:id:tsubasa123:20170214172342j:plain

 

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

 

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

 

公開するかしないか問題

 

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

 

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

 

さいごに

 

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

 

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

 

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