WooCommerce 決済代行会社について

久々にWooCommerce を使ってみたら、いい感じだったのでメモ。
管理画面の日本語化は問題なし。
コードもオブジェクト指向で、読みやすい。

問題は、決済代行会社がどこまで対応しているのかですな。

ってことで、ゆるゆるな調査スタート!

WooCommerce用ペイジェント決済(WordPress対応ECプラグイン) – 株式会社ペイジェント

GMP イプシロン (イプシロン的には非公式っぽい)

Webpay (こちらも非公式)

・Paypal

…. 上記の4つっぽいですね。
まぁ、ペイジェントがあるだけまだいいかな。ペイジェント使いづらいけど。

Automattic 社に買収されて久しいですが、今後も楽しみです。

WordPress の高速化施策 #wpacja2014

WordPress Advent Calendar 2014 ということで12日目を担当します@1shiharaTです。
取り敢えず、今まで Advent Calendar に参加した事がなかったので、今年こそは参加しようと思い立ちました。

とはいえ、ネタもそこまで豊富ではないので…

今回は絞り出して WordPress の高速化施策について語ろうと思います。

目次

0. 原因の調査

まずは、サイトの問題を調べること。それが適切な対処に繋がります。
WordPress は CMSですので、フロントエンド側のボトルネックと”バックエンド側のボトルネック”を調べることが重要となります。

フロントエンド側の調査

主に、開発者ツールを使用して調査することになります。
( 私自身 Chrome を使用しているので Chrome Developer Tool を軸に書きますが、他のブラウザでも出来るかと思います。)

( Chrome Extension )

Google 製のウェブパフォーマンス測定ツールです。
基本的に、Chrome Extension 版を使用することが多いです。

Chrome 開発者ツールの「Network」タブも役に立ちます。

ブラウザがそれぞれのリソースを読み込むのにどれぐらいかかったかというのが一目瞭然です。

簡単に言うと、一番上のリクエストページ自体のレスポンスが遅い場合と、画像などの静的ファイルの読み込みに時間がかかっている場合が一目瞭然です。

バックエンド側の調査

フロントエンド側の調査の結果、リクエストしたページ自体のレスポンスが遅い場合にはコチラの調査を深くほっていかねばなりません。

上記プラグインを有効化すると、ログイン時のアドミンバーにQuery Monitor バーが出現します。

それぞれの項目をクリックすると、データベースクエリーや応答時間、PHPのエラーなど 結構詳細な事項が出てきます。
これに応じて、プラグインを無効にしたり、時間のかかっている箇所を修正したりすることになります。

開発者のためのプラグインも結構たくさんあるのですが、僕が普段使用する中ではこれが一番お手軽かなという気がします。

1.プラグインリソースの最適化

1.1 プラグインのデメリット

WordPress の一つの利点として、拡張性の高いプラグイン機能が思いつきますね。
こんな機能つけたいな…っていう見切り発車的な発想でも、wordpress.org の公式プラグインディレクトリや
Google 先生に聞くと割と解決策が返ってきます。

しかし、その結果プラグインごとに用意された css , jsファイルを個別にロードすることになります。
WordPressのコア機能では、静的ファイルをプラグインを超えてまとめてくれたりはしません。
よって、大量のリソースにリクエストする状態に陥ってしまいます。
どれだけテーマを作成する時に Grunt, Gulp といったタスクランナー を使ってminify かけようと、これではあまり意味がない気がします。

一方、HTTP1.1 では同時接続数が決まっているので、比較的新しいブラウザでも最大で6つのリソースずつしか読み込むことができません。
ココらへんの知識には下記の記事が非常に参考になると思います。

身につけておきたいWebサイト高速化テクニック #2|検証ツールとそもそもHTTPって何だ編

1.2. 解決方法

これは プラグインの仕組み上仕方ないことなので、サーバーサイドで解決することになります。
プラグインから静的リソースを読み込ませる時には、wp_enquene_scripts()といった関数を使って、
wp_head(), wp_footer() に埋め込みます。ですので、比較的簡単に対処することができます。

WordPressにおける静的ファイルの管理

WordPressではどのように静的ファイルを管理しているのかについて、軽く触れます。
基本的に以下のファイルにその記述がなされています。

おおまかに説明すると、WP_Dependencies というclassを拡張して、WP_Scripts, WP_Stylesという classを作成。
functions.wp-scripts.php と functions.wp-styles.php というファイルで、
それぞれの classのインスタンスを関数内で global で取得し、いろんな操作をしています。

ってことは、テーマ内からでも global $wp_scripts, $wp_styles という記述をしてあげれば、出力の調整が可能です。( ちゃんと関数も用意されています )
まぁ、でも面倒ですね

