SlideShare a Scribd company logo
1 of 40
プラグインカスタマイズを
始めた理由、
カスタマイズして良かった点
苦労した点

響 @hibiki443
自己紹介
• hibiki (@hibiki443)
• ウェブディレクター、
  マークアップエンジニア

• Numb. -> http://wp.graphact.com/
• wp-hatena 拡張版 作ってます!
プラグイン
カスタマイズを
 始めた理由
3つの理由

• 欲しい機能をつけたかった!
• 丁寧で分かりやすい解説記事があっ
 た!

• カスタマイズならば、初心者でも手が
 出しやすかった!
wp-hatena?
• wp-hatena は、元々 hiromasa さんの
 作ったプラグイン

• ソーシャルブックマークボタンを任意
 の場所につけることができる

• 最初は「はてブ」と「delicious」に
 対応していた
wp-hatena背景
• 2005年頃に誕生したプラグイン
• この頃、delicious、はてブなどの
 ソーシャルブックマークが流行

• 日本でもぞくぞくと新しい
 ソーシャルブックマークサービス誕生
 (Yahoo!ブックマーク、Livedoor クリップ、ニフ
 ティクリップなど)
しかし…!
悲しい現実

• 当時は WordPress ユーザーが日本に
 あまり居なかった

• ソーシャルブックマークサービスの
 ボタンをずらっとつけるプラグインも
 海外のものばかり
海外のプラグイン:
  「日本のソーシャル
 ブックマークサービス?
なにそれ?うめぇんか?」
欲しいものがない

• 私のブログに来るのは日本人がメイン
• 訪問者が使っていないソーシャルブッ
 クマークサービスのボタンばかりを並
 べていてもあんまり意味がないよなあ

• 国産サービス対応プラグイン欲しい
そこに、彗星のごとく
    国産ソーシャル
 ブックマークサービス
「はてブ」対応プラグイン
 wp-hatena が現れた!
欲が出る

• 国産のソーシャルブックマークサービ
 ス、Yahoo!ブックマーク等、沢山ある

• wp-hatena にそれらも追加できたら
 なぁ…

• でもプラグインってわからない
プラグイン…??
• wp-hatena 作者の hiromasa さんが
 「wp-hatena にみるプラグインの作
 成」という記事をブログに書いていた
 http://zone.maple4ever.net/blog/
 archives/443/

• 興味で、とりあえず読んでみた
素晴らしい記事だった!

• wp-hatena のベースとなったソース
 コードでの解説

• 超ていねい!わかりやすい!
• WordPress プラグインを初めて触って
 みた私でも理解できるくらい、噛み砕
 いて説明してあった
• 関連記事「WordPress プラグイン作成
 時のノウハウ -前編-」「〃 -中編-」
 「〃 -後編-」もあわせて読むのがオス
 スメ!
 http://zone.maple4ever.net/blog/
 archives/440/

• 少し古い記事ですが、今でも十分参考
 になります
チャレンジしてみた

• 記事がわかりやすかったので「私にも
 できるのでは!」と思いはじめる

• ソーシャルブックマークサービスの追
 加を見様見真似でチャレンジ

• できた!すっごーーく嬉しい!
拡張版リリース
• せっかくだから、色々な人が使えるよ
 うに共有しよう

• ブログで拡張版をリリース
• 現在は WordPress Plugins/JSeries
 に置いています
 http://wppluginsj.sourceforge.jp/
 wp-hatena-extended/
3つの理由

• 欲しい機能をつけたかった!
• 丁寧で分かりやすい解説記事があっ
 た!

• カスタマイズならば、初心者でも手が
 出しやすかった!
カスタマイズして
 良かった点
最初の感動

• 自分が欲しい機能をつけられる!
• プラグインを使ってもらえると
 すっごく嬉しい :)

• プラグインソースコードを見て、何をし
 てるのか少し読めるように
徐々に成長できる

• プラグインをイチから作るより、比較
 的、手が出しやすい

• こうしたいな…と思ったら、その都度
 チャレンジしていく

