Enviar pesquisa
Carregar
Githubの草を表示するウィジェットプラグイン
•
0 gostou
•
723 visualizações
A
Arm Band
Seguir
第2回 群馬 WordPress Meetupスライド Githubの草を表示するウィジェットを追加するWordPressプラグインを作ってみた、という話
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 32
Baixar agora
Baixar para ler offline
Recomendados
Git学ぼうぜの会 ハンズオン資料 - LOCAL学生部 GWイベント
Git学ぼうぜの会 ハンズオン資料 - LOCAL学生部 GWイベント
Takuya Mukohira
m5stackでメダカ餌やり機をつくった
m5stackでメダカ餌やり機をつくった
K K
soracomとわたしの一年
soracomとわたしの一年
K K
Pythonのパッケージ管理ツールの話@2020
Pythonのパッケージ管理ツールの話@2020
Katsuhiro Morishita
LT_by_Takeshi
LT_by_Takeshi
Takeshi Akutsu
YouTube動画の撮影場所をGPSの位置情報による検索ツール
YouTube動画の撮影場所をGPSの位置情報による検索ツール
新潟コンサルタント横田秀珠
Pillowの使い方
Pillowの使い方
2bo 2bo
GitHub勉強会
GitHub勉強会
ArusuDev
Recomendados
Git学ぼうぜの会 ハンズオン資料 - LOCAL学生部 GWイベント
Git学ぼうぜの会 ハンズオン資料 - LOCAL学生部 GWイベント
Takuya Mukohira
m5stackでメダカ餌やり機をつくった
m5stackでメダカ餌やり機をつくった
K K
soracomとわたしの一年
soracomとわたしの一年
K K
Pythonのパッケージ管理ツールの話@2020
Pythonのパッケージ管理ツールの話@2020
Katsuhiro Morishita
LT_by_Takeshi
LT_by_Takeshi
Takeshi Akutsu
YouTube動画の撮影場所をGPSの位置情報による検索ツール
YouTube動画の撮影場所をGPSの位置情報による検索ツール
新潟コンサルタント横田秀珠
Pillowの使い方
Pillowの使い方
2bo 2bo
GitHub勉強会
GitHub勉強会
ArusuDev
GitHub勉強会~当日資料~
GitHub勉強会~当日資料~
Shintaro Mizuno
GitHubの入門を読む前に読む入門書
GitHubの入門を読む前に読む入門書
相皓 卞
Gitの紹介
Gitの紹介
Shoot Morii
@s_ssk13さん向けGitHub入門
@s_ssk13さん向けGitHub入門
Takashi Imagire
GameJamでGithubを使おう
GameJamでGithubを使おう
Ryouta Morita
gitを1から学ぼう!
gitを1から学ぼう!
Hideyuki SASAKURA
Source treeの紹介
Source treeの紹介
ko ty
Git勉強会
Git勉強会
Masaaki Kakimoto
Git講習会
Git講習会
galluda
Git紹介~入門編~
Git紹介~入門編~
ngi group.
Git紹介
Git紹介
Seiji Ochiai
底辺webプログラマが今更git語ってみた
底辺webプログラマが今更git語ってみた
Yudai Fujita
医療データ解析者へ向けた Git・GitHub 入門
医療データ解析者へ向けた Git・GitHub 入門
Yui Tomo
GitHubの使い方
GitHubの使い方
Atelier Frameworks
SNS 「github」で遊ぼう
SNS 「github」で遊ぼう
Tomohiko Himura
Gitプレゼンテーション
Gitプレゼンテーション
Masaru Ookawa
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
Mais conteúdo relacionado
Semelhante a Githubの草を表示するウィジェットプラグイン
GitHub勉強会~当日資料~
GitHub勉強会~当日資料~
Shintaro Mizuno
GitHubの入門を読む前に読む入門書
GitHubの入門を読む前に読む入門書
相皓 卞
Gitの紹介
Gitの紹介
Shoot Morii
@s_ssk13さん向けGitHub入門
@s_ssk13さん向けGitHub入門
Takashi Imagire
GameJamでGithubを使おう
GameJamでGithubを使おう
Ryouta Morita
gitを1から学ぼう!
gitを1から学ぼう!
Hideyuki SASAKURA
Source treeの紹介
Source treeの紹介
ko ty
Git勉強会
Git勉強会
Masaaki Kakimoto
Git講習会
Git講習会
galluda
Git紹介~入門編~
Git紹介~入門編~
ngi group.
Git紹介
Git紹介
Seiji Ochiai
底辺webプログラマが今更git語ってみた
底辺webプログラマが今更git語ってみた
Yudai Fujita
医療データ解析者へ向けた Git・GitHub 入門
医療データ解析者へ向けた Git・GitHub 入門
Yui Tomo
GitHubの使い方
GitHubの使い方
Atelier Frameworks
SNS 「github」で遊ぼう
SNS 「github」で遊ぼう
Tomohiko Himura
Gitプレゼンテーション
Gitプレゼンテーション
Masaru Ookawa
Semelhante a Githubの草を表示するウィジェットプラグイン
(16)
GitHub勉強会~当日資料~
GitHub勉強会~当日資料~
GitHubの入門を読む前に読む入門書
GitHubの入門を読む前に読む入門書
Gitの紹介
Gitの紹介
@s_ssk13さん向けGitHub入門
@s_ssk13さん向けGitHub入門
GameJamでGithubを使おう
GameJamでGithubを使おう
gitを1から学ぼう!
gitを1から学ぼう!
Source treeの紹介
Source treeの紹介
Git勉強会
Git勉強会
Git講習会
Git講習会
Git紹介~入門編~
Git紹介~入門編~
Git紹介
Git紹介
底辺webプログラマが今更git語ってみた
底辺webプログラマが今更git語ってみた
医療データ解析者へ向けた Git・GitHub 入門
医療データ解析者へ向けた Git・GitHub 入門
GitHubの使い方
GitHubの使い方
SNS 「github」で遊ぼう
SNS 「github」で遊ぼう
Gitプレゼンテーション
Gitプレゼンテーション
Último
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Último
(7)
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Githubの草を表示するウィジェットプラグイン
1.
Githubの草を表⽰するウィジェットプラグインGithubの草を表⽰するウィジェットプラグイン 2019/5/18(⼟) アルム=バンド
2.
⾃⼰紹介⾃⼰紹介 HN: アルム=バンド SNS等
@Bredtn_1et arm-band Qrunch: armband
3.
アジェンダアジェンダ 1. Githubの「草」を取得す る Githubの「草」とは︖ 取得する⽅法 2. プラグインを作る プラグイン⼊⾨ メニューと設定画⾯ 3.
ウィジェットを表⽰する
4.
1. Githubの「草」を取得する1. Githubの「草」を取得する
5.
そもそも Githubとは︖そもそも
Githubとは︖ Github: ソースコードのホスティングサービス バージョン管理 Git使⽤ SNS機能 フォロー、お気に⼊り、コミュニケーショ ン 開発プラットフォーム 差分表⽰、イシュー(課題)管理、wiki
6.
Githubの「草」とは︖Githubの「草」とは︖ ユーザページ: Githubにプッシュした回数がタイルで表 ⽰ プッシュするとタイルが緑⾊に 7
× 50数列 芝⽣・草原のような⾒た⽬→草 ⾊が濃い = プッシュ回数が多い プログラマの活動指標の1つ
7.
サンプルサンプル
8.
草をブログパーツとして埋め込めば草をブログパーツとして埋め込めば 活動アピールになるのでは︖活動アピールになるのでは︖
9.
取得する⽅法取得する⽅法 JavaScript + PHP JS:
⾮同期にSVGを取得(axios) PHP: JSの代理としてGETリクエスト クロスオリジン(異なるドメイン)のページ は JSでは取得できない Githubサーバからのレスポンスを返す HTTPステータスコードを反映 (エラーチェック)
10.
クロスオリジンクロスオリジン JavaScript + PHP JS:
⾮同期にSVGを取得(axios) PHP: JSの代理としてGETリクエスト クロスオリジン(異なるドメイン)のページ は JSでは取得できない Githubサーバからのレスポンスを返す HTTPステータスコードを反映 (エラーチェック)
11.
クロスオリジンクロスオリジン
12.
エラーチェックエラーチェック JavaScript + PHP JS:
⾮同期にSVGを取得(axios) PHP: JSの代理としてGETリクエスト クロスオリジン(異なるドメイン)のページ は JSでは取得できない Githubサーバからのレスポンスを返す HTTPステータスコードを反映 (エラーチェック)
13.
エラーチェックエラーチェック
14.
2. プラグインを作る2. プラグインを作る
15.
やりたいことやりたいこと フロント: Githubページの中からSVGを取得・表⽰ ブログパーツ(ウィジェット) WP管理画⾯: 設定画⾯: GithubアカウントIDを設定 メニュー: サイドバーにメニューを表⽰ ウィジェット:
ウィジェット画⾯で設定できるよう に
16.
プラグイン⼊⾨プラグイン⼊⾨ 作り⽅: 定型フォーマットのコメントをPHPの最初に書 く WPへの認識: wp-content/plugins/下にディレクトリ作成 上記PHPを配置
17.
プラグインのコメントフォーマットプラグインのコメントフォーマット <?php /* Plugin Name: Kayanohime Description:
Githubの草を取得し、ウィジェットとして表示するWordPressプラグイン Version: 0.0.1 Author: アルム=バンド */ //以下プログラム
18.
19.
メニューへの追加メニューへの追加 アクションフックへフック admin_menu コールバック関数を設定 設定画⾯のパラメータを保存できるよう に
20.
コールバック: 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 }
21.
22.
設定画⾯設定画⾯ 画⾯に表⽰する内容を記述 form, submitボタン settings_fieldsでregister_settingsのパラメータを指 定 do_settings_sectionで良い感じに整形 submit_buttonでsubmitボタン
23.
<?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 } ?>
24.
25.
3. ウィジェットを表⽰する3. ウィジェットを表⽰する
26.
ウィジェットの追加ウィジェットの追加 WP_Widgetクラスを継承 widgetメソッド: 実際の表⽰の際に処理・出⼒されるコー ド formメソッド: 管理者画⾯ updateメソッド:
更新処理 引数: 1. 更新予定インスタンス 2. 元々のパラメータのインスタンス 戻り値: インスタンス(形式注意)
27.
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' ); } );
28.
29.
完成🎉完成🎉
30.
課題課題 スクレイピングと利⽤規約: GithubのページからSVG画像のタグを抽出、表 ⽰ 利⽤規約的に 公開使⽤は svgタグをそのままではなく、画像に変換 サーバへの負荷……🤔
31.
まとめまとめ プラグインの作成は思ったよりも簡 単 設定画⾯やウィジェットの追加も可 アクションフック 柔軟にカスタマイズ 機能によっては別の部分も注意
32.
ご静聴ありがとうございましたご静聴ありがとうございました
Baixar agora