AssetsMinify を使う。

$wp_scriptsや$wp_styles といったインスタンスを使って、自分で圧縮したり、キャッシュを取ることも可能です。
が、ここはWordPress。既にプラグインもあります。
プラグインで起こっている問題もプラグインで解決するという..なんかおかしな状態ですが。

AssetsMinify


このプラグインでは、Assetic という symphony などでも使用されている静的ファイル管理用ライブラリと、
cssMin や jsMin といった Minify するためのライブラリを使っています。

このプラグインを有効化して設定をすると、$wp_scripts, $wp_styles に登録しているcss,jsファイルをひとまとめにしてくれます。
ちゃんとminifyせずに出力したいファイルも登録できるので、何気に便利です。

2. キャッシュを使用する

キャッシュを使用する…といっても、W3 Total Cache といったキャッシュ系プラグインを利用する方法が一番簡単かなと思います。

では、WordPress のプラグインを開発したり、テーマ開発を行う際に私達が行えるキャッシュについて考えてみます。
WordPress でオブジェクトキャッシュを取るには、WP_Cache クラスを利用します。( 正確には wp_cache_add(), wp_cache_get といった関数 )
また、options テーブルに 有効期限を定めたデータを保存する 「Transients API」も用意されています。
Transients は「一時的なデータ」といった意味合いかと思います。(間違っていたらすみません)

これらを利用することで、データベースへの問い合わせも減り、高速化につながります。
例として、twentyfourteen テーマのコードを挙げます。

/**
 * ブログで複数のカテゴリーが登録されているか調べる関数
 *
 * @since Twenty Fourteen 1.0
 *
 * @return 真偽値 : 複数のカテゴリーが登録されている場合は true を返す
 */
function twentyfourteen_categorized_blog() {

     // ‘twentyfourteen_category_count' というキーのデータが見つからない場合
     if ( false === ( $all_the_cool_cats = get_transient( 'twentyfourteen_category_count' ) ) ) {
          // 投稿があるカテゴリーリストを取得
          $all_the_cool_cats = get_categories( array(
               'hide_empty' => 1,
          ) );

          //
          // 取得したカテゴリの数を数える
          $all_the_cool_cats = count( $all_the_cool_cats );

          // ‘twentyfourteen_category_count' というキーでカテゴリ数を保存
          set_transient( 'twentyfourteen_category_count', $all_the_cool_cats );
     }

     // 取得したカテゴリ数が1じゃない場合
     if ( 1 !== (int) $all_the_cool_cats ) {
         // true を返す
          return true;
     } else {
         // false を返す
          return false;
     }
}

/**
 * twentyfourteen_categorized_blog 関数で使用している一時的なデータを削除するアクションフック
 *
 * @since Twenty Fourteen 1.0
 */
function twentyfourteen_category_transient_flusher() {
     // ‘twentyfourteen_category_count’ というキーを持つデータを削除
     delete_transient( 'twentyfourteen_category_count' );
}

// カテゴリー編集時と投稿保存時に上記関数を動作させる
add_action( 'edit_category', 'twentyfourteen_category_transient_flusher' );
add_action( 'save_post',     'twentyfourteen_category_transient_flusher' );

Transients API を使わない場合ですと、twentyfourteen_categorized_blog() と実行した時に
get_category()関数を呼び出して データベースクエリを構築し、結果を取得しています。

しかし、Transients APIを利用することで以下の場合にのみ get_categories() を実行し、取得したカテゴリーを数える処理を行います。

  • テーマをインストールしてから最初の実行時
  • カテゴリー編集時
  • 投稿保存時
  • データをセットしてから24時間後

上記以外の場合は、twentyfourteen_category_count というキーに保存してあるカテゴリー総数を取得します。

3. 画像の最適化

WordPressの場合、画像の最適化をするポイントは2つあります。

  • テーマ内で使用する画像
  • 運用上 uploads ディレクトリへ追加される画像

テーマ内で使用する画像については、制作完了時に JPEGmini や pngmini, ImageOptim といった画像圧縮系ソフトを利用して最適化したり、
Grunt や Gulp といったタスクランナーによって最適化を自動化したり等、いろいろあると思います。

しかし、運用上 uploads ディレクトリへ追加される画像については、中々厳しい側面があります。
定期的に ディレクトリ毎ダウンロードしてソフトを通して再アップロードも面倒なので…

画像の最適化としては、EWWW Image Optimizerを使えば、そこそこ画像を最適化出来ると思います。
プラグイン内に画像最適化用のライブラリを内包しており、php から実行するようになっています。

対応OS

