$30 off During Our Annual Pro Sale. View Details »

WordPress 新マニュアル「HelpHub」の言語リンク用プラグイン作成顛末 - Making of HelpHub Language Selector Plugin

WordPress 新マニュアル「HelpHub」の言語リンク用プラグイン作成顛末 - Making of HelpHub Language Selector Plugin

2016年12月10日 WordPressコントリビュート勉強会 第5回 in タロスカイ (株) ショートセッション用資料 2016/12/11 更新

Akira Tachibana

December 10, 2016
Tweet

More Decks by Akira Tachibana

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  11. 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}}
    }}

    View Slide

  12. そのショートコード版を考える
    • 仕様 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" ...]
    Languages:
    English -

    本語 -
    Français ...

    View Slide

  13. ショートコード版 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]

    View Slide

  14. ショートコード版 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"]

    View Slide

  15. ショートコード版 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++;
    }
    ...

    View Slide

  16. ショートコード版 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 = 'class="mw-redirect">Languages: English';
    foreach ($args as $key => $value) {
    if ($value != null) {
    $str .= sprintf( ' • ' . $lang_table[$i][1] . '', $value );
    }
    $i++;
    }
    $str .= "";
    return $str;
    }
    add_shortcode( 'codex_languages', 'codex_languages_func' );

    View Slide

  17. リファクタリング
    • ファイルの移動
    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;
    }

    View Slide

  18. テスト
    • ショートコードに「-」(ハイフン)が含まれると挙動がお
    かしい。
    • 以下の言語はハイフンを除く指定方法に(例: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"

    View Slide

  19. 仕様 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" ...]

    View Slide

  20. ショートコード版 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 = 'class="mw-redirect">Languages: English';
    foreach ($args as $key => $value) {
    if ($value != null) {
    $str .= sprintf( ' • ' . $lang_table[$i][1] . '', $value );
    }
    $i++;
    }
    $str .= "";
    return $str;
    }
    add_shortcode( 'codex_languages', 'codex_languages_func' );

    View Slide

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

    View Slide

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

    View Slide

  23. プラグイン版 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
    /**
    * Plugin Name: Helphub Codex Languages
    * Plugin URI: http://www.wordpress.org
    * Description: Short code to link codex translated articles from
    HelpHub
    * Version: 1.0.0
    * Author: Akira Tachibana
    :
    */
    function codex_languages_func() {
    return 'Languages';
    }
    add_shortcode( 'codex_languages', 'codex_languages_func' );
    ?>

    View Slide

  24. プラグイン版 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;
    }

    View Slide

  25. プラグイン版 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 = 'class="mw-redirect">Languages: English';
    foreach ($args as $key => $value) {
    if ($value != null) {
    $str .= sprintf( ' • ' . $lang_table[$i][1] . '', $value );
    }
    $i++;
    }
    $str .= "";
    return $str;
    }
    add_shortcode( 'codex_languages', 'codex_languages_func' );

    View Slide

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

    View Slide

  27. プラグインのクラス版 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 ) {
    :
    }
    }

    View Slide

  28. プラグインのクラス版 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;
    }
    }

    View Slide

  29. プラグインのクラス版 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' );

    View Slide

  30. プラグインのクラス版 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 );
    }
    }

    View Slide

  31. プラグインのクラス版 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/' );
    }
    }

    View Slide

  32. プラグインのクラス版 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' );
    }
    }

    View Slide

  33. プラグインのクラス版 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
    /**
    * Plugin Name: Helphub Codex Languages
    * Plugin URI: http://www.wordpress.org
    * Description: Short code to link codex translated articles from HelpHub
    * Version: 1.0.0
    * Author: Akira Tachibana
    * Author URI: http://www.helphubcommunications.com/
    * Requires at least: 4.0.0
    * Tested up to: 4.0.0
    *
    * Text Domain: helphub
    * Domain Path: /languages/
    *
    * @package HelpHub_Codex_Languages
    * @category Core
    * @author Akira Tachibana
    */
    if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
    /**
    * Returns the main instance of HelpHub_Codex_Languages to prevent the need to
    * use globals.
    *
    * @since 1.0.0
    * @return object HelpHub_Codex_Languages
    */
    function HelpHub_Codex_Languages() { ...

    View Slide

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

    View Slide

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

    View Slide

  36. ※ 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}}
    }}

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  41. ありがとうございました
    • 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

    View Slide