OSC 北海道 2017 baserCMS & WordPress セミナー・ブース出展

7/13, 14に開催されましたオープンソースカンファレンス 2017 北海道にて、baserCMS & WordPress セミナー・ブース出展を行ってきました。

お越しになられた皆様、ご協力いただきました皆様、OSC スタッフの皆様、ありがとうございました!

セミナーで使いましたスライドをこちらに公開いたします。

15万ダウンロード達成!国産 CMS である baserCMS の紹介

baserCMS のほうは、CMS が初めての方、まだ baserCMS をご存じない方向けに特徴を紹介するセミナーとさせていただきました。

WordPress REST API と Vue.js を使ったフロントエンド開発

WordPress と JavaScript は既に経験がある方が多くいらっしゃいますので、Vue.js との組み合わせや利点の部分をサンプルサイドとソースコードベースに解説しています。

解説で使いましたサンプルサイトは以下のような動きになっています。

時間の関係でかなり早く進めてしまいました(すいません…)ので、ゆっくりスライドでみていただければと思います。 省略しないソースコード全体は github にコミットしました。

https://github.com/h1romas4/wp-vuejs-sample

baseCMS & WordPress ブース展示

OSC 大懇親会でもお話がありましたが、今年は学生さんの参加が多くありみなさん熱心にブースで内容を聞かれていきましたので嬉しかったです。

ちょうど baser と WP の 2ブースをやっていましたので、CMS とはどういったものか、それぞれどのような特徴があるのかを実際に動かしてお話させていただきました。

WordBench 札幌(WordPress)のブースには yuriko さんからお送りいただいた、スクロールワプーが登場。こちらに興味を持たれてブースに立ち寄られた方も多くいらっしゃいましたので、baserCMS & WP 公式キャラの経緯などをお話することができました。:)

というわけで数えてみたところ OSC 北海道の出展は 2010 年からなので 8回目となっていました。引き続き 10回連続出場を目指してがんばります。やってみたい!という方がいらっしゃればいつでもお声がけください!よぼよぼ。

Visual Studio Code の PHP 言語サポート vscode-php-intellisense

Visual Studio Code Advent Calendar 2016 の 12日目です!

ここのところずっとウォッチしていました、Visual Studio Code(vscode)で利用可能な PHP サポート拡張になります “vscode-php-intellisense” が完成度をあげ、かなり良い感じになっています。 🙂

https://github.com/felixfbecker/vscode-php-intellisense

Advanced PHP IntelliSense for Visual Studio Code. In opposite to the included PHP IntelliSense and other PHP extensions, this uses an AST to parse the source code instead of relying on naive regular expression parsing.

少し前まで PHP をかくときは、Eclipse の PHP Developer Tools を使っていましたが、vscode-php-intellisense がほぼ同様の機能を実装しましたので、検証しながら乗り換えをしております。

以下、vscode-php-intellisense で WordPress を読ませて動作させている様子です。(サイトの横幅の関係でスクリーンキャストがつぶれてしまいましたので、見づらい場合は画像をクリックしてフルサイズでご覧ください)

まずはエラーチェック。構文間違えなどをリアルタイムに指摘してくれます。

error

定義ジャンプ。PHPDoc が表示でき、関数・メソッドの定義位置に F12 でジャンプします。これがないと困ります 🙂

jump

「定義をここに表示」と「参照先検索」機能。「ここに表示」はインラインで関数定義の内容をぱらっとみるとき便利です。また、PHP は動的型付け言語なので完全ではありませんが、呼び出し元検索があるのは嬉しい部分です。

ref

最後は入力補完。 PHP の標準関数を補完しています。 PHPDoc を表示しながら、引数が入力できます。

comp

ユーザ定義関数の補完も現在 master ブランチでは可能になっています。 コメントアノテーションもみて、参照を解決しているのが分かります。

https://github.com/felixfbecker/php-language-server/pull/165

comp2

Ecipse PDT や PHPStorm 並の機能です。すごい。

このペースでいきますと、おそらく年内にはユーザ定義関数の補完も実装が完了し使える形になると思います。つまりは、WordPress や baserCMS のテンプレートタグの補完が可能になります。 😀

ユーザ定義関数補完以外は既に動作するものが Marketplase にリリースされていますので、まずは導入してアップデートを楽しみに待ちましょう。 🙂

https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-intellisense

Advanced PHP IntelliSense for Visual Studio Code.
In opposite to the included PHP IntelliSense and other PHP extensions, this uses an AST to parse the source code
instead of relying on naive regular expression parsing.

その他の機能のスクリーンキャストは以下で見ることができます。(ぼくのへたなアニメよりずっと分かりやすいのでぜひご覧ください…)

https://github.com/felixfbecker/vscode-php-intellisense

さて、この拡張は同じ作者の方がかかれている PHP 7 で実装された php-language-server を利用して動作しています。(このため、拡張を動作させるには vscode を動かすマシンに PHP 7 が導入され、パスが通っている必要があります)

この親となっている php-language-server ですが、これは Microsoft Language Server Protocol の実装です。

