2017年10月15日日曜日

第69 回 WordBench 大阪「WordPress ログインに Google 認証を使ってみよう」で登壇して #wbosaka #wordpress #google


今回は登壇者として参加しました。
セッションとハンズオン合わせて 3時間ほど時間をもらっていましたが、みんな優秀で 1時間強でセッションとハンズオンが終わってしました @@!
ハンズオン自体はおかげさまで好評だったようで、それぞれの実環境やクライアント環境で導入するというと言ってくださった方々がいたのでやったよかったかなと思います。

雨が降る中、会場となるファーストサーバー大阪本社へ、参加登録していただいた19名(内メンターが2名)について、全員参加していただきました。ありがとうございます!




登壇者って凄いのって思われるかもしれませんが、WordBench 勉強会に関してはそうでもありません。発表することでより深く WordPress について勉強することができるので、◯◯についてもっと詳しくなりたいな!と思ったら、発表者になってみるのもよいですよ!昔、「1週間後にクライアントに納品する WordPress はあるけれど、手持ちには 静的HTMLで作ったデータしかない、どうやって WordPress にしたらいいですか」を参加者に聞くために登壇者になった強者もいました。実際その場で逆ハンズオン(参加者が登壇者に教えていく)をしたわけですが、そういうのもありじゃないかなーと思います。

今回の反省点はこれだけ時間的余裕があるなら、「WordPress のローカル環境を手軽に作成してみよう!」なんてのを合わせてやってもよかったなぁと思いました。人によっては vagrant 環境を以前入れていたが、久しぶりに動作させようとすると動かなかったりした方もおられました。ので、そういうのを合わせてやるといい感じかなと。また機会があれば、WordCamp 等でやってみたいですね。

特に今回のために、 MAMP にコマンド一発で WordPress をインストールしたり、削除したりするツール(GitHUBで公開)を作成したので、MAMPとツールを使ったハンズオンもよいかなと思いました。ただMacしか試してないので、今回のように参加者全員が Mac ユーザーでないかぎり、Windows のことを考えないといけないので、そこはいろいろ試さないといけませんよね。

スライド




セッションとハンズオンの内容もすべて網羅しています。
これを見れば問題なく導入可能かと思います。
ただ2,3戸惑った方がおられたので、そのケースについて下記の紹介しておきます。

スライド19〜21において、Google Developer Console (Google Cloud Console内)のAPI設定におけるいろいろなケースについて紹介しています。
そこで漏れていたのが、ポート指定されたURLです。

http://localhost:8888/demo/  の場合にはどういう指定がしたらよいか


認証済みのJavaScript生成元:http://localhost
認証済みのリダイレクト URI:http://localhost:8888/wp-login.php


となります。
認証済みのJavaScript生成元については、 http://localhost:8888 をいれて保存すると自動的に、http://localhost に修正されます。

Appendix. WP-CLI コマンドで WordPress の自動メンテナンス


時間が余ったので何名かとこの話題について話しました。
ssh ログインが出来るサーバー なら出来る可能性があります。
実際には、WP-CLIコマンドをインストールできて(パスのある場所にダウンロードした WP-CLIを置くだけでいい)、cronが使えたら完璧です。当方は AMIMOTO のマネージドホスティングを使ったりします。ssh でログインできれば大抵のところはインストールできるんじゃないでしょうか。
それができれば上記のように、コマンド一発で、WordPressのバックアップ > プラグイン更新 > 本体更新を自動化できるので、多数の WordPress のメンテナンスを抱えている方々にとっては管理がとても楽になります。

wp @all  core version

なんてのを手持ちの Mac なんかでターミナルから叩くだけで、設定した全サイトの WordPress のバージョン情報が出てきます。これって深刻なセキュリティ脆弱性が報告された際、メンテナンスが必要な WordPress にログインしなくても、それぞれの現在のバージョンが一括で表示できるので超便利ですよ!

これもハンズオンしたら面白いかもしれませんね!

昼食&懇親会


