Slide 1

Slide 1 text

WordPress 新マニュアル「HelpHub」の 言語リンク用プラグイン作成顛末 Making of HelpHub Language Selector Plugin WordPressコントリビュート勉強会 第5回 in タロスカイ (株) 2016年12月10日 第1.2版 立花 明 (@atachibana)

Slide 2

Slide 2 text

自己紹介 • 立花 明 • IT 関連会社勤務 (非 WordPress) • 好きなこと: 何かを集めること、並べること – モットー: これ以上集め始めない、並べ始めない 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 2

Slide 3

Slide 3 text

WordPress マニュアル Codex 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 3 https://codex.wordpress.org/Administration_Screens

Slide 4

Slide 4 text

もうすぐリタイヤ予定 • 2017年中? • 主な移行先 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 4 Codex 移行先 構文、関数、クラス etc. Code Reference 使い方、FAQ HelpHub 開発者向け 各種ハンドブック

Slide 5

Slide 5 text

鋭意、制作中 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 5 https://developer.wordpress.org

Slide 6

Slide 6 text

求人、募集中 • 募集一覧 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 6 お仕事 備考 HelpHub - コンテンツ移行 Codex からのコピー& ペースト [募集終了] - コンテンツリライト 募集中 - テーマ制作、修正 急募 Theme Handbook - ライター、レビューア 急募

Slide 7

Slide 7 text

• 我こそはと思わん方、是非 => 募集案内のリンク HelpHub の例 - 道まだ半ば 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 7 http://wphelphub.com/getting-started/administration-screens/

Slide 8

Slide 8 text

ただしこれは英語版の話し • 英語版 Codex は消える予定 – 2017年中は元のページから HelpHub 等に転送される • 国際化の方針は未定 • それまで各国語版 Codex は残る予定 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 8

Slide 9

Slide 9 text

でも、HelpHub のページには、 日本語版 Codex へのリンクがない! 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 9

Slide 10

Slide 10 text

Documentation Lead Jon との会話 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 10 国際化が遅れるのはわかりました。 では、せめて各国語版の Codex リンクはつ けてください。お願いします。 OK。じゃあショートコードで作って。 Issue 投げとく。 ... あ、はい...。 (ショートコード書いたことないけど...)

Slide 11

Slide 11 text

Codex の言語リンク • ソースコード (MediaWiki) 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 11 {{Languages| {{en|Administration Screens}} {{fr|Panneaux Administration}} {{hr|Administracijski Zasloni}} {{ja|管理画面}} {{pt-br|Painel de Administração}} {{ru|Административные панели}} {{th|Administration Panels}} {{zh-cn|管理页面}} {{ko|Administration Panels}} }}

Slide 12

Slide 12 text

そのショートコード版を考える • 仕様 Version 1.0 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 12 [codex_languages en="Administration Screens" ja="管理画面" fr="Panneaux Administration" ...]

Slide 13

Slide 13 text

ショートコード版 Version 0.1 • はじめの一歩: add_shortcode 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 13 // functions.php 追加 function codex_languages_func() { return 'Languages'; } add_shortcode( 'codex_languages', 'codex_languages_func' ); 投稿内 [codex_languages]

Slide 14

Slide 14 text

ショートコード版 Version 0.2 • 引数サポート: shortcode_atts 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 14 // functions.php 追加 function codex_languages_func( $atts ) { extract( shortcode_atts( array( ‘en' => '', 'ja' => '', 'fr' => '' ), $atts ) ); return “Languages: $en - $ja - $fr”; } add_shortcode( 'codex_languages', 'codex_languages_func' ); 投稿内 [codex_languages en="Administration Screens" ja="管理画面" fr="Panneaux Administration"]

Slide 15

Slide 15 text