Language Server Protocol は、エディタ(IDE)と言語解析器をつなぐための共通プロトコルですので、今後 php-language-server は vscode 以外のテキストエディタと接続できる可能性があります。 (既に Eclipse Che が PHP サポートの実装に php-language-server を使っています)

逆に Visual Studio Code から見た場合、新しく追加された言語サーバーに接続することで、どんどん対応言語を増やすことができる仕組みです。(現在 vscode は Language Server Protocol クライアントのリファレンス実装のような形になっています)

vscode と Language Server Protocol を使って対応されている言語の一覧は以下で見ることができます。

https://github.com/Microsoft/language-server-protocol/wiki/Protocol-Implementations

Language Maintainer Repository
PowerShell MS VS Code PowerShell extension
C++ MS VS Code C++ extension
C# OmniSharp Many integrations, repository
JSON MS Bundled with VS Code
CSS/LESS/SASS MS Bundled with VS Code
Xtext language framework Eclipse Eclipse Xtext
Crane PHP HvyIndustries VS Code Extension
PHP Felix Becker php-language-server
Haxe Dan Korostelev (@nadako) VS Code Haxe extension
Java (javac) @georgewfraser Javac based Java support
RAML RAML Workgroup raml-language-server Work in Progress
API Elements Vincenzo Chianese(@XVincentX) vscode-apielements
groovy Palantir groovy-language-server
Java (Eclipse) Eclipse, RedHat java-language-server, becoming Eclipse JDTLS
OCaml/Reason freebroccolo ocaml-language-server
Go Sourcegraph sourcegraph-go
Rust Jonathan Turner rustls
Scala Iulian Dragos dragos-vscode-scala
Polymer Polymer Team polymer-editor-service

まだまだ未完成のものもありますが、PowerShell などは完成形になっていてかなり使いやすいです。 標準の PowerShell ISE より良いかも?

というわけで、このような言語サポートも手伝って Visual Studio Code は愛用のエディタになりました。開発も活発なので今後も楽しみです。 😀

OSC 北海道 2016 baserCMS & WordPress セミナー・ブース出展

2016/6/18(土)に開催されました「OSC 北海道 2016(2日目)」で、WordPress & baserCMS セミナー・ブース出展を行いました。

お越しになってくださいった方、本当にありがとうございました!

baserCMS セミナー & ブース出展

baserCMS セミナーでは「コーポレートサイトにちょうどいい、国産 CMS 「baserCMS」の紹介」ということで、baserCMS の紹介をさせていただきました。

baserCMS 4.0 開発系のデモも江頭さんのご協力のもとすることができ、興味を持っていただいた方も多かったと思います。

セミナー直前にデモサイトが壊れるという、びっくりアクシデントがありましたが、セミナー中に江頭さんがなんとかしてくれ、最後は江頭さんによる詳細な解説もしていただきました。 ありがとうございました!

ブースにて江頭さん。WP のタトゥーとは 🙂

13467683_1167016726683780_360936745_o

福岡より、上田さん、はまちさんも来ていただき、ブースも盛況でした。 楽しかったです、ありがとうございました!

WordPress セミナー & ブース出展

WordBench セミナーでは「REST API を活用した、新しい WordPress サイト製作手法」を解説しました。

最近、REST を使ったサイトも増えてきていますので、活用していただければと思ってスライドをつくりました。

13467514_1167016766683776_1331953622_o