Windows, Mac, Darwin, SunOS, FreeBSD, Linux

内包ライブラリ

jpegtran, jpegmini, optipng, pngout, pngquant, gifsicle

メジャーどころのものしかないので、違うライブラリを使いたい場合には別の方法を考えた方がいいでしょう。

4. データベースの最適化

WordPress の投稿・固定ページ投稿タイプでは、初期状態でリビジョン機能が有効になっています。
リビジョンは差分管理ではなく、そのままの状態をデータベースに保存しています。
例えば、リビジョン数が20あったとすると、20記事分データベースには記事として保存してある状態です。

無効化する方法もあるので、必要ない時は下記の記事を参考にしてください。

WordPressのオートセーブとリビジョン機能をプラグインを使わずに無効化する。 | webOpixel

また、そういったデータベースを最適化するためのプラグインもあります。

5. CloudFlareを使う

もう大分おなじみのCDNサービスです。10月ぐらいに Universal SSL というサービスが始まり、SSL を無料でも利用することが出来るようになりました。
( ただし、WordPress やEC-CUBEなどで利用する場合、管理画面等でリダイレクトループが発生するので、こういったプラグインを使用して下さい。 )
導入もDNSレコードを書き換えるだけで簡単にできます。
優良プランだと、画像の最適化もすることができます。


駆け足になりましたが、僕が普段対処している方法はこんな感じです。
内容の中に間違っている箇所もあるかもしれませんので、その時は指摘していただけると助かります。
次回は、Masaさんです。

Sketch 3 の魅力

どうも。@1shiharaTです。
今度 「Sketch 3 勉強会 in NAGOYA」を開くついでに集客がうまくいっていない(汗) ので記事を欠かさせていただきます。

Sketch の魅力

Sketch 3 は、Bohemian Coding 社が開発・販売している Mac 用のベクタードローイングソフトです。

ベクタードローイングソフトといえば思いつくのは、米 Adobe 社が開発・販売している Illustrator
もしくは Inkscape などが頭に浮かぶかも知れません。

Sketch はベクタードローイングソフトという名を冠しながら、
ピクセルを前提にしているという不思議なソフトです。

「新規開発が事実上中止となっている Adobe Fireworks の後継ソフト」

というキャッチコピーを良く聞くかもしれませんが、
実際に使っている身としては、その機能・操作性を大きく凌駕しているのではないかと感じています。

そこで Sketch の魅力について、幾つか上げていこうと思います。

1. 軽い。Mac に特化している。

Adobe 製品を使っていると感じる、重い という感覚。
誰しもその胸にしまいながら、仕方なく使用しているという方も多いのではないでしょうか?

Sketch はとにかく軽いです。さくさく軽快に動きます。

起動・操作のレスポンス供に Adobe 製品とは比べ物になりません.

Apple のフレームワークを活用し、ネイティブアプリとして開発されているため、iCloud や バージョン機能などもフルに取り込まれています。

Artboard 2

2. 細かい操作性。

Sketch の ユーザーインターフェース は、初見で見た時に「こんなシンプルでまともなの作れんの?」と不安を覚えることがあるかもしれません。

しかし、シンプル イズ ベスト とはよく言ったもので、そのUIにすべてがつまっています。

キーセットを覚えるまでは慣れないかもしれませんが、
(といっても自然に使える程度) ほとんど Adobe 製品と同じような感覚で使用できます。

9bc78e0013062bcf047c408041ebc0a2

上記のGIFのような操作はもちろん、
これに Shift キーを合わせて使用すると 10px ずつマージンを測りながら移動できます。

3. シンボル・スタイルの共有

sketch-share

Fireworks にはお馴染みの機能である、シンボル機能も Sketch には搭載されています。

ボタンを繰り返し設置したり、
h1,h2,h3 などのHTMLタグに合わせてスタイルを共有したり。

より、コーディングの時のことを頭で考えながら作ることができるようになりました。

4. 充実した書き出し機能

5bfd179df55e0d0adc312e3bedff44aa

Sketch はベクターベースのドローイングソフトですが、
豊富な書き出し機能により、 Web デザインにもより使いやすいものとなっています。

png, jpg といった従来のフォーマットはもちろん、
svg,eps, PDF での書き出しも容易です。

シェイブやレイヤーをスライスする時も、一々選択範囲を指定せずとも、簡単にスライスすることができます。

5. プラグインによる拡張

Sketch は、jstalk で機能拡張用のプラグインを書くことができ、その多くが Github などで公開されています。