昼食は会場であるファーストサーバー大阪本社から近い所にあるガストで肉を食べました。

ちょっと肉がかたい感じがしましたが、まぁやすいのでそれもまたよし。

懇親会は、GOTENさんが音頭を取って開始!懇親会費は1000円なり〜


結構はやくおわったせいで、ピザがなかなか届かずに、お菓子と飲み物で楽しく歓談できました!


2017年10月15日 @kimipooh

2017年9月17日日曜日

WordCamp Tokyo 2017 に参加して(二日目 コントリビューターDAY) #wordcamp #wctokyo

台風が関西に近づいてます...
その影響でコントリビューターDAYは午前中のみにして、昼から帰ることにしました。
ちょっと残念ではありますが、明日は外せない用事があるので安全を取ることにしました。だからといって、コントリビューターDAYで手を抜くわけではありませんよ!



会場にはお菓子も結構な種類用意されてました!



楽しそうにやってますね!
結構な人数が参加したなぁという感じです。

複数の公開 Google カレンダー をマージして 一覧表示するプラグインを公式プラグインにアップしてみよう!


様々なプロジェクトなどに関わっているとイベントも盛り沢山で、1つの Googleカレンダーで管理するには限界が生じます。ならばマージして一覧表示してしまえばいいんじゃね?という発想です。仕事では現時点では1つの Googleカレンダーの各イベントにハッシュタグを作って、言語判別(#lang)、主催者(#organizer)、種別(#type)などをどんどん追加することで管理するようにしてます。しかし、いずれは破綻するでしょう。そのため複数カレンダーをマージするのは必須なのです。

そこで筆者が仕事で利用するのに開発し公式プラグインにアップしているプラグイン「Google Calendar List View」について公開された複数 Google カレンダーからデータを取得し、それをマージして一覧表示する機能を付与してみたいと思います。

本当は一日あれば、List View for Posts という、これまた筆者が仕事で利用するのに開発した公式プラグイン(固定、投稿、カスタム投稿を纏めてマージして一覧表示、さらにカテゴリーやタクソノミーによるカテゴリー表示もできる)について、RSSもマージしてやるかぁとおもっていたのですが、それはまた別の機会にすることにします。

どうやって実装する?


すでに1つのカレンダーからの一覧表示は完成しています。
そこに複数のカレンダーをいかに設定してもらうかがキーになります。
手軽にやるには、ショートコードにカレンダーIDを複数設定してもらうことですね。できれば Calendar APIもカレンダーごとに複数設定できればよしです。なぜなら、Calendar APIの一日のクエリが 100万クエリと制限(無料で利用できる範囲)されているためです。

[gc_list_view g_id="Google カレンダー ID"  g_api_key="Google Calendar API"]

が基本的なショートコードの形です。
これを複数設定できるようにするためには、次のようにするとよいかなと思います。

[gc_list_view g_id="Google カレンダー ID"  g_api_key="Google Calendar API" g_id_2="Google カレンダー ID 2"  g_api_key_2="Google Calendar API 2" ]

つまり、 g_id_任意  と g_api_key_任意 で名前がユニークならそれをもってGoogleカレンダーからのデータ取得を試みるっていう実装方法ですね。これなら苦労はしなさそうです。

新幹線から参戦!




12時過ぎに大枠では実装できました。
しかし台風が近づいているのでタイムリミット。WordSlack の #plugin に上記コメントを残して 会場を後にしました。

でもふと思いました。新幹線からでも参戦できるじゃん!

そして Twitter に参戦するぜ!ってコメントして、実際に参戦しました。

ネット遅すぎる・・・

と悶ながらも、
  1. プラグインのアップデート
  2. プラグインの翻訳(アップデートしてから20〜30分ぐらいで翻訳可能になる .. GlotPress に対応している場合)
  3. ドキュメント書き換え(日本語と英語)
  4. 本ブログの作成と公開
「4」以外は 15時30分の発表までに間に合ったぜぃという感じです。


で実際のスライドはこちら


そのうち SlideShareに移動するかも。とりあえず時間がなかったので、Google スライドのやつをそのまま公開しました。

なんとか公開までいけてよかったです。。。

2017年9月17日 @kimipooh

2017年9月16日土曜日

WordCamp Tokyo 2017 に参加して(一日目 セッションDAY) #wordcamp #wctokyo

今回の WordCamp Tokyo 2017 の会場は西新宿にあるベルサール新宿グランドコンファレンスセンターでした。
ホテルは少し高いですが近場がいいなぁと思って、ホテルローズガーデン新宿にしました。ちょうど期間限定の安いプランがあったので、それに乗っかりました。西新宿駅(メトロ)の1番出口から左手に少しいったところにあります。新しい別館ではなかったのは残念でしたが、部屋は小さいものの、夜も静かで快適に過ごせました。ただ、「Wi-Fi の暗号が WEP かい!?」「ベッド付近は届きにくいぞ〜」ということはありましたが、まぁ許容範囲です。しかし高いので、次回以降同じ会場なら遠くてもいいので、もう少し安いところにしようと思ったのでした。

前日入り



朝からでようと思うと辛い(一日のイベントならまだしも二日あるので)ので、前泊することに。夕方に、六本木にあるスヌーピーミュージアム東京ってところを見てきました。夕食は、知人がオススメしていた池袋にある美そ乃で焼肉を堪能しました。いろいろな部位を楽しめるということで、19部位を食べたのですが、とてもジューシーで美味しかったです!予算は5000円ぐらいを見ておくとよいです。確かに高いですが霜降り肉を含む焼肉をお腹いっぱい堪能するなら、リーズナブルだと思います。一人でぶらっと入っても大丈夫というのがいいですね! 


9月16日(セッションDAY)



朝から近場のジョナサンでモーニングセット!

WordCamp は東京、関西、京都の3つだけしかいってませんが、いずれも会場までの道順をストリートビューのような形で案内してくれるのは、超方向音痴な筆者にとってありがたいです!前日から何度か迷いましたよ! 西新宿駅からホテルローズガーデン新宿までいくのに、Google Map くんの現在位置がかなりずれていて、目の前にホテルがあったにも関わらず、通過して警察署付近で「あれ〜おかしいなぁ」とかいってました。思わず警察署の外にいた警察署の方に聞いてしまいそうになるのをぐっとこらえて探しましたとさ....





スポンサーブースで配っている粗品の質が高すぎる!!
モバイル充電器やTシャツまで配っているところがありましたよ!

YAT さんに久々にあってまずは一言、「他の人が壺セッションやってますよ!」でした。何?って人は「YAT 壺」で検索してみてね (^^;(本人の名誉のために一言、真に受けないでください、よく知る仲間達の冗談ツイートです)




ランチチケットは売り切れたらごめんという配布方法なので早速ゲット!

ネットが接続できないのが痛かった。WEB認証のようですが、それが通らない。おそらくコネクション数がオーバーしたのでしょう。仕方なしに手持ちの Wi-Fi を使ってみるも電波競合でおそすぎる〜。

開会挨拶




実行委員長からの挨拶。日本でこれまで開催された WordCamp は 8つ!
東京は横浜と合わせて10回目だそうな。

さて以下のセッションはいつもどおり、発表された内容、発言を筆者の理解の元、速記したものです。#や→ は筆者のコメントになります。そのため、筆者の理解がおかしくて発表者の意図しない内容になってしまうことがあるかもしれません。

2017年9月9日土曜日

【備忘録】WordPress の カスタムフィールドの日付で、日別アーカイブを生成するには

WordPress.org 日本語フォーラムで
という質問があり、実際に試して回答しました。
これについての情報が見当たらなかったので、ここで備忘録としてメモしておきます。どういう考えて修正してうまくいったのかも書き出しておきます。SQL文の勉強になるかもですよ! それに筆者も、またどこかで使えるかもしれませんので、残しておくのは役立ちます。

やりたいこと


記事のアーカイブを、各記事に設置した カスタムフィールド(date_field)に沿って、日別アーカイブ表示したいというもの

2017/09/02 (1)
2017/08/19 (2)
2017/07/02 (3)

とかそういう感じに出すってことです。
そして日付をクリックしたら、カスタムフィールド(date_field)の日付が一致したものの一覧がでるということですね。


がちょうど年月のアーカイブができるので、これに日をたせればできるんじゃない?ってことで実際にやってみました。

前提


管理ダッシュボード > 設定 > パーマリンク
で投稿に対して、日付(年月日)が付与されるようにしてください。



利用方法


Step 1. テーマの functions.php に下記のソースコードを追加


ソースコード:https://ideone.com/BavQDi

Step 2. 表示するコードを追加(例  index.php)


ここでは説明のために デフォルトテーマ「Twenty Seventeen」の index.php に書き込み、トップページの記事の一番上に表示するようにします。


下記のコードを図のように if ( have_posts() ) : の下に追加してみてください。

my_get_year_archives( array(
'date_field' => 'date_field',
) );




そうすればトップページに日付一覧が降順に表示されるはずです。

【WordPress】カスタムフィールドの日付でカスタム投稿の年月別アーカイブ(pronet)では、カスタムフィールド(date_field)は、YYYY/MM/DD (2017/07/02)を元にしていました。このあたりはいろいろ変更できます。
さて備忘録なので、実際にどういう変更をしたのかも説明しておきます。

変更点


変更1)カスタムフィールドの値から 年月だけでなく 日も取り出すSQL文に書き換える


$select = "SELECT SUBSTRING($field,1,4) AS `year`, SUBSTRING($field,6,2) AS `month`, SUBSTRING($field,9,2) AS `day`, count(p.ID) AS posts";

$query = "$select FROM $wpdb->posts AS p $join $where GROUP BY SUBSTRING($field,1,4), SUBSTRING($field,6,2), SUBSTRING($field,9,2) ORDER BY $field DESC $limit";


赤い部分の追加です。
YYYY/MM/DD 、1文字 = 1バイト(1バイト英数記号)と仮定すると、
  • 1,4 = 1文字目から4文字分(YYYY)
  • 6,2 = 6文字目から2文字分(MM)
ときたらもうわかりますよね。
  • 9,2 = 9文字目から2文字分(DD)
を付与すればよいということです。

※全角(日本語)のように 2017/08/19 とした場合に、SQLクエリの方でなんとかしたいなら、CATをつかうとよいようです。


変更2)HTMLコード出力に日データを追加