ショートコード版 Version 0.3 • 51か国分の処理挿入 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 15 ... static $lang_table = array( array("Arabic", "ةيبرعلا","ar",https://codex.wordpress.org/ar:%1s), array("Azerbaijani", "Azərbaycanca","azr","https://codex.wordpress.org/azr:%1s"), array("Azeri", " یرذآ " , " azb","https://codex.wordpress.org/azb:%1s"), array("Bulgarian", "Български","bg","https://codex.wordpress.org/bg:%1s"), array("Bengali", "বাাংলা","bn","https://codex.wordpress.org/bn:%1s"), : array("Japanese", "日本語","ja","http://wpdocs.sourceforge.jp/%1s"), ... ); $shortcode_params = array(); foreach( $lang_table as $lang) { $shortcode_params[ $lang[2] ] = null; } $args = shortcode_atts( $shortcode_params, $atts ); $i = 0; foreach ($args as $key => $value) { if ($value != null) { $str .= sprintf( ' • ' . $lang_table[$i][1] . '', $value ); } $i++; } ...

Slide 16

Slide 16 text

ショートコード版 Version 1.0 • とりあえず完成 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 16 // functions.php function codex_languages_func( $atts ) { static $lang_table = array( array("Arabic", " ةيبرعلا " , " ar_codex","https://codex.wordpress.org/ar:%1s"), array("Azerbaijani", "Azərbaycanca","azr_codex","https://codex.wordpress.org/azr:%1s"), : array("Kannada", "ಕನ್ನ ಡ","kn_codex","https://codex.wordpress.org/kn:%1s")); $shortcode_params = array(); foreach( $lang_table as $lang) { $shortcode_params[ $lang[2] ] = null; } $args = shortcode_atts( $shortcode_params, $atts ); $i = 0; $str = '"; return $str; } add_shortcode( 'codex_languages', 'codex_languages_func' );

Slide 17

Slide 17 text

リファクタリング • ファイルの移動 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 17 // functions.php 追加 require get_template_directory() . '/inc/codex-languages.php'; // inc/codex-languages.php ショートコード本体 function codex_languages_func( $atts ) { : : // style.css 追加 .entry-content .language-links { border:1px solid #ccc; }

Slide 18

Slide 18 text

テスト • ショートコードに「-」(ハイフン)が含まれると挙動がお かしい。 • 以下の言語はハイフンを除く指定方法に(例:ptbr) – pt-br – zh-cn – zh-tw 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 18 投稿内 [codex_languages ja="管理画面" pt-br="Painel de Administração"

Slide 19

Slide 19 text

仕様 Version 2.0 • HelpHub 国際版が出た際には、移行中に新旧リ ンクが混ざるはず • 「ja」「fr」等の短い名称はHelpHub用にしたい 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 19 [codex_languages en="Administration Screens" ja_codex="管理画面" fr_codex="Panneaux Administration" ...]

Slide 20

Slide 20 text

ショートコード版 Version 2.0 • 完成 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 20 // inc/codex-languages.php function codex_languages_func( $atts ) { static $lang_table = array( array("Arabic", " ةيبرعلا " , " ar_codex","https://codex.wordpress.org/ar:%1s"), array("Azerbaijani", "Azərbaycanca","azr_codex","https://codex.wordpress.org/azr:%1s"), : array("Kannada", "ಕನ್ನ ಡ","kn_codex","https://codex.wordpress.org/kn:%1s")); $shortcode_params = array(); foreach( $lang_table as $lang) { $shortcode_params[ $lang[2] ] = null; } $args = shortcode_atts( $shortcode_params, $atts ); $i = 0; $str = '"; return $str; } add_shortcode( 'codex_languages', 'codex_languages_func' );

Slide 21

Slide 21 text

Documentation Lead Jon との会話 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 21 できました! functions.php 変更しないでよ。 プラグインにしてね。よろしく。 ... あ、はい...。 (プラグイン書いたことないけど...)

Slide 22

Slide 22 text

買った 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 22

Slide 23

Slide 23 text

プラグイン版 Version 0.1 • はじめの一歩: Plugin Name 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 23 // helphub-codex-languages/helphub-codex-languages.php

Slide 24

Slide 24 text

プラグイン版 Version 0.2 • CSS の読み込み: wp_enqueue_style 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 24 // helphub-codex-languages/helphub-codex-languages.php 内 function codex_languages_func( $atts ) { wp_enqueue_style( 'helphub-codex-languages-style', plugin_dir_url( __FILE__ ) . 'css/codex-languages.css', array(), '1.0.0' ); // helphub-codex-languages/css/codex-languages.css 内 .entry-content .language-links { border:1px solid #ccc; }

Slide 25

Slide 25 text

プラグイン版 Version 1.0 • 完成 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 25 // helphub-codex-languages/helphub-codex-languages.php function codex_languages_func( $atts ) { wp_enqueue_style( 'helphub-codex-languages-style', plugin_dir_url( __FILE__ ) . 'assets/css/codex-languages.css', array(), '1.0.0' ); static $lang_table = array( array("Arabic", " ةيبرعلا " , " ar_codex","https://codex.wordpress.org/ar:%1s"), array("Azerbaijani", "Azərbaycanca","azr_codex","https://codex.wordpress.org/azr:%1s"), : array("Kannada", "ಕನ್ನ ಡ","kn_codex","https://codex.wordpress.org/kn:%1s")); $shortcode_params = array(); foreach( $lang_table as $lang) { $shortcode_params[ $lang[2] ] = null; } $args = shortcode_atts( $shortcode_params, $atts ); $i = 0; $str = '"; return $str; } add_shortcode( 'codex_languages', 'codex_languages_func' );

Slide 26

Slide 26 text

Documentation Lead Jon との会話 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 26 できました! クラスにしてよ。よろしく。 ... あ、はい...。

Slide 27

Slide 27 text

プラグインのクラス版 Version 0.1 • はじめの一歩: add_shortcode の第2引数 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 27 // helphub-codex-languages/helphub-codex-languages.php 内 $helphub_codex_languages = new HelpHub_Codex_Languages(); final class HelpHub_Codex_Languages { public function __construct () { add_shortcode( 'codex_languages', array ( $this, 'codex_languages_func' ) ); } public function codex_languages_func( $atts ) { : } }

Slide 28

Slide 28 text

プラグインのクラス版 Version 0.2 • シングルトン = 1つのインスタンスだけ作成を許す 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 28 // helphub-codex-languages/helphub-codex-languages.php 内 final class HelpHub_Codex_Languages { private static $_instance = null; public static function instance () { if ( is_null( self::$_instance ) ) self::$_instance = new self(); return self::$_instance; } }

Slide 29

Slide 29 text

プラグインのクラス版 Version 0.2 • インスタンス生成のタイミング: plugins_loaded 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 29 // helphub-codex-languages/helphub-codex-languages.php 内 // 削除 $helphub_codex_languages = new HelpHub_Codex_Languages(); function HelpHub_Codex_Languages() { return HelpHub_Codex_Languages::instance(); } add_action( 'plugins_loaded', 'HelpHub_Codex_Languages' );

Slide 30

Slide 30 text

プラグインのクラス版 Version 0.3 • インストーラ対応 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 30 // helphub-codex-languages/helphub-codex-languages.php 内 final class HelpHub_Codex_Languages { public function __construct () { $this->token = 'helphub'; $this->plugin_url = plugin_dir_url( __FILE__ ); $this->version = '1.0.0'; register_activation_hook( __FILE__, array( $this, 'install' ) ); } public function install () { update_option( $this->token . '-version', $this->version ); } }

Slide 31

Slide 31 text

プラグインのクラス版 Version 0.4 • テキストドメイン 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 31 // helphub-codex-languages/helphub-codex-languages.php 内 final class HelpHub_Codex_Languages { public function __construct () { add_action( 'init', array( $this, 'load_plugin_textdomain' ) ); } public function load_plugin_textdomain() { load_plugin_textdomain( $this->tokoen, false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' ); } }

Slide 32

Slide 32 text

プラグインのクラス版 Version 0.5 • 保護 (調査中...) 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 32 // helphub-codex-languages/helphub-codex-languages.php 内 if ( ! defined( 'ABSPATH' ) ) exit; final class HelpHub_Codex_Languages { public function __clone () { _doing_it_wrong( __FUNCTION__, __( 'Cheatin’ huh?' ), '1.0.0' ); } public function __wakeup () { _doing_it_wrong( __FUNCTION__, __( 'Cheatin’ huh?' ), '1.0.0' ); } }

Slide 33

Slide 33 text

プラグインのクラス版 Version 1.0 • 完成 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 33 // helphub-codex-languages/helphub-codex-languages.php

Slide 34

Slide 34 text

HelpHub で有効化 • 出た! 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 34

Slide 35

Slide 35 text

Documentation Lead Jon との会話 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 35 できました! OK。おつかれー。 で、結局、今の Codex の言語リンクを どんな形に変換すればいいんだっけ? こんな感じ。

Slide 36

Slide 36 text

※ HelpHub は人手で移行しています。 • Codex • HelpHub 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 36 [codex_languages en="Administration Screens" fr_codex="Panneaux Administration" hr_codex="Administracijski Zasloni" ja_codex="管理画面 " ptbr_codex="Painel de Administração" ru_codex="Административные панели" th_codex="Administration Panels" zhcn_codex="管理页面" ko_codex="Administration Panels"] {{Languages| {{en|Administration Screens}} {{fr|Panneaux Administration}} {{hr|Administracijski Zasloni}} {{ja|管理画面}} {{pt-br|Painel de Administração}} {{ru|Административные панели}} {{th|Administration Panels}} {{zh-cn|管理页面}} {{ko|Administration Panels}} }}

Slide 37

Slide 37 text

Documentation Lead Jon との会話 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 37 ...。 ...。 ... あ、はい...。

Slide 38

Slide 38 text

MedaiWiki/HelpHub コンバーター作成 • 左にコードを貼って、ボタンを押すと、変換 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 38 http://unofficialtokyo.com/codex-converter/

Slide 39

Slide 39 text

Documentation Lead Jon との会話 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 39 できました! OK。おつかれー。 ... あ、はい...。 ところでさ、Theme Handbook の執筆で 人でが足らないんだけど、やらない?

Slide 40

Slide 40 text

まとめ • Codex は移行中 – 絶賛、コントリビュータ募集中 • 言語リンクを作成 – ショートコード – プラグイン – クラス化 • Codex(MediaWiki) -> HelpHub コンバーター も作成 • 最後に、Jon はとても優しい人なので念のため。 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 40

Slide 41

Slide 41 text

ありがとうございました • GitHub – HelpHub Codex Languages – https://github.com/atachibana/helphub-codex- languages/ – Codex Converter – https://github.com/atachibana/codex-converter 2016/12/10 Contribute Study - Making of HelpHub Language Selector Plugin by Akira Tachibana 41