• 気づいたらレベルアップしている
交流が増えていく!
• 要望をもらって改善したり
• ソースコードを採点してもらえたり
• アドバイスがもらえたり
• 総合的にすごく勉強になる!
• 人との交流が増えて楽しい!
良かった点まとめ

• 作ること自体が楽しい、動いて感動!
• とても良い勉強になる!
• 交流が増える!
カスタマイズして
 苦労した点
最初は右往左往
• 一番はじめは「何が分からないのか分
 からない」状態だった

• 勉強しながらトライアンドエラー
• 自分の無知さを思い知ることに
• WordPress の仕様を知っておく必要
 がある
最終的にはプラス
• プラグインをカスタマイズして苦労し
 た経験は、すべて自分の身になってい
 ると感じる

• みんな親切であたたかいコミュニティ
 なので、困ってつぶやくと助け舟が飛
 んでくることも
wp-hatena 拡張版
 今はどんなプラグインになっているか
ざっくり変更点

• 対応サービスかなり増えてます!
• 管理画面がつきました
• 好きなアイコン画像を使うことも可能
対応サービス
• はてなブックマーク      • Livedoor クリップ
• はてなブックマークの     • Yahoo! ブックマーク
    ブックマーク数をテキ
    スト表示         • FC2 ブックマーク
•   はてなブックマーク数   • POOKMARK Airlines
    を画像表示
                 • Buzzurl
• delicious
• Choix           • mixi チェック
• newsing         • Instapaper に保存
• Evernote Clip   • Read It Later に保
                   存
• Facebook いい
 ね!               • Google +1
• Facebook シェア    • Pinterest
• Twitter でつぶやく
ブックマーク
サービスに限らず
 なんでも対応!
最近の利用傾向

• 最近はソーシャルブックマークサービ
 スのボタン表示は減少かも

• Evernote Clip や Facebook いいね!
 ボタン、Twitter でつぶやく、あたりが
 メインで使われている様子
管理画面
• Twitter つぶやくボタン、Facebook い
 いね!ボタンなどなど…これらはみん
 な、「縦長」「横長」「吹き出しの有
 無」が選べる

• どうやって設定しよう?
 楽・簡単な方がいい!
管理画面つけました

• 「横長」「縦長」
 「噴出し有無」等の
 デザイン選択

• Evernote クリップ
 する範囲指定 など
管理画面の付け方って?

• どうやって管理画面つけるんだろう?
• またも hiromasa さんの「管理画面の
 ある WordPress プラグインの作成方
 法」という記事を読んでみた
 http://zone.maple4ever.net/blog/
 archives/799/
気合でごりごり

• その他プラグインのソースコードを見
 て、こういうことかな∼など勉強

• トライアンドエラーして、無事に実装
アイコン変更可

• 独自アイコンを利用可能
 例)

 ※一部使えません(Facebook いいね!等)
最近のアップデート
• WordCrab Fukui 2012 で
 wokamoto さんの「Pinterest に対応
 して欲しいなー」を受けて Pinterest
 に対応

• フォトログには良いかも
• みなさんも要望あれば是非 :)
ありがとう
ございました!

More Related Content

Similar to プラグインカスタマイズを始めた理由、カスタマイズで良かった点・苦労した点

a-blogcsm な寺子屋 2 in Okazaki
a-blogcsm な寺子屋 2 in Okazakia-blogcsm な寺子屋 2 in Okazaki
a-blogcsm な寺子屋 2 in Okazaki
Etsushi Ishii
 
僕がwordpressを選んだ理由
僕がwordpressを選んだ理由僕がwordpressを選んだ理由
僕がwordpressを選んだ理由
jsugiyama
 
レンタルサーバで今すぐ始めるWEB開発
レンタルサーバで今すぐ始めるWEB開発レンタルサーバで今すぐ始めるWEB開発
レンタルサーバで今すぐ始めるWEB開発
Naoyuki Kataoka
 
バージョン管理ツールの話
バージョン管理ツールの話バージョン管理ツールの話
バージョン管理ツールの話
Shota Homma
 
Stack Overflow+英文読む時、便利なツール
Stack Overflow+英文読む時、便利なツールStack Overflow+英文読む時、便利なツール
Stack Overflow+英文読む時、便利なツール
ishiki-takai
 
