【e】パレット制作の裏側
2007年05月23日 公開
ワンクリックでタグの自動生成【e】パレットが、ありがたいことに公開から1日で300人以上の方にインストールしていただいて、総カウント数700を超えました。
今回は皆様にはあまり役に立ちそうも無い【e】パレットの舞台裏をご紹介しておきます。
制作時間は夜中21時から2時までの5時間で作り上げました。
これまで『自分用』パレットをいくつか作ってはいたのですが、私の知識の無さから相手サイトとの文字コードの不一致による問題がありました。
相手のサイトのコードがeucで私のサイトがUTF-8だとうまくタイトルをもらえない。
現在公開中のパレットには機能を削除していますが、最初に作ったときには『SEO』対策の評価なんかもつけていた為、相手のサイトの全文クロールをAjaxによって受信させ、表示させていたのです。
なんせ制作業者なので、『お、このサイトのSEOはどんなものなんだろう』と言う具合に、ボタン一つで見て回っていたんです（笑）
ところがエンコード問題が解決しない為、ブックマークレットをJIS用、EUC用、UTF-8用という3つのものを作らなければならなかったんです。
不便でなりません。
様々な書籍をみてもエンコードと言えば
$str = mb_convert_encoding($str, "UTF-8", "auto");
という感じで使えと言われていましたが、これはエラーしか帰ってこない。
これを一発解決してくれたのが、はてなでも結構おなじみのZAPA氏です。
ZAPA氏とはひょんなことから最近メールのやり取りをするようなこともあり、恥を忍んで聞いたんです。
ZAPA氏もこれについて試した事がないということだったのですが
mb_detect_encodingというページを教えていただきました。このままでは使えなかったんですが、これをアレンジして全ての言語に対応することに成功。
SEOパレットボタンもいい具合に動きだした。
制作業者のホームページを見てはSEOパレットを使うと、そのサイトのSEO技術をむき出しに出来る。
でもそんなの殆どの人はいらないでしょう。
だから私がブログでよく使う作業を楽に出来るもの、と考えました。
それが文字を含むリンクの生成です。
ようするに、どこかへリンクを貼る場合、まず相手のタイトルをコピー。そしてブログを開いてペースト。
さらに相手のサイトのURLをコピー。そしてペースト。
これがめんどくさかった。
これが完成したら私のブログの更新が楽になるかなくらいにしか考えてませんでしたけど。
ところが、実際リンクを貼る場合、画像があるとなんかしっくり来るのは人間の心理なんでしょうか。
ふと以前から公開中のBnetJapanを思い出した。
画像をつけてみよう。
サムネイルAPIは以前から使っていた為、URLさえ変数に格納してしまえば、使うのは簡単です。
それをタグとしてコピーペーストできるようになれば、私の更新が楽になると思い、導入しました。
制作開始から3時間で完成。
実際に使ってみると、これは楽だ。もしかしたら他の人も楽になるのかな。
そう考えて、セキュリティ向上。
見た目の向上（たいして向上していない）
説明ページ作成。
これに約2時間。
そしていつものようにブログを更新。
時間は深夜3時。寝ました。
そして本日はパソコンを一切触らず、現場で作業。
帰ってきてみたら正直驚きました。
はてな人気エントリーに入ってるではありませんか。
若旦那の独り言 Ver.X
リンクだけなら別にいいやって感じだけど、ちゃんとサイトのサムネイルが表示されるってのはなかなかいいアイデア。記事にはやはりちょっとした画像が入る方が取っつきやすくなるしね。他Blogの記事に刺激されてエントリー書く場合なんかは非常に良さそうだ。ありがたく使わせて貰おうっと。
黄色いジャストブログ: JustBlog 05/22/2007
Webブラウザはマウスで操作するもの──という思いこみを捨てて、驚くほど速いキーボードブラウジングの世界へ来てみよう。
石山城の DAILY BOOK MARKS and COMMENTS: 取り込みたい記事タイトルと画像キャプチャーを一発でタブ生成してくれるブックマークレット…のようなもの（感動もの）（【e】パレット）【e】
これは便利！！ 感動もの！！
あらためていつも参考にさせていただいている『ホームページを作る人のネタ帳』さんに感謝です。ありがとう！！
SR-Blog【e】
へー……なるほどな、こういう使い方できるAPI作りたいな、これはアイデアの勝利というか。
ただこれ、ニュースサイトの形態によっては使った方が遅くなるので、サイトによりけりか。漠然とリンクを大量に紹介してる（＋一言感想）は画像とかいちいちいらんだろうし……まぁもちろん、Blog形式で丁寧に解説してるサイトには向くけどね。
生成確認画面はさまずいきなりクリップボードにコピー、もしくはリスト化したテキストを生成出来るのでも需要ありそう。
という感じでレビュー記事まで。
皆さん本当にありがとうございます。
私が既に自分用に作っているマークレットを公開していくかどうかは別にして、【e】パレットにもう少し時間を使ってみようと思います。
eTubeの方の大幅なバージョンアップも、SQLデータ量の問題でサーバー管理者様からのGoが出ないという理由もあり、少し違うものを作る為の時間が作れそうです。
実際パレットを使うと言うことは、そのサイトを紹介しようと開いたわけなので、スパムを全く考えなければ、それを集計すれば面白いデータベースになると思うんです。
スパム問題をどうするかを検討中ですね。
また、ユーザー登録をするとリンクの最後尾につく【e】マークが取れるようにしたりとか、自分用に表示結果タグをカスタム出来るようになるというのもまた面白いかなと思ったり。ちなみに【e】マークを消したらダメなんて野暮なことは言いませんので消したい場合は消してください。
皆さんの意見があればこうしてほしいとか言ってもらえれば検討できますので、お時間が有るときにでもコメント、またはお問合せください。
今回は皆様にはあまり役に立ちそうも無い【e】パレットの舞台裏をご紹介しておきます。
制作時間
制作時間は夜中21時から2時までの5時間で作り上げました。
これまで『自分用』パレットをいくつか作ってはいたのですが、私の知識の無さから相手サイトとの文字コードの不一致による問題がありました。
エンコード問題
相手のサイトのコードがeucで私のサイトがUTF-8だとうまくタイトルをもらえない。
現在公開中のパレットには機能を削除していますが、最初に作ったときには『SEO』対策の評価なんかもつけていた為、相手のサイトの全文クロールをAjaxによって受信させ、表示させていたのです。
なんせ制作業者なので、『お、このサイトのSEOはどんなものなんだろう』と言う具合に、ボタン一つで見て回っていたんです（笑）
ところがエンコード問題が解決しない為、ブックマークレットをJIS用、EUC用、UTF-8用という3つのものを作らなければならなかったんです。
不便でなりません。
様々な書籍をみてもエンコードと言えば
$str = mb_convert_encoding($str, "UTF-8", "auto");
という感じで使えと言われていましたが、これはエラーしか帰ってこない。
これを一発解決してくれたのが、はてなでも結構おなじみのZAPA氏です。
ZAPA氏とはひょんなことから最近メールのやり取りをするようなこともあり、恥を忍んで聞いたんです。
ZAPA氏もこれについて試した事がないということだったのですが
mb_detect_encodingというページを教えていただきました。このままでは使えなかったんですが、これをアレンジして全ての言語に対応することに成功。
せっかく成功したのだからなんかつくってみよう
SEOパレットボタンもいい具合に動きだした。
制作業者のホームページを見てはSEOパレットを使うと、そのサイトのSEO技術をむき出しに出来る。
でもそんなの殆どの人はいらないでしょう。
だから私がブログでよく使う作業を楽に出来るもの、と考えました。
それが文字を含むリンクの生成です。
ようするに、どこかへリンクを貼る場合、まず相手のタイトルをコピー。そしてブログを開いてペースト。
さらに相手のサイトのURLをコピー。そしてペースト。
これがめんどくさかった。
これが完成したら私のブログの更新が楽になるかなくらいにしか考えてませんでしたけど。
ところが、実際リンクを貼る場合、画像があるとなんかしっくり来るのは人間の心理なんでしょうか。
ふと以前から公開中のBnetJapanを思い出した。
画像をつけてみよう。
サムネイルAPIは以前から使っていた為、URLさえ変数に格納してしまえば、使うのは簡単です。
それをタグとしてコピーペーストできるようになれば、私の更新が楽になると思い、導入しました。
制作開始から3時間で完成。
実際に使ってみると、これは楽だ。もしかしたら他の人も楽になるのかな。
そう考えて、セキュリティ向上。
見た目の向上（たいして向上していない）
説明ページ作成。
これに約2時間。
そしていつものようにブログを更新。
デビュー
時間は深夜3時。寝ました。
そして本日はパソコンを一切触らず、現場で作業。
帰ってきてみたら正直驚きました。
はてな人気エントリーに入ってるではありませんか。
若旦那の独り言 Ver.Xリンクだけなら別にいいやって感じだけど、ちゃんとサイトのサムネイルが表示されるってのはなかなかいいアイデア。記事にはやはりちょっとした画像が入る方が取っつきやすくなるしね。他Blogの記事に刺激されてエントリー書く場合なんかは非常に良さそうだ。ありがたく使わせて貰おうっと。
黄色いジャストブログ: JustBlog 05/22/2007Webブラウザはマウスで操作するもの──という思いこみを捨てて、驚くほど速いキーボードブラウジングの世界へ来てみよう。
石山城の DAILY BOOK MARKS and COMMENTS: 取り込みたい記事タイトルと画像キャプチャーを一発でタブ生成してくれるブックマークレット…のようなもの（感動もの）（【e】パレット）【e】これは便利！！ 感動もの！！
あらためていつも参考にさせていただいている『ホームページを作る人のネタ帳』さんに感謝です。ありがとう！！
SR-Blog【e】へー……なるほどな、こういう使い方できるAPI作りたいな、これはアイデアの勝利というか。
ただこれ、ニュースサイトの形態によっては使った方が遅くなるので、サイトによりけりか。漠然とリンクを大量に紹介してる（＋一言感想）は画像とかいちいちいらんだろうし……まぁもちろん、Blog形式で丁寧に解説してるサイトには向くけどね。
生成確認画面はさまずいきなりクリップボードにコピー、もしくはリスト化したテキストを生成出来るのでも需要ありそう。
という感じでレビュー記事まで。
皆さん本当にありがとうございます。
今後
私が既に自分用に作っているマークレットを公開していくかどうかは別にして、【e】パレットにもう少し時間を使ってみようと思います。
eTubeの方の大幅なバージョンアップも、SQLデータ量の問題でサーバー管理者様からのGoが出ないという理由もあり、少し違うものを作る為の時間が作れそうです。
実際パレットを使うと言うことは、そのサイトを紹介しようと開いたわけなので、スパムを全く考えなければ、それを集計すれば面白いデータベースになると思うんです。
スパム問題をどうするかを検討中ですね。
また、ユーザー登録をするとリンクの最後尾につく【e】マークが取れるようにしたりとか、自分用に表示結果タグをカスタム出来るようになるというのもまた面白いかなと思ったり。ちなみに【e】マークを消したらダメなんて野暮なことは言いませんので消したい場合は消してください。
皆さんの意見があればこうしてほしいとか言ってもらえれば検討できますので、お時間が有るときにでもコメント、またはお問合せください。