最近では、 Sketch toolbox というアプリでプラグイン管理をすることができるようになりました。(まだベータ版ですが)

  • sketch-mesure : レイヤーの幅や高さ、丸みなどの情報を別レイヤーとして自動生成してくれます。
    2014-10-07 22.06.20

  • content-generator : 写真やテキストのダミーを自動生成してくれます。
    日本語版も配布されています。

  • Duplicator : 素の状態でもレイヤーをコピーしやすいですが、このプラグインを使用することでより柔軟に複製することが出来ます。

25272d8a99674f5396f3a86eef1f6f03

6. ページ・アートボード

イラストレーターではおなじみのアートボード、
Fireworks でお馴染みのページが Sketch には容易されています。

Web サイトを作る時に、ページ毎にファイルを分けて保存するとなると、
ファイル数も膨大になりがちですが、
Sketch では、一つのファイル内で完結することができます。

また、アートボードも作成できるため、
一つのページ内に、PC・タブレット・モバイルのデザインを作成しつつ、
ページ毎にデザイン制作を進めていくことができます。

もちろん、前述した「シンボル」機能もページ・アートボードを超えて共有することができます。

これにより、いくつかのページをコンポーネントデザイン用のページに当てて、シンボル機能を使用し、ページごとにコンポーネントを挿入するなんてことも可能です。

sketch-workflow

7.その他地味に使えるところ

1. 画像の切り抜き・貼り付け

Sketch は画像の編集が苦手なのですが、
なんとかごまかせます。

例えば、ダブルクリック後に選択範囲を決めコピペすると、
その選択した範囲のビットマップ画像を別レイヤーとして作成してくれたりします。

2. Photoshop、Illustrator からコピペ

その他デザインソフトから、コピペでデータを受け渡しもできます。
ベクターベースのレイヤーでしたら、ほとんど誤差なしで Sketch に貼り付けることができます。


いかがでしょうか?
上記のことは、Sketch 3 の機能ほんの一部です。
10月18日の Sketch 3 勉強会 in NAGOYA では、こもりまさあき さんにもっと詳しくわかりやすく Sketch 3 の解説をしていただけますので、
是非ご来場ください!

Sketch 3 勉強会 in NAGOYA + Webデザインと開発の未来

EC-CUBE に tinyMCE と メディアアップローダー を設置!

二回続けて EC-CUBE のメモ。


EC-CUBE で商品情報などを入力する際、
どうしても HTML を書かなければならない場合があると思います。

今回は既存サイトがすでに Futureshop で動いており、
そこから EC-CUBE へ移行するって具合の案件でした。
しかも、バリバリHTMLタグで組んでます!!!というタイプのサイトです。
LP のオンパレード。むしろ LPしかない..
予算があまりないので取り敢えず移行するだけなんですが、
画像が多いのでこれから更新する時面倒だなと。

せめて少しでも更新しやすいようにと、TinyMCE を導入することにしました。

でも、デフォルトでは画像をアップロードする機能はついてない。
一々 FTP・またはEC-CUBEの管理画面から別途画像をアップロードし、
URLをコピペして貼り付けないといけません。

いや、これは面倒くさいでしょ。

でも、TinyMCE と連動できるファイルマネージャーを探してもなんかUIがださいんです
諦めず探していたら、結構いいソフトウェアが見つかりました。

ResponsiveFilemanager

2014-10-03 0.22.27

デモ

デモを見てみるとイケてる!
日本語対応してる!
これは使える!

ってことで実装してみたのがこちら。

16095e85f21c4ba70dd8b8615cbdf61d

取り敢えず、超絶簡単に設置できました。
でもセキュリティとか大丈夫かこれ。
もうちょい様子見っすかね。

EC-CUBE と Gulp と いろいろ。

今回、久しぶりに EC-CUBE 案件を引き受けたのでメモ。


昨今のフロント界隈では、 Grunt や Gulp などのタスクランナーが当たり前のように使われていますね。
EC-CUBE でも当然その恩恵を受けることは可能です。

  • Sass のコンパイル

  • JavaScript の minify と jshint で構文チェック

  • 画像の最適化

  • ブラウザリロード

  • EC-CUBE 本体の phpunit の実行

上記 5つを自動化してみたいと思います。

0. 前提

0-1. 開発環境

  • Mac book pro retina

各ソフトウェアのバージョン

  • php : 5.4.28
  • composer : 1e4229e22aefe50582734964d027fc1bfec16b1d
  • node : v0.10.26
  • npm : 1.4.3
  • ruby : 2.0.0p353
  • Sass : 3.4.3

上記が僕が実際に作業を行った環境となります。 
composer は php 5.3 以上を動作環境としています。
node, npm のインストールと、sass を使用するために ruby と sass のインストールを前提としています。

