すなばいじり

はてなブログを使って、トンピーを揃えるまで止めないブログ。ふっくらかわいい。

はてなブログの画像タイトルとaltを編集できる「はてブロimageTitle」というChrome拡張を作った

はてなブログでは、fotolifeを使って画像を貼り付ける事ができるけど、タグとかよく分からないし、もっと簡単に意味のある説明文やタイトルにしたいなぁ。

やってみよう、大はてな実験 で。

「ブログタイトル」を変更したい場合は、こちらをご覧ください。

 

 

f:id:psne:20150205190656p:plain

 

記事作成画面でAlt・Title属性を編集できるChrome拡張機能を作りました。

 

f:id:psne:20150206083930p:plain

どうぞご利用ください。

 

Chrome拡張機能ですので、Chromeが必要です。
Firefox版は評価版となります。

 

はてなブログの画像向けSEO対策としてalt属性とtitle属性を編集したい

通常通りに貼り付けると画像のIDが表示されてしまいますが、はてブロimageTitleを利用する事でalt属性とtitle属性を利用したSEO対策ができます。

 

どうやって使うの?(Google Chrome版)

 

Chromeではないようです。お手数ですが、下のリンクからインストールを行ってください。
早速インストールする  (クリックで開始します)

(仕様変更のため、Chrome70 以降では ウェブストアにアクセスする必要があります。)

 

または、Chrome ウェブストアにアクセスして、拡張機能をインストールします。

chrome.google.com

 

どうやって使うの?(Firefox版)

addons.mozilla.org

Firefox版は機能限定のα版となります。(設定の保存ができません。)

 

インストールが完了しましたら、記事を書いてみましょう。

写真を投稿する為に、編集サイドバーから「写真を投稿」を選択します。

f:id:psne:20150205190657p:plain

 

選択すると、メニューが一つ増えていますので、画像を選択します。

f:id:psne:20150205190658p:plain
タイトルを付けて「変更する」ボタンを押すと、文字の羅列(fotolife記法)から新しいタイトルへ変更されます。

 

タイトルの変更が終わりましたら、記事の好きな位置へ貼り付けましょう。

 

f:id:psne:20151017220202j:plain
また、プレビュー機能を利用すれば、大きな画像で確認することができます。

 

設定を変えて便利に使いたい

毎回「変更する」ボタンを押すのが面倒だ そう言いたい顔をしていますね?
していなくても大丈夫です。

アドレスバーの右側、お気に入り表示を表す「☆」の隣に、見慣れないマークが付いていませんか?
こちらが表示されている時は、「はてブロimageTitle」が利用可能な状態です。クリックしてみましょう。

f:id:psne:20150205190659p:plain
設定ができそうなボタンが出てきました。

「設定をする」ボタンをクリックすると、各種設定が開きます。好みに合わせて設定をしてください。

設定は、設定画面にて変更後、「記事を書く」ページにて新しい画像を選択した時に反映されます。

 

この拡張機能を消したい。アンインストールするには?

f:id:psne:20150205190700p:plain
アイコンを右クリックすると出てくるメニューから「Chromeから削除」を選択します。サクッと消えます。またいつかご利用ください。

 

機能を増やしてほしい

具体的に何処かに書いてもらえると助かります。

 

その他FAQ

インストールできない!

f:id:psne:20150129074046p:plain

Chrome にアイテムを追加する際に問題が発生しました。ページを更新してからもう一度お試しください。

 →こちらのエラーが表示されてインストールできない場合、Chromeのバージョンアップ(更新)待機が原因です。一度Chromeを終了、再起動する事によってインストールする事ができるようになります。

FF版もください。
 →分かりやすいドキュメントください。

既に貼ってある画像を編集するには?
 →現時点では未対応です。貼り直すと良いと思います。

「写真を投稿」ボタンで選んだものが、そのまま勝手に貼り付けされる
 →はてなブログ側の仕様です。フォトライフを開いて一度に上げてしまうと効率が良いですよ。

ソース公開は?
 →githubに置く予定です。拡張機能はインストール時点で検証が可能です。(上級者向け)

Analyticsを使っている理由は?これで誰が使っているのか判ったりする?
 →動作確認と使用機能の統計の為に導入しております。収集データには、使用者を特定できるデータは含まれておりません。*1

現在予定されている追加機能は?
 →色々盛り込んでいくと、はてなブログ全般をサポートする別の拡張機能を用意した方が良いかもしれませんが、いくつか考えています。

はてな記法ではタイトル付けられないの?
 →仕様では不可能のようですが、付け方を教えていただければ、サクッと対応します。

Markdownモードでは、HTMLではなくMarkdownの仕様に沿ったフォーマットにしたい。
 →技術的には可能ですが、Photographのスキーマを埋め込む事ができないので、こちらも対応方法が分かれば前向きに実装します。

出、出~拡散ボタン大量承認欲求奴~wwwwww
 →出、出~無駄作者叩き奴~wwww*2

 

どうやって動いてるの?
 →Chromeのインストールフォルダを探していくと、Extensionsというフォルダが有るので、その中に色々入っています。HTMLとjavascriptの組み合わせで、大した事はやっていません。興味を持ったら調べてみると、「新しい何か」に触れるきっかけになりますよ。

 

作ってみてどうだった?

何故この機能(タイトルを付ける)が未実装なのかが分かった。
おそらく、はてな記法の実装部分が問題で、現時点では全てのモードで提供できないからではないかな?と考えています。

Chrome拡張機能のドキュメントが見づらくて仕方がない。目次ください。
わりと何でもできるので楽しい。ただし、少しお作法が必要なので、ドキュメントは丸々読んでおいた方が効率がかなり良いです。

GooglePlayの登録料よりは安いのですが、超円高の時に$5投げておけば良かったなーと感じました。
収益という導線が無いので、はてなポイントを投げる為のリンクを付けようか考えましたが、ストア側での手続きの仕方が未確認な為、未実装です。何か投げたい場合は、ブログのボタンを利用するか、第三者へ貢献するなりすると良いと思います。

まかないランチ食べてみたいですね。
時間稼働のエンジニアさんも募集してるのですか。と思いながら書いていた。

 

このまま色々書いても良いのですが、制作中の様々なポイントは別エントリーの方が良さそうなので、その時までお楽しみに。

 

 

自動でやってくれるSEO対策を導入して書くことに集中したい

psn.hatenablog.jp

訪問者に便利な案内を提供しましょう。

 

他にも色々な「大はてな実験」がありますので、興味がありましたらご覧ください。

 

大はてな実験
他の大はてな実験を見る

*1:ゲームアプリ等では、もうちょっと詳細に統計を取っていると思いますよ。

*2:FAQのネタが尽きた