$url = add_query_arg( array( 'meta_key' => $date_field ), get_day_link( $arcresult->year, $arcresult->month, $arcresult->day) );

$text = sprintf( '%d', $arcresult->year ).'/'.sprintf( '%02d', $arcresult->month ).'/'.sprintf( '%02d', $arcresult->day );

->year, ->month, ->day の year, month, day については、変更1)の AS `year`、 AS `month`、AS `day` に紐付いています。

<li><a href='https://demo.dev/2017/09/02/?meta_key=date_field'>2017/09/02</a>&nbsp;(1)</li>
<li><a href='https://demo.dev/2017/08/30/?meta_key=date_field'>2017/08/30</a>&nbsp;(1)</li>
<li><a href='https://demo.dev/2017/07/02/?meta_key=date_field'>2017/07/02</a>&nbsp;(1)</li>

のようなコードが出力されます。

変更3)WordPress の検索クエリのカスタマイズに日を追加


下記の赤文字の部分が追加分です。
WordPress での投稿日付は、年 = year、 月 = monthnum、日 = day に保存されます。
ので下記のような追加になります。

function my_pre_get_posts( $query ) {
    if ( $query->is_day ) {
        $meta_query = array(
            array( 
                'key'     => $query->get( 'meta_key' ),
                'value'   => $query->get( 'year'     ).'/'.sprintf('%02d', $query->get( 'monthnum'     )).'/'.sprintf('%02d', $query->get( 'day'     )),
                'compare' => 'LIKE'
            ),
        );
        $query->set( 'meta_query' , $meta_query );
        $query->set( 'year'             , ''          ); 
        $query->set( 'monthnum'   , ''          );
        $query->set( 'day'   , ''          );
        $query->set( 'date'       , ''          );
        $query->set( 'meta_key'   , ''          );
        $query->set( 'post_type'  , 'post');
    }
}