0-2. ファイル階層

今回は EC-CUBE の開発用リポジトリデータを前提として話を進めていきます。

  • バージョン : 2_13_2

EC-CUBE 公式 リポジトリ

Github にも大河内さんが非公式ミラーを立ててくださっているので、
そちらの方が見やすいかもしれません。

2014-10-01 22.07.05

また、本記事ではこのリポジトリの一番上の階層を「プロジェクトルートディレクトリ」と呼称します。

0-3. テンプレート

デフォルトテンプレートを使用します。
自作のテンプレートを作る方はご自身の環境に合わせてください。

Smarty テンプレートは通常通りの配置でOKです。

css, 画像ファイル, .js,.scss などの静的なファイルの階層は以下のとおりです。

html/
   upload/
       save_image/
   user_data/
       packages/
          default/
              css/
              img/
              js/
                  _main.js
              scss/
                  main.scss
  • html/user_data/packages/default/scss/main.scsscss/main.min.css にコンパイル
  • html/user_data/packages/default/js/_main.jsjs/scripts.min.js に コンパイル
  • html/user_data/packages/default/img 内の画像ファイルを最適化
  • html/upload/save_image 内の画像ファイルを最適化

大体こんなことをやっていきます。

1. Node.js パッケージ のインストール

package.json

npm の設定ファイルです。
このファイルに Gulp のプラグインや依存パッケージを定義していきます。

$ npm init 

というコマンドを打つことでひな形を作成できますが、
面倒なので下記をコピペして、プロジェクトルートディレクトリに用意してください。

http://liberty-technology.biz/PublicItems/npm/package.json.html

その後、ターミナルにてプロジェクトルートディレクトリに移動し、

$ npm install 

とコマンドを打てば、packages.json に定義してあるパッケージが自動的にインストールされていきます。

2. composer によるパッケージのインストール

node の npm のような、ruby でいう gem のような php の 依存管理ツールです。
comporser 自体のインストールについては、他にもリソースがあるので参考に。

http://kore1server.com/175
Composer ドキュメント日本語訳

今回は、phpunit をインストールするために使用します。
公式リポジトリ・github からダウンロードした方はそのままの comporser.json ファイルで大丈夫です。

$ comporser install

comporser.json と同じ階層 ( プロジェクトルートディレクトリ )でコマンドをターミナルで打つと
phpunit がインストールされます。

3. .jshintrc の設置

JSHint は JavaScript の 構文チェックを行うためのツールです。
利用するためには、構文チェックの設定をこの .jshintrc というファイルに定義します。

Gulp を実行する階層に設置する必要があるので、
プロジェクトルートディレクトリに設置してください。

4. Gulp のインストールと gulpfile.js の作成

Gulp は グローバルとローカル両方にインストールする必要があります。
ローカルの Gulp は最初に npm install でインストールしましたが、
まだ グローバルインストールを行っていない方は次のコマンドをターミナルで打ってください。

$ npm install -g gulp

Gulp で行う動作を定義していきます。
こちらも .jshintrc と同じくプロジェクトルートに設置します。

この gulpfile.js では、「watch」「production」というタスクを定義しています。

  
    $ gulp watch 
  

とターミナルでコマンドを打つと、ファイルの監視が始まり、
ファイルを保存する際に sass, js のコンパイル、
サーバーのリロード、変更があった画像の最適化を自動的に行ってくれます。

  
    $ gulp production 
  

production タスクを実行すると、sassのコンパイルとjsのminify、商品画像の最適化を行ってくれます。

  
    $ gulp phpunit
  

を実行すると、EC-CUBEの本体のテストを実行してくれます。

5. /data/Smarty/templates/default/site_main.tpl に タグの追加

上記の gulp watch というタスクを走らせた時、
ターミナルで下のような通知が出ると思います。

  
[BS] Copy the following snippet into your website, just before the closing </body> tag

<script type='text/javascript'>//<![CDATA[
document.write("<script async src='//HOST:3000/browser-sync/browser-sync-client.1.5.2.js'><\/script>".replace(/HOST/g, location.hostname).replace(/PORT/g, location.port));
//]]></script>

  

下記の script タグを body タグの直前にコピペしてくださいって書いてあるので、そのまま実行します。

/data/Smarty/templates/default/site_main.tpl を開き、上記タグを貼り付けてください。

2014-10-02 23

ちゃんとできていれば、上記のように右上に 「Connected to BrowserSync」とのメッセージがでます。
これで、ファイルを保存するたびにブラウザがリロードしてくれます。
BrowserSync は liveReload よりも高機能なんで、
複数のデバイス・ブラウザで同期したりなんかもできます。


