Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Githubの草を表示するウィジェットプラグイン

428 visualizaciones

Publicado el

第2回 群馬 WordPress Meetupスライド
Githubの草を表示するウィジェットを追加するWordPressプラグインを作ってみた、という話

Publicado en: Tecnología
  • Inicia sesión para ver los comentarios

  • Sé el primero en recomendar esto

Githubの草を表示するウィジェットプラグイン

  1. 1. Githubの草を表⽰するウィジェットプラグインGithubの草を表⽰するウィジェットプラグイン 2019/5/18(⼟) アルム=バンド
  2. 2.  ⾃⼰紹介⾃⼰紹介 HN: アルム=バンド SNS等  @Bredtn_1et  arm-band Qrunch: armband
  3. 3. アジェンダアジェンダ 1. Githubの「草」を取得す る Githubの「草」とは︖ 取得する⽅法 2. プラグインを作る プラグイン⼊⾨ メニューと設定画⾯ 3. ウィジェットを表⽰する
  4. 4. 1. Githubの「草」を取得する1. Githubの「草」を取得する
  5. 5.  そもそも Githubとは︖そもそも Githubとは︖ Github: ソースコードのホスティングサービス バージョン管理 Git使⽤ SNS機能 フォロー、お気に⼊り、コミュニケーショ ン 開発プラットフォーム 差分表⽰、イシュー(課題)管理、wiki
  6. 6.  Githubの「草」とは︖Githubの「草」とは︖ ユーザページ: Githubにプッシュした回数がタイルで表 ⽰ プッシュするとタイルが緑⾊に 7 × 50数列 芝⽣・草原のような⾒た⽬→草 ⾊が濃い = プッシュ回数が多い プログラマの活動指標の1つ
  7. 7.  サンプルサンプル
  8. 8. 草をブログパーツとして埋め込めば草をブログパーツとして埋め込めば 活動アピールになるのでは︖活動アピールになるのでは︖
  9. 9. 取得する⽅法取得する⽅法 JavaScript + PHP JS: ⾮同期にSVGを取得(axios) PHP: JSの代理としてGETリクエスト クロスオリジン(異なるドメイン)のページ は JSでは取得できない Githubサーバからのレスポンスを返す HTTPステータスコードを反映 (エラーチェック)
  10. 10. クロスオリジンクロスオリジン JavaScript + PHP JS: ⾮同期にSVGを取得(axios) PHP: JSの代理としてGETリクエスト クロスオリジン(異なるドメイン)のページ は JSでは取得できない Githubサーバからのレスポンスを返す HTTPステータスコードを反映 (エラーチェック)
  11. 11. クロスオリジンクロスオリジン
  12. 12. エラーチェックエラーチェック JavaScript + PHP JS: ⾮同期にSVGを取得(axios) PHP: JSの代理としてGETリクエスト クロスオリジン(異なるドメイン)のページ は JSでは取得できない Githubサーバからのレスポンスを返す HTTPステータスコードを反映 (エラーチェック)
  13. 13. エラーチェックエラーチェック
  14. 14. 2. プラグインを作る2. プラグインを作る
  15. 15. やりたいことやりたいこと フロント: Githubページの中からSVGを取得・表⽰ ブログパーツ(ウィジェット) WP管理画⾯: 設定画⾯: GithubアカウントIDを設定 メニュー: サイドバーにメニューを表⽰ ウィジェット: ウィジェット画⾯で設定できるよう に
  16. 16. プラグイン⼊⾨プラグイン⼊⾨ 作り⽅: 定型フォーマットのコメントをPHPの最初に書 く WPへの認識: wp-content/plugins/下にディレクトリ作成 上記PHPを配置
  17. 17. プラグインのコメントフォーマットプラグインのコメントフォーマット <?php /* Plugin Name: Kayanohime Description: Githubの草を取得し、ウィジェットとして表示するWordPressプラグイン Version: 0.0.1 Author: アルム=バンド */ //以下プログラム
  18. 18.  メニューへの追加メニューへの追加 アクションフックへフック admin_menu コールバック関数を設定 設定画⾯のパラメータを保存できるよう に
  19. 19. コールバック: add_actionの第⼆引数 register_kayanohime_settings 設定パラメータ: register_settingの第⼀引数kayanohime-settings //メニュー作成 function kayanohime_create_menu() { add_menu_page( 'Kayanohime', 'カヤノヒメ設定', 'administrator', 'kayan // 独自関数をコールバック関数とする add_action( 'admin_init', 'register_kayanohime_settings' ); } add_action( 'admin_menu', 'kayanohime_create_menu' ); //コールバック function register_kayanohime_settings() { register_setting( 'kayanohime-settings', 'kayanohime_github_accoun }
  20. 20.  設定画⾯設定画⾯ 画⾯に表⽰する内容を記述 form, submitボタン settings_fieldsでregister_settingsのパラメータを指 定 do_settings_sectionで良い感じに整形 submit_buttonでsubmitボタン
  21. 21. <?php function kayanohime_settings_page() { ?> <div class="wrap"> <h2>カヤノヒメ 設定</h2> <form method="post" action="options.php"> <?php settings_fields( 'kayanohime-settings' ); ?> <?php do_settings_sections( 'kayanohime-settings' ); ?> <table class="form-table"> <tr> <th>Github アカウント</th> <td><input type="text" name="kayanohime_github_acc </tr> </table> <?php submit_button( '変更を保存', 'primary large', 'submit', true, array </form> </div> <?php } ?>
  22. 22. 3. ウィジェットを表⽰する3. ウィジェットを表⽰する
  23. 23. ウィジェットの追加ウィジェットの追加 WP_Widgetクラスを継承 widgetメソッド: 実際の表⽰の際に処理・出⼒されるコー ド formメソッド: 管理者画⾯ updateメソッド: 更新処理 引数: 1. 更新予定インスタンス 2. 元々のパラメータのインスタンス 戻り値: インスタンス(形式注意)
  24. 24. class Kayanohime_Widget extends WP_Widget { //ウィジェット(フロント) public function widget( $args, $instance ) { //略 } //ウィジェット管理画面のフォーム項目 public function form( $instance ) { //略 } //更新時処理 function update( $new_instance, $old_instance ) { //略 return $instance; } } //登録 add_action( 'widgets_init', function () { register_widget( 'Kayanohime_Widget' ); } );
  25. 25. 完成🎉完成🎉
  26. 26. 課題課題 スクレイピングと利⽤規約: GithubのページからSVG画像のタグを抽出、表 ⽰ 利⽤規約的に  公開使⽤は  svgタグをそのままではなく、画像に変換 サーバへの負荷……🤔
  27. 27. まとめまとめ プラグインの作成は思ったよりも簡 単 設定画⾯やウィジェットの追加も可 アクションフック 柔軟にカスタマイズ 機能によっては別の部分も注意
  28. 28. ご静聴ありがとうございましたご静聴ありがとうございました

×