2017.9.9 @kimipooh

2017年9月3日日曜日

「REST祭 - WordBench大阪&京都&長野@さくらインターネット大阪本社」に参加して #wordbench #wb_rest

今回は遠隔会議(Google Hangouts)を使った三拠点同時開催。
筆者は WordBench大阪(第67回)会場である、さくらインターネット大阪本社へ訪れました。



グランフロント大阪タワーAの35階から眺める景色はなかなかいい感じですね!

プログラム

個人的には「WordPress ログインにVoice Overな2段階認証をつけてみる」あたりに興味ありですが、そろそろ REST API についても詳しくなりたいなぁと思って参加しました。

以下、発表された内容を筆者なりの解釈をして速記したメモです。
筆者自体のコメントは # を付けます。

2017年9月1日金曜日

WordPress 公式プラグインに PHP 対応バージョンを表記できるように(でもまだ必須じゃない)


まだ単なる表記だけのようですが、そのうち必須になる流れなのかなと思います。
現状 PHP7 以降しか使えない三項演算子「??」が使いたくてウズウズしていたので、必須になったら気兼ねなく使えそうですね!




書き方


WordPress公式プラグインリポジトリが対応PHPバージョンの表記に対応(@高橋 文樹 氏)

などに詳しく説明されていますが、筆者自身への備忘録のためここでも説明しておきます。