以上、少し長くなりましたがこれで。
沖縄が再来週に迫ってきました。

WordPress の最新動向 について話しました。

お疲れ様です。

先日行われた WordFes Nagoya 2014 にて、WordPress の最新動向についてお話しました。
相変わらず緊張しまくりの発表で、途中声が震えそうになりましたが、
なんとか無事に終わり良かったです。

WordPress の最新動向について

WordPress の最新動向について、僕自身コアに貢献した経験がなく、
話す資格あるのか…という感じでした(汗)

とりあえず本番までに何かしらできればと思い、ソースコードを読みまくりましたが間に合わず….
というか、英語力がないので時間がかかりすぎました。
当分の課題は英語を学ぶことになりそうです。

WordPress のコア開発について

今回、コア開発に参加するために、開発ブログやTracなどのドキュメントにひと通り目を通しました。

地道に翻訳しながらだったので不正確な点もあったかもしれませんが、
「こんなに慎重なんだ」ということを感じました。

一つのアクションフックや、関数などを追加することに対しても
何十といったコメントがされたていたり、いろんな視点から突っ込みが入ったりしていました。

WordPress がこれだけシェアを拡大している中、それは当然のことかも知れません。
後方互換性や歴史的な事情を考慮し、コアのコードに改変を加えるのは相当大変なことだと感じました。

コア開発へ参加するために必要なこと
  • 英語
  • HTML, CSS, JavaScript, php …etc などのスキル
  • 後方互換性への知識
  • 既存のコードに至った歴史的背景

もちろん、わからない所は相談すれば誰かが答えてくれると思います。
それがオープンソースのいいところであるのは間違いありません。
しかし、それが逆にノイズとなってコア開発の足かせとなっているのかも知れないなとも思いました。

やはり、簡単ではないなと感じました。
これから修行しようと思います。

これからの WordPress について

こちらの記事が非常に参考になりました。

The Future of WordPress

というか、僕のスライドなんかより上記の記事を読むことを強くおすすめします。

WordPress を使うということ

今回このスライドを作るに当たり、WordPress に対してもっと深く学習することができました。
と同時に感じたことがあります。

俺、WordPress に依存しすぎじゃないか…

ということです。(自分が)

基本的に実案件では9割 WordPress を使用してサイトを構築しています。

コードの多くは WordPress に依存しています。

内包されている API を利用し機能を実装することはとても便利です。
でも、もし自分が WordPress を使用せずに1からその機能を実装できるかと言われたら
相当な時間がかかると思います。
そもそも学習から始まることがたくさんあるかと。

そこら辺を意識して今後も開発なり学習を進めていかないと、
気づいた時には手遅れになりそうで怖いです。
頑張ろう。

スライド内の参考URL

スライド内で紹介している参考サイトのURLを以下に書き出します。

セクション2 – 3.9, 4.0 の復習

セクション3 – 今後の開発動向

セクション4 – コア以外の開発トレンド

力技!Json から WP Theme Customizer の設定

今回は WordPress に関する小規模なハックです。

テーマに組み込んで、ユーザーさんにテーマのカスタマイズを簡単に提供する「テーマカスタマイザー」機能ですが、設定がややこしく、コードも肥大化しがちになります。

なんで、json などから手っ取り早く設定項目かけたらなと思って、
ちょっとコードを書いてみました。

めちゃくちゃなコードと英語かも知れませんが、Gist にあげているので良かったら参考にして下さい。

上記ファイルと同じ階層に以下の形式の json ファイルを作成して渡してあげると、
無事テーマカスタマイザーに反映されます( はずです )

    "gg_general_settings": { // セクション ID
        "title" : "基本的な設定", // セクションのタイトル
        "priority" : 29, // セクションの順番
        "setting" : {
            "general_keywords" : { // 設定 ID
                "transport" : "postMessage", // js でリアルタイムに反映させる場合は "postMesage", リロードさせる場合は "refresh"
                "default" : "", // デフォルトの値
                "label" : "キーワードをカンマ区切りで入力してください。", // 項目のラベル
                "type" : "option" // 設定項目のタイプ "select","radio","option","image","color"
            }
        }
    }

でも、結局あんまり意味がなかったような……あはは
こんなこともできるんだよレベルで覚えてもらえたら嬉しいです。

次は管理画面から簡単に設定できるようなプラグイン作ります。

( 最近プラグイン作ろう作ろう詐欺になりつつある )

2014年06月11日 追記 :

WordCamp kansai 2014 2日目のコントリビューターデイにて、プラグイン化しました。

https://github.com/1shiharaT/extend-theme-customizer

WordPress の制作効率UP! 「TGM-Plugin-Activation」