Facebookページ作成方法【初期編】
Facebookページ作成方法【初期編】Facebookページ作成方法【初期編】
Facebookページ作成方法【初期編】
Kota Saito
 
Facebookページの作り方【初期編】
Facebookページの作り方【初期編】Facebookページの作り方【初期編】
Facebookページの作り方【初期編】
Kota Saito
 
Facebookページ作成①
Facebookページ作成①Facebookページ作成①
Facebookページ作成①
Kota Saito
 
エンジニアのためのアイコン作成勉強会
エンジニアのためのアイコン作成勉強会エンジニアのためのアイコン作成勉強会
エンジニアのためのアイコン作成勉強会
Kazuaki KURIU
 

Similar to プラグインカスタマイズを始めた理由、カスタマイズで良かった点・苦労した点 (18)

なんとかStormに負けたくないEmacs初級篇
なんとかStormに負けたくないEmacs初級篇なんとかStormに負けたくないEmacs初級篇
なんとかStormに負けたくないEmacs初級篇
 
a-blogcsm な寺子屋 2 in Okazaki
a-blogcsm な寺子屋 2 in Okazakia-blogcsm な寺子屋 2 in Okazaki
a-blogcsm な寺子屋 2 in Okazaki
 
Tumblr workshop 3
Tumblr workshop 3Tumblr workshop 3
Tumblr workshop 3
 
はてなブログご紹介@looops勉強会
はてなブログご紹介@looops勉強会はてなブログご紹介@looops勉強会
はてなブログご紹介@looops勉強会
 
僕がwordpressを選んだ理由
僕がwordpressを選んだ理由僕がwordpressを選んだ理由
僕がwordpressを選んだ理由
 
5分で資料作ってSlideShareにアップロードする錬金術
5分で資料作ってSlideShareにアップロードする錬金術5分で資料作ってSlideShareにアップロードする錬金術
5分で資料作ってSlideShareにアップロードする錬金術
 
Tabesugi
TabesugiTabesugi
Tabesugi
 
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしようメニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
 
レンタルサーバで今すぐ始めるWEB開発
レンタルサーバで今すぐ始めるWEB開発レンタルサーバで今すぐ始めるWEB開発
レンタルサーバで今すぐ始めるWEB開発
 
バージョン管理ツールの話
バージョン管理ツールの話バージョン管理ツールの話
バージョン管理ツールの話
 
GTMF2016「Unreal Engine 4で高品質なVRコンテンツを 制作するために知っておきたい100のテクニック」
GTMF2016「Unreal Engine 4で高品質なVRコンテンツを 制作するために知っておきたい100のテクニック」GTMF2016「Unreal Engine 4で高品質なVRコンテンツを 制作するために知っておきたい100のテクニック」
GTMF2016「Unreal Engine 4で高品質なVRコンテンツを 制作するために知っておきたい100のテクニック」
 
GTMF 2016:Unreal Engine 4で高品質なVRコンテンツを制作するために知っておきたい100のテクニック Epic Games Japan
GTMF 2016:Unreal Engine 4で高品質なVRコンテンツを制作するために知っておきたい100のテクニック Epic Games JapanGTMF 2016:Unreal Engine 4で高品質なVRコンテンツを制作するために知っておきたい100のテクニック Epic Games Japan
GTMF 2016:Unreal Engine 4で高品質なVRコンテンツを制作するために知っておきたい100のテクニック Epic Games Japan
 
Stack Overflow+英文読む時、便利なツール
Stack Overflow+英文読む時、便利なツールStack Overflow+英文読む時、便利なツール
Stack Overflow+英文読む時、便利なツール
 
Facebookページ作成方法【初期編】
Facebookページ作成方法【初期編】Facebookページ作成方法【初期編】
Facebookページ作成方法【初期編】
 
Facebookページの作り方【初期編】
Facebookページの作り方【初期編】Facebookページの作り方【初期編】
Facebookページの作り方【初期編】
 
Facebookページ作成①
Facebookページ作成①Facebookページ作成①
Facebookページ作成①
 