readme.txt に「Required PHP: バージョン」を追加せよ!
ってことですね。実際には下記のような感じです。
このプラグインは PHP 5.3 以降(三項演算子 ?: 使っているので)が必須ですが、PHPのサポート状況を考えることとテスト環境が PHP 5.6.x と 7.0.x と 7.1.x なので、表記するなら PHP5.6 からかなぁと。




これが Required at least (WordPress のバージョン)のようにインストール時の必須項目になったら、三項演算子「??」をつかいまくってやる!!


と密かに思っているのでした。
ちょうど、 PHP カンファレンス 関西 2017 で三項演算子についてまともに話を聞いて、それから三項演算子ファンになってしまったのでした。ただ PHP 5.3や 5.6では ?? が使えないのですよね。

もし $hoge["foo"] が確実に存在するなら、
$hoge_foo = $hoge["foo"] ? $hoge["foo"] : "none";


$hoge_foo = $hoge["foo"] ?:  "none";

とかけるのだけど、存在しない場合があるなら未定義エラーになります。
ので、下記のように書かざるをえないわけですが、

$hoge_foo = isset($hoge["foo"]) ? $hoge["foo"] : "none";

PHP7から実装された ?? を使えば、

$hoge_foo = $hoge["foo"]) ?? "none";
とスマートになるわけですよね。

そんなわけで、「Required PHP: バージョン」が必須になる日が待ち遠しいのでした。

2017年9月1日 @kimipooh

2017年8月30日水曜日

WordPress プラグイン 「List View for Posts」を公式プラグインで公開! #wordpress #plugin

カスタム投稿、投稿、固定ページ、ついでに The Event CalendarのイベントをWPMLプラグインに対応しながら一覧表示するショートコードが使えるようになるプラグイン。もちろんどれを一覧表示に含めるかは設定できます。一覧表示プラグインはいくつかありましたが、一年以上更新されていないものもあり、特にWPMLという特殊なものが入っていてややこしいので必要に駆られて作っちゃいました。

公式プラグイン




ドキュメント


となります。ドキュメントにかけることは全部書いたので、あとは適当に触ってもらったら使えるかなと思います。