今日は、ちょっとした制作効率を上げる Tips です。

普段 WordPress でサイトを制作する際に、独自に制作している内部的なテーマを使う会社も多いんじゃないかなと思います。

そこで、実際にサイトを制作する際に繰り返す作業が「プラグインのインストール」作業です。

大体、サイト制作する時に必須なプラグインって決まってきますよね? (僕だけ?)

そんな非効率な作業を今回短縮できるソフトウェアを紹介します。

TGM-Plugin-Activation

Github で公開されている TGM-Plugin-Activationというリポジトリがあります。

結構前から公開されていまして、なにができるかと言いますと….

プラグイン一括インストール & 有効化 です。

予めPHPファイルに、インストールさせたいプラグインを記述しておき、管理画面から一括インストールすることができます。

設置方法

Github で公開されていますので、zip で落としてくるなり、
フォークして自分のリポジトリ作っておいたり、なんなりと。

今回はとりあえず、zip で落としてくるパターンの設置方法を説明します。

1. テーマ内にディレクトリを作成

テーマ構成をとりあえず仮定しときます。
hogehoge というテーマの場合です。

/hogehoge/
    /assets
    /includes
    style.css
    functions.php
    index.php
    page.php
    single.php
    .....

とりあえず、テーマ内の第一階層に 「plugins」 というディレクトリを作成します。

/hogehoge/
    /assets
    /includes
    /plugins
    style.css
    functions.php
    index.php
    page.php
    single.php
    .....

2. ダウンロードしたzipファイルを解答し、先程作った「plugins」ディレクトリ内に展開

/hogehoge/
    /assets/
    /includes/
    /plugins
        /plugins/..
        /composer.json
        /README.md
        /class-tgm-plugin-activation.php
        /example.php
    style.css
    functions.php
    index.php
    page.php
    single.php
    .....

zip でダウンロードしたものを、先程作成した plugins フォルダ内に展開すると、上記のようなファイル構成になります。

3. example.php をリネームし、functions.php で読み込む

plugins フォルダ内に入っている example.php をそのままではかっこ悪いので、plugins-install.php 等にリネームします。

リネーム後、functions.php で読み込みましょう。

require get_template_directory . '/plugins/plugins-install.php';

4. plugins-install.php を編集

やっと、一括インストールしたいプラグインの情報を追加していきます。

既に、plugins-install.php には、サンプルコードが書いてありますので、それを編集していきましょう。

※ 上記ファイルは確認していないサンプルコードです。

wordpress.org にホスティングされているプラグインであれば、

http://downloads.wordpress.org//plugins/zip/[プラグインのスラッグ名].zip

がダウンロードする zipファイルまでの絶対パスとなります。

スラッグ名は、プラグインのページURLを見ればわかります。

http://wordpress.org/plugins/[ここの部分]/

5. 管理画面からインストール

管理画面の「外観」メニューに「Install Plugins」というメニューができていますので、
そこからプラグインを一括インストールします。

これで、サーバーの設定などに問題がなければ、通常のプラグインと同じようにプラグインがインストールされていきます。

長々書きましたが、出来る人だと 5分ぐらいでできるはずです。

フォークして自分用に作っておくと便利ですね。

あとがき

一応、正規のリポジトリからインストールするので、ライセンスなどは問題ないかとは思います。
どうなんでしょうか。ご意見いただけたら幸いです。

有料でテーマを配布するなんて時には使ったらまずいと思いますが、
社内で使うテーマなどのにおいての効率化には使えるんじゃないでしょうか。

WP CLI を使って自動化すれば良い話かもしれませんが、世の中そんなに黒い画面が出来る人ばかりではないので….

現場からは以上です。

Sublime Text 3 を最強の Markdown エディタに。

今日は Sublime Text 3 に関するメモ書きです。


ちょっとしたメモ書きからHTMLの生成まで大人気の Markdown 記法。

今まで Byword や、Writer
といった Mac アプリを利用して書いたりしていました。

せめて Sublime Text 3 でとことんできればいいじゃないか…ってことで、
Package Control 先生 に情報を取ってきてもらいました。

1. Sublime Text 3 – Markmon

Sublime Text 3 – Markmon

そしてこちらが見つけた良さそうなパッケージ。

mathjax, socket.io を利用して、超リアルタイムで変更が反映できます。

多分、Atom よりレスポンス早いんじゃないかなこれ。

利用には幾つか条件があります。

  • node.js がインストールされていること。
  • pandoc (Markdowm parser) がインストールされていること。
  • markmon がインストールされていること。

Node.js は割愛しますが、(手抜き)

pandoc は