エンジニアのためのアイコン作成勉強会
エンジニアのためのアイコン作成勉強会エンジニアのためのアイコン作成勉強会
エンジニアのためのアイコン作成勉強会
 
Yesod でブログエンジンをつくってみた
Yesod でブログエンジンをつくってみたYesod でブログエンジンをつくってみた
Yesod でブログエンジンをつくってみた
 

プラグインカスタマイズを始めた理由、カスタマイズで良かった点・苦労した点

Editor's Notes

  1. こんにちは!ひびきと言います、どうぞよろしくお願いします!\n今日は、「プラグインカスタマイズを始めた理由、カスタマイズしてよかった点・苦労した点」についてお話させていただきます。\n
  2. まず、ざっくりですが自己紹介を。\n普段はウェブディレクターや、マークアップエンジニアをしています。\nNumb(なむ)というブログをやっていまして、\n今日のお話のメインになる、wp-hatena拡張版を作っています。\n\n
  3. \n
  4. 先に結論をいっちゃいます。理由は大きくいうと3つ。\n↑のないよう↓\nでは、次から具体的にちょっとお話します!\n\nプラグインのカスタマイズを始めた理由\n\n
  5. 私がカスタマイズをしているwp-hatenaってなにか?と言いますと、\n
  6. wp-hatenaができた頃の背景をちょっとお話します。\n\nブログにソーシャルブックマークのボタンをずらっと並べてつけたりすることも、この頃から。私もやりたいなーと思いました\n
  7. \n
  8. \n
  9. 当然、日本のソーシャルブックマークサービスには対応してない\nがっかりや!\n
  10. \n
  11. ヤッター\n待望のプラグインだったので、飛びついて使いました!\nしかし。。。wp-hatenaの登場はすごく嬉しかったんですが、だんだん欲がでてきて。\n
  12. ↑\n\n
  13. ↑のあと、\n私も最初さっぱり訳がわからないレベルだったんですが、hiromasa さんの解説がすごくわかりやすかったんですね。\n\n
  14. \n
  15. 2005年くらいの記事\n
  16. ( ある程度の勘違いと勢いは大事)\n\n
  17. ここまでが、プラグインのカスタマイズを始めた理由、です。\n流れでお話しましたが、最後にもう一度まとめると・・\n
  18. 大きくいうと3つ。\nプラグインのカスタマイズを始めた理由\n
  19. \n
  20. \n
  21. 私にとっては、とても良い勉強手段でもありました。\n突然作ろうとしても、訳がわからないと挫折しちゃうこともあると思います。\nそれに対してベースがあって、解説もあって…というのはとっかかりとして良かったです。\n
  22. 交流が生まれるのはとても楽しいですし、そういった交流の中から\n自分一人では決して考えつかないようなアドバイスをもらえたり、学ぶことがたくさんありました。\n最後にまとめますと・・\n
  23. <!ーーよかった点ここまでーー>\n\n
  24. \n
  25. 苦労した点\n
  26. 良かった点につながってしまうのですが、少し苦労したとしても、結果としてはすべてプラスだなーと思ってます\n<!ーーここまで苦労した点ーー>\n
  27. ここまででタイトルの内容、まとめ終わってしまったのですが\nどういうカスタマイズをしたのか話していなかったので、今どんなふうになっているか話したいと思います\n\n
  28. これらをちょっと詳しく話します\n
  29. WordPress の各エントリーに、こんなボタンをつけることができます。\n最初に比べて、今は相当増えてます!\n
  30. \n
  31. TwitterとかFacebookとか\n
  32. リクエストがあれば追加もしてますので「これ欲しい!」というのがあればご連絡ください :)\n次は、管理画面について\n
  33. \n
  34. \n
  35. mixi チェックの場合、mixi key というのが必要なので、それを入力する欄も\n
  36. これまた良記事!\n
  37. 次は、アイコン画像の変更について\n
  38. これはさらっと\n\n次、最後、最近のアップデート\n
  39. これで、プラグインカスタマイズを始めた理由、カスタマイズをしてよかった点、苦労した点\n+wp-hatena拡張版の最近(カスタマイズした部分)、\nの話は終わりです。\n
  40. なにか質問があればどうぞー\n