baserCMS と SaCSS(sapporo.css) の真ん中ブースでした。(写真右、コモモ氏による、お手製べっしーにも注目ですw

13487363_1167016833350436_1735057596_n

大懇親会

終了後の大懇親会にて SaCSS ハムさんとぱちり。 セミナー2本やりましたゆえ、疲労が色濃くでております(笑

13480142_1167016536683799_2104078938_n

ということで、OSC 北海道スタッフ、関係者のみなさまお疲れ様でした! 重ねまして来てくださった方、お話させていただいたかたありがとうございました。

今後ともよろしくお願いいたします!

統合環境で baserCMS のテンプレートで使える関数を補完する

baserCMS のテーマをつくっていると、関数の補完機能がほしくなってきます。

というわけで、Eclispe や PHPStorm などの統合環境を使っていれば、簡単な定義をするだけで補完が効くようになりますのでできますので紹介したいと思います。(NetBeans には NetBeans baserCMS support があります!)

補完というのは、オートコンプリート、インテリセンス、いわゆるこれです。

autocomp

使える関数(メソッド)が自動ででてくるあれですね。 🙂

何もせずとも補完ができると良いのですが、PHP などの動的型付け言語は、プログラムの形が実行時まで決定しないため統合環境がうまくソースコードを解析できず補完できないパターンがあり、baserCMS のテーマ・テンプレートもこの条件に当てはまります。

以下は、baserCMS の Blog/index.php テンプレートですが、ここででてくる $this がどこの this であるかわからないため、統合環境が適切に補完を出すことができません。

<?php
/**
 * ブログトップ
 */
$this->BcBaser->css('admin/colorbox/colorbox', array('inline' => false));
$this->BcBaser->js('admin/jquery.colorbox-min-1.4.5', false);
$this->BcBaser->setDescription($this->Blog->getDescription());

というわけで、これを解決してあげるために統合環境に this を教えてあげます。

ファイル先頭などに @var コメントアノテーション行を追加し $this が AppView であることを明示します。(テーマ・テンプレートファイル全てに入れればよいです)

<?php /* @var $this AppView */ ?>
<?php
/**
 * ブログトップ
 */
$this->BcBaser->css('admin/colorbox/colorbox', array('inline' => false));
$this->BcBaser->js('admin/jquery.colorbox-min-1.4.5', false);
$this->BcBaser->setDescription($this->Blog->getDescription());
?>

これで $this が何者であるか統合環境が理解できるようになったのですが、こんどは $this->BcBaser の BcBaser が AppView のソースコード中に存在しないため、まだ setDescription などの関数の補完ができません。これは Helper オブジェクトが実行時に動的にインジェクションされ、ソースコードだけではプログラムの形がわからないためです。

というわけで、AppView にコメントをいれてあげます。幸い、baserCMS は lib/AppView.php のオーバーライドが app/View で可能ですので、app/View/AppView.php にコピーして以下のコメントを追加してあげます。(使わないものも含めてありったけ入れてしまいましたが…)

/**
 * View 拡張クラス
 *
 * @package			Baser.View
 * @property BcAdminHelper $BcAdmin
 * @property BcAppHelper $BcApp
 * @property BcArrayHelper $BcArray
 * @property BcBaserHelper $BcBaser
 * @property BcCacheHelper $BcCache
 * @property BcCkeditorHelper $BcCkeditor
 * @property BcCsvHelper $BcCsv
 * @property BcFormHelper $BcForm
 * @property BcFreezeHelper $BcFreeze
 * @property BcGooglemapsHelper $BcGooglemaps
 * @property BcHtmlHelper $BcHtml
 * @property BcMobileHelper $BcMobile
 * @property BcPageHelper $BcPage
 * @property BcSmartphoneHelper $BcSmartphone
 * @property BcTextHelper $BcText
 * @property BcTimeHelper $BcTime
 * @property BcUploadHelper $BcUpload
 * @property BcXmlHelper $BcXml
 */
class AppView extends BcAppView {
	
}

これでテーマ・テンプレートから補完ができるようになりました。 😀

Eclipse PHP for Developer の例。

baser-eclipse

PHPStorm の例。

baser-phpstome

両 IDE ともに AppView が複数存在していても、コメントをマージしてくれるようですので、ヘルパーが存在するプラグインでは (PluginDir)/View/AppView.php にコメントかいておけば補完を出すことができます。

同じ要領で、プラグインの Controler でも、基底クラスなどにコメントをかいておけば、インジェクションされてくるモデルも補完できます。(baserCart テーマでやってますのでご参考まで)

<?php
App::uses('BcPluginAppController', 'Controller');

/**
 * CartAppController
 * 
 * @property CartConfig $CartConfig
 * @property CartItem $CartItem
 * @property CartItemTag $CartItemTag
 * @property CartOrder $CartOrder
 * @property CartOrderDetail $CartOrderDetail
 * @property BcAuth $BcAuth
 * @property Session $Session
 * @author hiromasa
 */
class CartAppController extends BcPluginAppController {

ちなみに、WordPress はテンプレートタグ(関数)がグローバル空間に存在しますので、Eclipse、PHPStorm ともに何もしなくても補完がでます。

加えて、functions.php などでたとえば global $wpdb なんてグローバル変数経由のインスタンスを使う場合は、@var を使って以下のようにすると補完できます。

/* @var $wpdb wpdb */

wordpress-eclipse

てなわけで補完がきくときかないのでは、ずいぶん開発効率が違うと思いますので、良ければお試しください。 🙂

オープンソースカンファレンス北海道 2014 WordPress & baserCMS セミナー

2014/6/21(土) に開催されたオープンソースカンファレンス北海道にて、WordPress と baserCMS のセミナー & ブース出展を行ってきました!

oscdo-2014-04

今年はSaCSS(sapporo.css)ブースも加わり、メンバーのみなさまのご協力のもと、無事終了することが出来ました。ありがとうございました。

baserCMS ブースには、福岡より海老庵さんも! baser に興味を持っていただいた方の質問にたくさん答えてくださいました。(さすが)

マリメロちゃん製作のわぷーと、コモモさん製作のべっしーのかぶりものにより、いつにもましてブースも華やか(!?)に。 OSC らしい演出で良かったです。 😀

oscdo-2014-00

WordPress セミナー

ショッピングカートのサンプルテーマを使って、カスタムフィールドやカスタム投稿、フィルターフックの使いどころなどを、スクリーンキャストで実際にカーソルを動かしながら紹介しました。

oscdo-2014-01

テーマの名前は wordCart。 実は baserCMS でつくった baserCart を OSC のために WordPress に移植したものです。

wordcart-01 wordcart-02

スクリーンキャストを使っている関係上、スライドだけだと意味不明なので、ここでは fucntions.php のコード断片を紹介しておきます。

商品の入れ物となるカスタム投稿と、カスタム分類の作成。

/**
 * カスタム投稿、カスタム分類タイプを追加.
 */
add_action('init', function () {
    register_taxonomy('item_tag',
        array('item'),
        array(
            'label' => '商品タグ',
            'show_ui' => true,
            'hierarchical' => true,
            'rewrite' => array('slug' => 'item/category', 'with_front' => false)
        )
    );
    register_post_type('item', array(
        'label' => '商品',
        'public' => true,
        'menu_position' => 5,
        'supports' => array(
            'title', 'editor', 'thumbnail', 'custom-fields'),
        'has_archive' => true,
        'rewrite' => array('slug' => 'item', 'with_front' => false)
    ));
});

商品に添付されたメディア(画像)をテンプレートファイルから取得する関数。

/**
 * 記事に添付された画像を取得.
 */
function the_images() {
    $images = get_children(array(
            'post_parent' => get_the_ID(),
            'post_type' => 'attachment',
            'post_mime_type' => 'image',
            'order' => 'ASC'));
    $img = array();
    foreach(array_keys($images) as $key) {
        array_push($img, wp_get_attachment_image($key, 'full'));
    }
    return array_reverse($img);
}

投稿ページを固定ページに割り当て、フロントページにカスタム投稿のアーカイブを出力するための pre_get_posts フィルターフック。

/**
 * フロントページに商品の一覧を表示.
 */
add_filter('pre_get_posts', function($wp_query) {
    // 管理画面かメインループではなかったら何もしない
    if(is_admin() || !$wp_query->is_main_query()) {
        return;
    }
    // フロントページなら投稿タイプ・商品を表示
    if($wp_query->is_home() && $wp_query->get('pagename') == '') {
        $wp_query->set('post_type', 'item');
    }
});

フロントページでカスタム分類アーカイブと同じテンプレートファイル(taxonomy.php)を使うために、選択されるテンプレートファイルを変更するための template_include フィルターフック。

/**
 * フロントページのテンプレートファイルは taxonomy.php.
 */
add_filter('template_include', function($template) {
    global $wp_query;
    if($wp_query->is_home() && $wp_query->get('pagename') == '') {
        return get_taxonomy_template();
    }
    return $template;
});

各商品の下に Trust Form プラグインで作成したフォームを配置するための、the_content フィルターフック。

/**
 * カスタム投稿・商品の時は注文フォームを記事の下に付与する.
 */
add_filter('the_content', function($content) {
    if(get_post_type() == 'item') {
        return $content . '<hr />[trust-form id=10]';
    }
    return $content;
}, 0);

今年は少し製作よりの内容とさせていただいたのですが、セミナーで伺ってみたところ、来られた方の半数以上 WordPress 製作を行われている方とのことで、実際にサイトを作る際のヒントになりましたら嬉しく思います。

baserCMS セミナー

baserCMS セミナーでは、スライドとスクリーンキャストで baserCMS の特徴を説明させていただきました。

スクリーンキャストなしだと短いですが、端的に baser の特徴が分かると思いますので、よければご覧ください。(スライドシェアにアップロードしたら、すごいフォントになったですが、ノリでご覧ください。。)

前日までの数十時間におよぶ準備や、WordPress から2コマ連続セミナーだったのもあり、途中から放心にて事前録画のスクリーンキャストの内容を忘れてしまい、ぐだぐだになってすいません。。セミナー後に途中からしにそうになっていたと聞きました。。

それでもセミナー後にブースにいくつも質問をいただいたり、アンケートで面白かったと書いてくださった方がいてくれたりで嬉しかったです! ありがとうございました。

OSC北海道 2014 大懇親会

終了後の大懇親会は、アサヒビール園にてジンギスカンパーティー 😀

oscdo-2014-02

後ろにいるのは…!!w

OSC運営スタッフのみなさま、お疲れ様でした!

翌日

OSC北海道の翌日は、海老庵さん、モリコ、マリメロ、コモモで美瑛・富良野観光へ。 🙂

oscdo-2014-03

ジェットコースターロードすごい。

来年のOSCも楽しみです。

WordOnsen Sapporo 2014 と pre_get_posts による記事のソート処理

5/17 〜 5/18 に WordOnsen Sapporo 2014 が開催されました。定山渓温泉にてゆったり WordPress の勉強会という企画であります。 🙂

sacss_wordOnsen_560160

セミナー講師を担当させていただきましたが、温泉ということでいつもの SaCSS の勉強会と趣を変えようかと、モニターにコードを映しながら、お題を「functions.php を使い、pre_get_posts フックを用いてカスタム投稿をソートする」と決めてライブコーディングする形式でしゃべらせて頂きました。

134_large

東京から来られましたまがりん様に相談しながら、ライブコーディングしていたら夢中になってしまい、気がついたら 90分も演っていたということで、すいませんすいません。。(←本人はとても楽しかったらしい…

ということで、申し訳ないので、このブログにてソースなどまとめてみたいと思います。 お役立ていただけたらと思います。

functions.php について

  • functions.php は WordPress の初期化後すぐに評価されるテーマ内のファイル。
  • functions.php にフックの追加処理を記述しておくことにより、WordPress 初期化後に実行されるメイン処理の挙動をテーマから変更することができる。
  • WordPress には処理の変更が行えるように、たくさんのフックが定義されている。
  • 今回はテンプレートファイルのループで出力される記事の抽出条件を変えることができる pre_get_posts フックを活用して、カスタムフィールドの値で記事の順番をソートすることをお題としました。

フィルターフックの基本形

add_filterに関数名(ここでは change_query)を設定する。

function change_query($query) {
    $query->set('posts_per_page', 1);
}

add_filter('pre_get_posts', 'change_query');

PHP 5.3 以降では無名関数が利用でき、フックが関数定義なしでかけるので、直感的で便利。(以下のコードはこの形式でかきます)

add_filter('pre_get_posts', function($query) {
    $query->set('posts_per_page', 1);
});

pre_get_posts フィルターフックによるメインクエリー改変

pre_get_posts フックから渡されてくる引数($queryオブジェクト)に set メソッドでパラメータを上書き設定すると記事の抽出条件が変更ができる。

例えば posts_per_page パラメータには出力する記事数が設定できる。

add_filter('pre_get_posts', function($query) {
    // var_dump($query);
    $query->set('posts_per_page', 1);
});

存在するパラメータは Codex の WP_Query をみるか、var_dump($query); をすると知ることができる。

pre_get_posts で改変できるクエリーは、サイト上の表示だけでなく WordPress の管理画面の一覧表示などでも使われるため、テンプレートファイルからのメインクエリー出力時のみ変更するように、次のような if で条件を絞る。

add_filter('pre_get_posts', function($query) {
    if(!is_admin() && $query->is_main_query()) {
        $query->set('posts_per_page', 1);
    }
});

pre_get_posts を使ったカスタムフィールド値でのソート処理

サイト上に配置された「昇順」「降順」などのリンククリックから、記事をカスタムフィールドに設定された値でソートを行う。例えば、カスタムフィールド PRICE に設定された値段で、商品の表示順をソートする場合。

商品を登録するカスタム投稿(post_menu)を定義。

add_action('init', function() {
    register_post_type('post_menu', array(
        // 管理画面ラベル名
        'label' => '商品',
        'public' => true,
        'supports' => array(
            'title', 'editor', 'thumbnail', 'custom-fields'
        ),
    ))
});

「昇順」「降順」のリンクとアーカイブページを作成するため、カスタム分類(sort)を定義。

add_action('init', function() {
    register_taxonomy('sort',
        // この分類はカスタム投稿 post_menu に属する
        array('post_menu'),
        array(
            // 管理画面ラベル名
            'label' => 'ソート',
            // 管理画面に表示する
            'show_ui' => true,
        )
    );
});

カスタム分類ができたら、「昇順」「降順」という分類を管理画面から登録し、スラッグをそれぞれ asc と desc に設定。(設定後、このカスタム分類は管理画面上に表示しなくてもよいため、show_ui を false にしてもOK)

functions.php でカスタム投稿・分類の設定を行った後は、管理画面から「パーマリンク」を一度ひらいてあげて、設定をリフレッシュしましょう。(←現地でわすれてまがりん様につっこまれる)

サイト上にカスタム分類(sort)のリンクを出力するため、テーマのテンプレートファイルに wp_list_categories テンプレートタグを配置。この分類には記事が属せず、そのままだとリンクが出力されないため、hide_empty を false に設定。(← true にしようとしてまがりん様につっこまれる)

<?php wp_list_categories(array(
    'title_li' => '',
    'taxonomy' => 'sort',
    'hide_empty' => false )); ?>

「昇順」「降順」リンクがサイトに出力されるも、そのままのクエリーだと、単純に分類に属する記事を抽出しようとするので、何もでてこない。

ここで pre_get_posts の出番。クエリーを改変し、「カスタム分類 sort 出力時は、カスタム投稿(post_menu)に属している記事」という条件にまずは変更。$query が持つ条件分岐タグ is_tax でクエリー改変条件を絞り込み。

add_filter('pre_get_posts', function($query) {
    // メインクエリーでカスタム分類 sort 時のクエリーを変更
    if(!is_admin() && $query->is_main_query() && $query->is_tax('sort')) {
        // カスタム投稿 post_menu の記事を抽出対象にする
        $query->set('post_type', 'post_menu');
        // カスタム分類 sort による抽出を削除してしまう
        $query->set('sort', '');
    }
});

この処理で「昇順」「降順」リンクをクリックで表示されるカスタム分類アーカイブページで、商品が日付順で出力されるようになる(まだどちらのリンクも同じ抽出結果)。

カスタムフィールド PRICE によるソート処理を追加。

add_filter('pre_get_posts', function($query) {
    // メインクエリーでカスタム分類 sort 時のクエリーを変更
    if(!is_admin() && $query->is_main_query() && $query->is_tax('sort')) {
        // カスタム投稿 post_menu の記事を抽出対象にする
        $query->set('post_type', 'post_menu');
        // カスタムフィールド PRICE でソートするようにクエリーを設定
        $query->set('meta_key', 'PRICE');
        $query->set('orderby', 'meta_value_num');
        // 押されたリンクにより昇順か降順のソートをクエリーに設定
        if($query->get('sort') == 'asc') {
            $query->set('order', 'ASC');
        } else {
            $query->set('order', 'DESC');
        }
        // カスタム分類 sort による抽出を削除してしまう
        $query->set('sort', '');
    }
});

これにて完成です。 🙂

まとめると、カスタム分類 sort を作成することにより、カスタム分類アーカイブページの URL(クエリー)を WordPress 上に作成し、リンククリック時のクエリーを pre_get_posts により改変しカスタムフィールドでソートするという合わせ技となります。

この方法は、アーカイブページのクエリーに相乗りすることでページネーションも普通に行うことができますので、便利なのではないかと思います。

なお、セミナー中でも少しふれましたが、カスタムフィールドを使ったソートは、WP_Query で対応しているものの、WordPress の実装上、DB インデックスがあたらなかったり、value カラムが varchar になっている関係もあり、表示速度はそれほど期待できません。 記事が多いサイトで利用する場合は、事前に速度をテストしたり、もし遅い場合は、キャッシュ系の技術を併用するなどの対策を行ってください。

というわけで、WordOnsen Sapporo はセミナー後、開発合宿及び懇親会に突入。

まがりん様がもくもくと Stop the Bokettch のバージョンをあげ、マリメロ様が wp-otenki のカスタムお天気画像をつくり、気がつけばマミリンがぐーすか寝ているなど、盛り上がりをみせておりました。

71_large

翌日は円山公園散策。まがりん様のリス写真。

健康的! 楽しかったです(^ ^アリガトー

SaCSS with WordBench 札幌, Late 2013 札幌のフォローアップ

12/14 札幌にて「SaCSS with WordBench 札幌, Late 2013」が開催され、スピーカーとして登壇させていただきました!

71A_5406-miniWordBench 札幌」は現在、年一度の OSC 北海道のセミナー・ブースが主な活動の拠点となっておりますが、今回はハムさんのご支援をうけ SaCSS(sapporo.css) と共同開催。東京よりまがりんさん、新潟よりをかもとにーさんをお招きするという豪華な内容となりました。 🙂

SaCSS WordBench Sapporo,Late2013

『SaCSS(サックス)』は札幌で主にコーダー(マークアップエンジニア)やWebデザイナー向けに、HTMLやCSS、JavaScriptなどフロントエンドの内容を中心にほぼ毎月勉強会を開催している団体です。
SaCSSは「Sapporo Cording Study & Seminar」もしくは「Sapporo.CSS」を省略した形で、参加者に「サックス」の愛称でよばれております。

1470304_632103803523442_1341714777_n自分は「WordPress を取り巻くセキュリティー設計」ということでお話させていただきました。 フォローアップ的に、ここに内容をまとめてみたいと思います。

  • 情報セキュリティーとは大きく、機密性・完全性・可用性という3つの要素で構成されている。
  • WordPressにおいて三要素を保つために必要なこと。
    • FTP、SSH、MySQL、WordPress などのユーザ・パスワード管理運用
    • ネットワーク経路の安全化
    • ソフトウェアのアップデート
    • データのバックアップ
    • 日々のサイト監視
    • 必要ならば、DoS 攻撃などによるサイトダウンを防ぐ対策

セキュリティーを保つために行うことはコンピュータ的な要素ももちろんありますが、サイト監視やパスワード管理など人間が日常的に運用しなければいけない部分も沢山あります。また、インシデント発生時の連絡系統や、回復手順などの運用フローを事前に作成することも大切です。

勉強会アンケートにて、WordPress サイトのバックアップ法の具体的な方法についてご質問をいただきました。ここでいくつか紹介いたします。 🙂

VaultPress – WordPress Backup and Security
WordPress の開発元 automattic 社が運用している、WordPress のバックアップサービスです。有料となりますが、プラグインの導入とアカウントの登録だけで、バックアップ・リストアが可能になります。
WordPressエンタープライズサポート|め組用心棒
デジタルキューブさんが運営している、きめ細かなユーザサポートサービスです。バックアップもお任せすることができます。こちらは日本語でサービスを受けることができます。
BackWPup Free – WordPress Backup Plugin
WordPress のプラグインによるバックアップの実装です。導入すると、メールや各種クラウドのストレージに WordPress サイトのバックアップを行うことができます。

ちなみに、このサイト hiromasa.another は、cron と シェルスクリプト(mysqldump と rsync)を自宅のサーバに配置し、週次でバックアップを行なっています。

WordPress のバックアップは各種サービスやプラグインのおかげで随分手軽になりましたが、意外とリストア(戻し)をした経験がある方は少ないのではないでしょうか。転ばぬ先のバックアップ。機会を見て、戻しの練習もしてもらえたら良いなと思います。 🙂

さて、勉強会の翌日は SaCSS メンバー&まがりんさんと支笏湖丸駒温泉へ。

529539_479694562149871_742478106_n

まがりんにより寒中全裸待機(露天風呂!)といった大技も繰り出され、楽しいひと時でした。 ありがとうございました。 😀

WordPress 3.6 リリースとメディアプレーヤー

WordPress 3.6 日本語版が 8/3 にリリースされました!

WordPress 3.6 “Oscar”

以下は、Matt Mullenweg が書いた WordPress.org 公式ブログの記事、「WordPress 3.6 “Oscar”」を訳したものです。

WordPress 3.6 日本語版リリースのお知らせ

WordPress 3.6 日本語版をリリースしました。

投稿のリビジョン管理の強化や、複数人で記事を編集した際の編集ロック・引継ぎ機能の追加など、コンテンツを管理する上で大切な機能が強化されました。また、ついに音声や動画が再生できるメディアプレーヤーが内蔵されました。待っていました。 😀

この記事ではリビジョン管理と、メディアプレーヤーを取り上げてみます。

リビジョン管理

3.6 よりリビジョンの差分管理の UI が刷新され、比較や戻しの操作がかなり使いやすくなっています。

wordpress36-02

wordpress36-03

また歳をとった diff が見ることができました。。記事は戻せど、時は戻らず。。

さて、SaCSS でもご質問いただきましたが保管するリビジョン数はデフォルトで無制限(-1)です。

変更したい場合、wp-config.php に新設する WP_POST_REVISIONS 定数、もしくは functions.php の wp_revisions_to_keep フィルターで設定できます。投稿タイプや記事ごとで設定したい場合はフィルターで分岐して使うとよいでしょう。

wp-config.php

// リビジョンがサポートされている投稿タイプ全体の履歴を10記事にする
define('WP_POST_REVISIONS', 10);

functions.php (PHP 5.3 以降、PHP 5.2 以下の場合はクロージャを崩してください)

add_filter('wp_revisions_to_keep', function($num, $post) {
    // 記事や投稿タイプで分岐したい場合 $post で条件判定
    return 10;
}, 10, 2);

なお、履歴をとらない場合は 0 を設定します。

メディアプレーヤー

おまちかね、メディアプレーヤー。 外部サイトにたよることなく、記事中に音声や動画を埋め込めるようになりました!

wordpress36-04

MP3 などの ID3 も読み取ってくれるすぐれもの。

バンドのウェブサイトをつくるにも良いのではないでしょうか。スマートフォンでも再生できるハズです。 🙂

というわけで、わたくしの作曲と友人ササミによる編曲、現在製作中のゲーム「Legend Of Moriko」よりメイン曲 “Ghost Moon” ピアノバージョンとエンディングバージョン。 2005年につくたれた「あなたにDoS」のササミボーカロイドアレンジを紹介して、この記事を終えることにしましょう。

この曲たちは札幌と山形の仙台の遠距離、インターネット上だけで作詞・作曲・アレンジされています。すごい時代になったものです!

Ghost Moon (Piano ver)
作曲・ひろましゃ / 編曲・ササミ

Ghost Moon (Ending ver)
作曲・ひろましゃ / 編曲・ササミ

あなたにDoS (VOCALOID ver)
作詞・aka & ひろましゃ / 作曲・ひろましゃ / 編曲・ササミ

お楽しみください。 :) (サンキューササミ)

WordPress for Android のビルド

突然ですが WordPress の Android スマートフォン投稿アプリ「WordPress for Android」のビルドの仕方です。

事の発端は、スマートフォンを Galaxy SII から S4 に変えたこと…。なんと S4 は写真の画素を VGA に落とせず、サーバのメモリ不足にて WordPress の写真ブログに投稿できないという衝撃の事実。(←時代についていっていないひろましゃくん…

まぁ、ついでに好きなように WordPress for Android のソースコードを修正できたら面白いのではないかと始めたのでした。

wp-android10

どうやら次世代 WordPress には、JSON ベースの REST API も付きそうな雰囲気ですので、こういった WordPress が備える Web 管理画面外からの投稿アプリの研究をしておくのも良いかもしれませんね。 🙂

てなわけで、自分でも忘れそうなのでビルド方法を記しておきます。

Android SDK や ADT はインストール済みとします。 画面は Ubuntu の 英語版 Eclipse より。 他の環境の方は適宜読み替えください。

依存ライブラリのセットアップ

WordPress for Android をビルドするには 、ActionBarSherlockandroid-menudrawer ライブラリが必要です。 何気に pom.xml とかがないので dependency がよく分からないのですが、、とりあえずそれぞれの master ブランチを使っています。

両ライブラリともに github で公開されていますのでクローンします。

ActionBarSherlock
android-menudrawer

Eclipse に EGit が入っていると思いますので、Git Repository ビューより。

wp-android01

2つのライブラリがクローンできたら双方とも Eclipse のワークスペースに持ってきます。

File -> New -> Other -> Android Existing Code

wp-android02

Next ボタン押下後にパスの指定がでますので、さきほどクローンした 2ライブラリを追加します。

ActionBarSherlock はリポジトリに複数のプロジェクトが含まれていますが、「actionbarsherlock」ディレクトリを指定します。通常は次のパスになるでしょう。

~/git/ActionBarSherlock/actionbarsherlock
~/git/git/android-menudrawer

ワークスペースにプロジェクトが持ってこれたら、それぞれに API レベルとライブラリ利用の指定をします。

プロジェクト名右クリック -> Properties -> Android

android-menudrawer のマスターブランチは、Jerry Beans でないとコンパイルが通らないようだったので、双方とも 4.2.2 (API 17) に設定しました。 また、Library の「Is Library」のチェックを忘れずにつけます。

wp-android03

以上で依存関係の操作は終わりです。

WordPress for Android コアのビルド

WordPress for Android は SVN でソースが公開されていますので、いつも通り Eclipse の SVN ビューからチェックアウトし、ワークスペースにのせます。

http://android.svn.wordpress.org/

次に先ほど入れた依存ライブラリのパスを設定していきます。

wp-android プロジェクト右クリック -> Properties -> Android

チェックアウト後は、Library がパス切れ(バッテン)していると思いますので、一度 Remove して先ほどワークスペースに追加したふたつのライブラリを Add し直します。

wp-android04

wp-android05

次にデプロイ時に含むライブラリを選択します。

wp-android プロジェクト右クリック -> Properties -> Other and Export

SDK(Android 4.2.2) と Android Private Libraries と Android Dependencies にチェックがついていることを確認してください。(指定できていないと ClassNotFound Exception します)

wp-android07

ここでいよいよ、ライブラリも含めてビルド(クリーン)します。

Project -> Clean

3つのプロジェクトを選択して OK を押します。

wp-android08

ビルド通りましたか? 😀

ビルドパスにライブラリの jar が追加されていることを確認します。

wp-android プロジェクト右クリック -> Properties -> Java Build Path

wp-android06

では、アプリを実行してみます。

wp-android 右クリック -> Run as -> Android Application

wp-android09

おめでとうございます。 WordPress for Android はあなたの手の中に 😀

wp-android11

動かない場合は、おそらく依存関係の欠如だと思いますので Marker ビューで追っていけばなんとかなると思います。

ビルドができれば、あとは知恵と勇気でなんとかなるですね。これくらいの大きさの実装だと Android アプリ作成の勉強にもちょうど良いです。

これよりソースをいじってみたいと思います。 🙂

WordPress for Android 更新

WordPress for Android がアップデートしてバージョン 2.3 になっていましたので、アンドロイドタブレットと普通(?)のスマートフォンで試してみました。

今時はサイト更新をスマートフォンでやりたいという要件も増えている気もしますので、研究に触ってみるといいかもしれません。 🙂

ここで使っているのは ICONIA TAB A700 と Bluetooth 接続キーボード & GALAXY SII です。 ギャラクシーで撮影したので、自分自身の画像はなし。。

wpid-wp-1366332913417.jpg

今回のアップデートから上の写真のようにタブレットを横置きで実行した場合でも、画面スペースが有効活用されるようになり見やすくなっています。(サイドメニューがでるようになりました)

wpid-Screenshot_2013-04-19-13-15-21.png

新規投稿は右上の+ボタンです。投稿までの操作が少なく便利になりました。 🙂

普通のスマートフォンで縦画面表示だと次のような感じになります。 左から操作メニューがひょこっとでてきます。

SC20130419-161934

このようなブログ投稿アプリは、投稿にネットワークを使わないローカル編集ができるのが良いところのひとつ。WordPress for Android では編集画面の「状態」を「ローカル下書き」することで途中保存が可能です。

wpid-Screenshot_2013-04-19-13-41-38.png

ここの状態を「下書き」にするとサーバ側のいつもの下書きになりますので、途中から PC で引き続きといったこともできます。

画像を含めた投稿の編集については、「ローカル下書き」まではエディターに画像プレビューが表示され、「下書き」を含むサーバ保存後の再編集はイメージタグの状態となります。

ローカル編集中。

SC20130419-164342

サーバ保存後。

SC20130419-164600

普段 HTML を扱わない方にはやや分かりづらいですが、サーバ保存後に  wpautop 形式や HTML になったデータをプレビューしながら編集するのはかなり難しい処理ですので、ここはしょうがない仕様です。

Masayan「・・・」

画像に関しては残念ながら「本文に入れずに画像(メディア)だけアップロードする」処理はできません。これは、WordPress の Web 管理画面のようにメディアライブラリのみの登録を行う UI がないためです。

ただし、アイキャッチ画像の設定に関してはこの操作が可能で、挿入するしている画像の長押し操作からでてくる「画像の設定」画面で「アイキャッチ画像として使用」を設定した場合、「投稿本文中に画像を含める」の選択を使うことが出来ます。

SC20130419-171222

さて、WordPress デザインワークブックのサンプルサイトとなり、関係者一同、写真を見ておなかがすいてしまい制作が進まなかったことがあると噂の、札幌の nino クレープさんのブログも WordPress for Android で更新されております。 写真とコメント付きでクレープが載り、ついつい行きたくなりますゆえ。

スマートフォンは身近にあり気軽に使えますので、画像の扱いや操作系など研究の上、WordPress サイト更新の選択肢の一つとして検討してみると良いかもしれません。 iOS 版ももちろんあります。

これらの WordPress クライアントで使われている xmlrpc インターフェースは、自分でも利用することができます。 サイトに合わせた特別なアプリをつくるのも便利そうですね。 いつかやってみたいです。 🙂