$ brew install pandoc

markmon は、

$ npm install -g markmon

上記コマンドをそれぞれ打つことでインストールできます。
元々、markmon という Markdown Previewer をSublime Text 3 から扱えるようにしたパッケージのようです。
ってことで、Sublime Text 3 以外での他のエディタでも使えます!
詳しいことは、こちら

CSS も、markmon のパッケージ内に Sass ファイル が見つかったので、

自分好みのプレビュー画面に変更出来ました。

2. Sublime Table Editor

お次は Markdown での テーブル組み。
Markdown で書くと、

| test               | test            | test                 |
| :----------------- | :-------------- | :------------------- |
| test               | test            | test                 |
| test               | testtesttesttes | test                 |

こんな感じの記法になりますが、結構面倒くさいです。(おれだけ?)

縦棒線は揃えないと超絶気持ち悪いし、かと言ってセル内に情報を書き込む時、
文字数的に縦線超えたら全部揃えないといけない、という。

よって、テーブルなんてあんまり使わずにリストで単純に書き出していました

Sublime Table Editor – 辿々しいGIFファイル を使うと、
こんな感じになります。

  • タブでセルを行ったり来たり。
  • セル内の文字列に合わせて自動的に整形。
  • ctrl + k , | で CSV記法 からの一発置換。
  • alt + 方向キーで縦列・横列の移動。

とりあえず、便利です。

ショックなのが、もう 2年前からあること。
無知は罪ですね。

WP Pointer API を使って「使い方ツアー」を管理画面にさくっと導入!

以前、管理画面カスタマイズってことでアクションフックについて書きましたが、
中々まとめる時間が取れず今に至る 1shiharaT です。

一気にまとめるとすごい量になると思うので、何回かに分けて書きたいと思います。

今回は、 WP Pointer API の実装方法についてです。

初心者の方に使い方を教える一番の方法… ってなんだろう?

WordPress って、思ったより多機能です….よね。
僕のクライアントさんは企業のWeb担当者の方のような、普段は余り Web に関わらないような方が結構な数を占めます。

そんな中、デフォルトの機能に加えカスタム投稿タイプだったり、カスタムフィールドだったり、
いろいろなカスタマイズをして納品とするわけですが、
やっぱり最初は使い方を教える所から始めないといけません。

GrowGroup では、管理画面に使い方マニュアルのようなものを貼り付けていたり,
Skype でレクチャーしたり、しておりまして、最近は操作説明動画を撮影して管理画面に貼り付けていました。

でも、やはり説明出来ない所は多いですし、分からない所はやっぱり出てきます。
そんな中なんかもっといい方法ないかなーと思って色々考えていました。

よくある「ツアー形式」の使い方レクチャー

最近だと ( とは言っても結構昔かも知れませんが ) 会員登録後、自動的に始まる「使い方ツアー」なるものを見たりします。
これを WordPress で実装できたらなぁと思いまして、今回の WP Pointer にたどり着きました。

※ ちなみに、「使い方ツアー」なるイメージは下のリンク先のようなイメージです。
http://bootstraptour.com/

WP Pointer は バージョン 3.3 から搭載されている API です。
日本語での解説は高橋文樹さんの記事しか見つかりませんでした。

よくプラグインをインストールした時に見かけるかもしれません。

こういうやつ

書こうかな… と思ったら既に Gist で使えそうなコードがあったので紹介します。(手抜き)

https://gist.github.com/DevinWalker/7595475

これを元に、ちょっとだけ変更を加えました。

最初のは、1ページに1つのポインターのみ設置になっていたので、無理矢理複数設置可能にしました。
67行目から記述が始まる $adminpages という変数に配列として値を渡すことで実装できます。

// 例 
$adminpages = array(
    // 表示させたいページのスクリーンIDを指定
    'customize' => array(
        // 1ページに何個も表示させたいため、更に囲みます
        array(
            'content' => 'ポインターの内容をここに。h3 タグがタイトルとして装飾されます。',
            // ポインターを表示したい要素のセレクター
            'id' => '#menu-appearance', 
            'position' => array(
                // ポインター矢印の位置 : top left right bottom 
                'edge' => 'left',       
                // ポインターの位置     : top left right bottom 
                'align' => 'left'      
            ) ,
            // ボタンのテキスト
            'button2' => '次へ' , 
            // ボタンをクリックした時に実行する挙動
            'function' => 'window.location="' . admin_url('widgets.php?welcome_tour=2') . '";'
        ) ,
    ) ,
);


雑なコードで申し訳ないです….

まだまだ改善の余地ありまくりなので、
管理画面から内容を操作できるようにプラグイン化しますー!