TiPS


出力されたHTMLを表示したら、見栄えがわるんだけど?


出力コードは、CSSでデザイン・レイアウト変更できるようにしています。
見栄えに関するCSSコードは一切入っていません。筆者はデザイン力0なので、そのあたりのフォローはしません。そのCSS部分は、テンプレート側のCSSに追加するなどして調整してください。

class の接頭文字を変更してみよう


まぁここはちょっと譲れないところがありますよね。
デフォルトは、 list-view-posts_◯◯ って class が各項目に付きますが、ここの list-view-posts を変更できます。
  • [list-view-posts  html_tag="hogehoge"] 
ってすると、 hogehoge_◯◯ になります。

投稿全部とカスタム投稿(news と faq)を一覧に載せたいんだけど?)


まぁよくあるパターンかと思います。
  • [list-view-posts  post_type="post,news,faq"]
です。基本は降順にソートされて作成日時順に並びます。

予定など未来の記事を載せたいんだけど?


メンテナンス予定などは一番トップに出すために、公開日時をメンテナンス日にして予約投稿を解除するなんて設定をして公開してませんか。そういった場合にでも
  • [list-view-posts  post_status="publish,future"]
で公開済みに加えて、予約済みの記事も一覧表示の対象にします。
これでメンテナンス日の一覧表示もばっちりです。

カテゴリー表示したいんだけど?



上図のように、記事のカテゴリー(お知らせ とか)ごとに色を変えるなどして見せるのはよくやってるサイトありますよね。大丈夫できます。
  • [list-view-posts enable_view_category="true"]
特定の記事に複数のカテゴリーが設定されると、一番最初に取得したカテゴリーを表示します。

別途タクソノミーを追加設定しているけど、それもカテゴリー表示できるの?


はいできます。
種類(追加のタクソノミー):type

をカテゴリー表示に加えたい場合には、既存のカテゴリー(投稿):categoryを加えて次のように記述します。

  • [list-view-posts enable_view_category="true"  category_taxonomy="category,type"]

カテゴリー自体を複数設定(タクソノミー設定)している場合には、それぞれのカテゴリーで指定した最初のカテゴリーを表示します。上図の「お知らせ」のような分類分けがタクソノミー設定しただけ増える可能性があるってことですね(まぁ記事にチェックした場合のみですけど)

どのカスタム投稿の記事か知りたいんだけど?


わかります。複数のカスタム投稿を纏めて一覧にした場合にはややこしいですよね。
できます。
  • [list-view-posts enable_view_post_type="true"]
です。これでカスタム投稿のみ上図「お知らせ」の分類のところに、「カスタム投稿名」が追加されます。

パスワード保護された記事が一覧に出てこないんだけど?


デフォルトでは非表示になっています。
表示したい場合には、次のようにします。
  • [list-view-posts enable_password_protected_post="true"]


ページ送りってできるの?


ページ送りのHTML出力自体はサポートしていませんが、30〜50、50〜70など特定の項目の一覧を出すことができます。
  • [list-view-posts max_items=50  page=1]   =  1〜50
  • [list-view-posts max_items=50  page=2]   =  51〜100
のように、 ($page - 1) * $max_items + 1 〜    $page * $max_items のデータがとれます。これをテンプレートのループで使えば、いけるんじゃない?って感じです。

出力されるHTMLコードを変更したいんだけど?


デフォルトでは、4つのテンプレートが用意されています。
  • [list-view-posts  html_tag="li"]  = <li><span> 系
  • [list-view-posts  html_tag="p"]  = <p><span> 系
  • [list-view-posts  html_tag="dd"]  = <dd><span> 系
  • [list-view-posts  html_tag="pli"]  = <li><p><span></span></p> 系
まぁでも自分のサイトに合わせて変更したいですよね!
そのときにはフックが使えます。
詳しくはドキュメントの「フックの使い方」に事例とサンプルコードを載せたので参考にしてみてください。

2017年8月30日 @kimipooh


Google+ Badge