blog

リブライズの書籍データをWordPressで表示するプラグインを作りました

すべての本棚を図書館に

リブライズの書籍データを公開されているAPIで取得してリスト表示するWordPressプラグインを作りました。

 


 GitHubでWordPressプラグイン公開してます

Mt8 librize Book Listです。リブライズAPIの詳細ドキュメントが見つからなく、この先も使えるかが怪しいので公式ディレクトリへの掲載は保留しています。

 


 インストール方法

GitHubからダウンロードしてWordPressプラグインとしてインストール、有効化するとショートコードでリスト表示が可能になります。

スタイルはCSSでいい感じに調整してください。

 


ショートコード例

※例はOpen Space DEP. Motomachi Kobeブックスポットです。

[librize-book-list id=1239]

idにリブライズの場所IDを設定します。

 

※リブライズの場所IDの調べ方は、ブックスポットの設定編集時のURLから分かります。DEP.の場合以下のようになっています。

https://librize.com/places/1239/edit

 


その他のパラメータ

パラメータ名 内容 初期値 必須
id 場所ID
limit 取得件数 5
wrap ラップするタグ div
wrap_class ラップするタグのCSSクラス mt8lbl_book_list
no_title タイトルを表示しない false
random ランダム表示 false
link リブライズにリンクする true
image_size 画像サイズ(横) 75

 

[WordCamp Kansai 2015ふりかえり]当日スタッフ・ハンズオン世話人・スポンサーとして参加してきました。&プラグイン作りました

WordCamp Kansai 2015 Get Involved ―進化を続ける未来に出会おう―

2015年7月25日・26日のWordCamp Kansai 2015に当日スタッフ・コードを書かずに完成!コーポレートサイト作成ハンズオン世話人・スポンサーとして参加してきました。

3回目のWordCamp参加でした。

セッションを聞きに行ける時間が多かったので、参加者としても満足できました。


 

参加したセッション

1日目

コードを書かずに完成!コーポレートサイト作成ハンズオン

世話人として参加しました。

このセッションではコード(HTML・CSS・javascript・PHP)を書かずに管理画面の操作からのみでコーポレートサイトの機能を実装してみる。というチャレンジングな企画でした。

事前申し込みは満員御礼。当日受付もパンパン。

期待感がとても伝わってきてドキドキでした。

3名の参加者様に対して世話人1名で、声も通りやすく質問もしやすい空気が提供できたのではと思っています。

「この島は最速で完成を目指します」と宣言し、宣言通り30分時間を残して最後にじっくり質問タイムを取れました。

このあたりはハンズオンチームの皆さんと事前打ち合わせをしっかりしておいてよかったなーと思いました。

懇親会

ビール片手にいろんな方とお話をしようと歩き回ってみました。

WordBenchでお会いする方にもたくさん会えて楽しかったです。


 

2日目

地域活動におけるソーシャルの活用

「ワードプレスの”わ”の字も出てこないかもしれない」から始まったセッション。

地域活性化への取り組みという難しい問題でしたが、坂野さんのやわらかく力強い声に引き込まれるセッションでした。

また、質疑応答で「なぜWordPressを採用したのか?」という問いに対し、「WordPressだと、ちょっと困っても聞ける人が多いのがいい」というのには納得しました。あたらめてWordPressの広がりを感じました。

 

HHVM + Hack によるWordPressの超高速化

Facebook社開発のPHP実行環境「HHVM」。同じくFacebook社開発のPHP互換言語の「Hack」を用いてWordPressを高速化する、という内容でした。

まだ研究中とのことでしたが、VCCWのubuntuサポートブランチからだと簡単に導入できるということを聞いたので個人的に試してみたいと思います!

 

攻撃者からみたWordPressセキュリティ

さくらのビアバッシュの時にお話されていた内容のバージョンアップ版でした。

WordPress+セキュリティネタは最近取り上げられることが多いので、気になるセッションの1つでした。

具体的な例はなかなか出せないこともあったようですが、今後ポータルを運営して情報の共有を考えられているとこのとで、楽しみです!

 

Why WordPress Contributions Drive us to the Road of Innovation / WordPressへの貢献がイノベーションに繋がる理由

デジタルキューブ Kelさんのセッションでした。

デジタルキューブにジョインする前の経歴や、WordCampに初めて参加したときのことなど、「WordPressへの貢献」が今そして・未来につながっていくという素晴らしいお話でした。

 

Going Global: Introduction & Benefits of Multilingual WooCommerce using WPML Plugin / グローバルに行こう!WPML を利用した多言語 WooCommerce サイト構築の方法とメリット

WordPressの多言語プラグイン「WPML」のサポートをされているMaciejさんのセッションでした。

世界的にみても日本語のWebサイトは決して少なくないが、やはり英語がダントツで多い。また、海外から日本にきた英語圏の人がスマホ等で検索をすると、当然、英語圏版Googleからの検索となるので英語サイトをはじめ、多言語でサイトを運営することのビジネスチャンスについてのお話が印象的でした。


 

コントリビューターを探せ!

DSC02891

当日参加型企画の「コントリビューターを探せ!〜Contributor Hunt !〜」にも参加させて頂いて、初めましての方とお話する機会が持てたのが楽しかったです。

コアコントリビューター・プラグインデベロッパーのバッジをつけて歩き回っておりました。

コントリビューターがすごく多かったようで、景品が足りないぐらいだったみたいですね。

コアコントリビューターにクレジットして頂いたのはWordPress 3.8 “Parker”の2013年12月でした。もの凄く嬉しかったのをよく覚えています。


 

Mt8 Post Share

WordPress投稿をSNSシェアするプラグインを公開しました。

WordCampの前日に申請・当日朝に承認されてアップしました笑。

Mt8 Post Shareです。

機能は単純で、投稿画面にSNSシェアボタンを表示する。だけです。

以下のようなケースでの使用すると便利だと思います。

  • WordPressへの投稿時にFacebookやTwitterに連携したい
  • 連携時に定型文ではなく、少しコメントを書き込みたい
  • 投稿後にいちいち各SNSサイトに移動するのは面倒

Jetpack by WordPress.comの、”パブリサイズ共有”とうまく組み合わせると以下のようなケースでもいい感じに運用できるかと思います。

  • お店のSNSアカウント・SNSページはJetpackのパブリサイズ共有で自動連携
  • 個人のSNSアカウントにはMt8 Post Shareでコメント付きで連携

 

Facebook、Twitterの公式シェア方法でアカウント切り替えもできるので、便利じゃないかなーと思ってます。


 

 

プラグイン系のハンズオンがとにかくアツかった

何がアツかったかは、各ハンズオンの世話人のお名前を見れば分かりますよね。

めっちゃ参加したかったWordPress プラグイン作成のハンズオンと、WordPressで行う継続的インテグレーションのススメの資料が公開されたら熟読して今後、自分の開発にも取り入れていきたいと思います。

 

 

MW WP Formでスマホから完了メッセージが表示されないときに確認したこと

設置・運用しているフォームでスマホで操作すると完了メッセージが表示されずに空のフォームが表示される、ということがありました。

フォーラムにも似たような書き込みが。「スマホでの閲覧時、MW WP FORMの完了画面に行かない

具体的な解決に至っているようには見えないので、手元にあるいくつかのスマホ

で確認してみました。

すると、iPhone5+Chromeでたまに同様の現象が確認できました。

固定ページに貼付けていたのですが、送信ボタン押下で空フォームが表示されるまでがあまりに早い。

ああこれは、WP Super Cacheが頑張ってくれたのかと。

 

プラグインのよくある質問にも書いてあったのでこのことかと思われます。

「確認画面、管理画面に正しく遷移しないが、ログインしている状態であれば正しく動作する。」

※”管理画面”じゃなくて、”完了画面”かと思います。

はい、なのでWP Super Cacheの設定画面より「ここにキャッシュしないようにするページの文字列 (ファイル名ではなく) を追加します。・・・」の部分に設置ページのスラッグを入れておきました。これでしばらく様子をみてみたいと思います。

 

とはいえ、この現象が100%発生するわけでもないのが気になります。

 

WordPressで新着情報表示に最適なプラグイン「What’s New Generator」

WordPressでコーポレートサイトなどを構築する際に、よく要件に含まれるのが新着表示ですね。

更新日付・タイトルをリスト形式で並べるやつです。

get_postsquery_postsなどのテンプレート関数を使うか、pre_get_postsフィルターで処理すれば実装できますし、そういう実装をされているサイトが多いかと思います。

そんな新着表示をショートコードで実装可能なプラグインがあります。

それが、「What’s New Generator」です。

プラグインをインストールして、設定 – What’s New設定より設定します。

設定画面はこんな感じ。

whats-new

 

ショートコードは[showwhatsnew]です。

 

特定カテゴリだけ表示したい場合はスラッグ入力すればOKです。

また、NEW!マークの表示をサポートしていたり、日付のフォーマットも決めれるのが嬉しいですね。

 

ただ、WordPressで構築されたコーポレートサイトや個人サイト等で最新の新着情報が3年前・・・のようなサイトは結構見かけるので

あまり更新のないサイトならそもそも新着情報が本当に必要なのかを考えた方がよいかもしれません。

 

 

WordPressで画像キャプションを表示しない

WordPressの投稿エディタに画像添付時のキャプション表示をしたくない

 

WordPressで写真などのJPEG画像をメディアにアップして本文に挿入すると、画像の下にキャプション(文字)が表示されることがあります。

(今のところオリンパスで確認)

スクリーンショット 2015-07-03 10.03.36

こんな感じ。「OLYMPUS DIGITAL CAMERA」って出ます。

WordPressが画像保存時に、Exifなどの情報を参照してセットしているものをと思われますが、いちいち消すのも面倒です。

 

このキャプションを表示させないようにするには”disable_captions”フィルターにtrueを返せばよいです。

/*画像キャプションを無効化する*/
 add_filter( 'disable_captions', '__return_true' );

上記コードを、テーマの”funcitons.php”に貼り付けてください。

※このフィルターによるキャプションの無効化だとすべてのキャプションが使えなくなるので注意が必要です。

 

なお、この「OLYMPUS DIGITAL CAMERA」キャプションの件に関してはWordPressコアのチケット(課題管理)にもありました。

Image Uploads automatically puts “Olympus Digital Camera” as caption

 

WordPress 4.3 (2015/8/18)でのリリースに上記フィルターがadmin-filters.phpに組み込まれる流れだったようですが、チケットのステータスがFuture Releaseに変わりました。

(”OLYMPUS DIGITAL CAMERA”だったらキャプション表示にしない、というパッチはさすがに強引・・・?)

コア側ももう少し様子を見てみようといった感じでしょうか。

WordPressサイト内検索で濁点あり/なしがうまく検索できない

WordPressのサイト内検索で、「ワードプレス」って検索したら「ワートプレス」も引っかかります。(例えが悪い)

A.11. MySQL 5.6 FAQ: MySQL の中国語、日本語、および韓国語の文字セット

この辺りを読んでおこうと思う。

/*LIKEを*/
 SELECT * FROM wp_posts WHERE post_title LIKE '%ワードプレス%' AND post_type = 'post'

/*LIKE BINARYに*/
 SELECT * FROM wp_posts WHERE post_title LIKE BINARY '%ワードプレス%' AND post_type = 'post'

WordPressテーマ内に書くなら、こんな感じか。

 

function my_posts_where( $where, $obj ) {
     if ( $obj->is_search ) {
         $where = str_replace( 'LIKE', 'LIKE BINARY', $where );
     }
     return $where;
 }
 add_filter( 'posts_where', 'my_posts_where', 10, 2 );

 

他に方法あったら教えて下さい〜

MW WP Form の”対応状況”に応じて問い合わせ一覧の行背景色を変える

MW WP Form !

最近WordPressでお問い合わせフォームを設置する場合、MW WP Formをよく使います。

Contact Form 7と同じく、フォーム設定をして指定のショートコードを固定ページ等に貼付けるスタイルのお問い合わせフォームプラグインです。


 

プラグインサポートページあり

フォームの設定方法についてプラグイン作者様が公開して下さっているのがとてもありがたいですね!MW WP Form の使い方 | モンキーレンチ


 

CRM的な使い方できます

MW WP Formをよく使うのは、プラグイン単体でDB保存・対応状況管理ができるところが便利だからです。(設定は必要)

また、問い合わせ状況をグラフ化することもできます。

対応状況管理や、分析。MW WP Formは簡易的なCRMとしても使えますね!


 

問い合わせ一覧を確認

問い合わせ内容をDB保存するようにすると、フォームより送信された問い合わせ内容が「管理画面 -> MW WP Form -> 問い合わせデータ」 で確認できるようになります。

mw

「登録日時」「対応状況」はMW WP Formが追加してくれる


 

問い合わせ担当者が一目で対応状況を確認できないか?

問い合わせが多いサイトの場合、データが増えるにつれて対応忘れが生じてしまうケースがありました。

対応状況が一目で分かる運用はできないか?と考えました。


 

対応状況に応じてそれぞれの行背景色を変えるのはどうか?

投稿や固定ページに関してはColored Admin Post Listを使って「公開済み」「下書き」「レビュー待ち」「非公開」などの投稿ステータスを一目で分かるようにすることができます。

これが使えるかなと思ったのですが、MW WP Formの問い合わせデータには対応させることができません。

MW WP Formの問い合わせデータの”対応状況”は投稿メタ情報として実装されています。

//meta_key = "_mw-wp-form_data"
 array(2) {
 ["response_status"] => string(13) "not-supported"
 ["memo"]=> string(0) ""
 }

Colored Admin Post Listは、投稿一覧のテーブルタグ(tabel)のテーブル行(tr)のクラスに付与される”status-“で始まる投稿ステータスに対してcssで色を付けていました。

この”status-“で始まる投稿ステータスをcssクラスとして付与しているのは、WP_List_Tableクラスを継承したWP_Posts_List_Tableクラスのsingle_rowメソッドでした。

/wp-admin/includes/class-wp-posts-list-table.php


get_post_classメソッドを呼び出しているのでpost_classフィールターで処理すればいけそう。


 

ということで作りました。

functions.phpに貼付けるか、オリジナルプラグインに貼付ければ

mw2

こんな感じで色が変わります。


 

処理内容

MW WP Formの対応状況(投稿メタ:_mw-wp-form_data ->  response_status )に応じて、”stats-“を書き換える。

それだけです。データを更新するわけではないです。

もっといい方法あったら教えて下さい!


 

対応表

MW WP Formの”対応状況” WordPressの投稿ステータス
未対応 下書き
保留 レビュー待ち
対応済み 公開済み

 

あとは、Colored Admin Post Listの設定画面でいい感じに色を調整してみて下さい。

mw3

 

問い合わせ対応忘れでの機会損失なんてバカらしいですもんね。

運用をしっかり考えてサイト制作をしましょー

FC2ブログからWordPressへ引っ越したらコメント文が変?

FC2ブログからWordPressへのお引っ越し

なぜがFC2ブログからの引っ越しのお話が多くあります。なぜか。。。

FC2ブログからWordPressへの引っ越しの方法についてはいろいろ紹介されているのでここではあえて言及しません。

 

とりあえずインポート

FC2ブログから記事バックアップとしてダウンロードしたファイルはMT形式なので、WordPressのインポートツールでWordPressにインポートすることはできました。

記事内の画像URLや、別記事へのリンク書き換え等を済ましてホッとしていたら、コメントが何やらおかしいことに気付きました。

SECRET: 0
 PASS: ********************************
 あああああああああああああああああああ
 あああああああああああああああああああ
 あああああああああああああああああああ

管理者だけに表示を許可する・削除用パスワード

スクリーンショット 2015-05-21 11.29.20

 

なるほど、そういう機能があるのか。と関心していたらこのPtivate(管理者にだけ表示を許可する)って反映されていないんですね。

コメントが数万件あるブログだったのでこれは困りました。

というわけで作りました

Gistから落として、「fc2_comment_clean_4_wordpress.php」WordPressルートフォルダに置いて【あなたのWordPress/fc2_comment_clean_4_wordpress.php】にアクセスして実行下さい。

※データベースのバックアップをしてから実行しましょう。

※終わったら必ず消して下さい。

※自己責任で実行して下さい。

※よく分からない人は誰かに頼みましょう。お仕事、お待ちしてます。

実行内容

  • プライベート設定されているコメントは「承認待ち」にします
  • コメントの公開状態(SECRET: *)、パスワードのハッシュ値(PASS: ******)を消します

これで、管理者にだけ表示するコメントでやり取りしていた内容がWordPressに引っ越し後にだだ漏れになることを防げますね!

Laravelエキスパート養成読本を読みました

Laravel始めたい

PHPのフレームワークの「Laravel」について勉強したいと思い『Laravelエキスパート養成読本』を購入しました。

 

保守中システムのために。。

現在、携わらせて頂いているシステムは開発元会社の独自フレームワークで構築されており、開発元会社とは連絡が付かない状況で機能追加などの開発効率が悪く頭を悩ませています。(独自フレームワークが悪い、というわけではないです。)

早速読んでいく

Laravelについての紹介に続き、サンプルアプリケーションのソースコードに沿ってLaravelでの開発について学ぶ章があったので、早速手環境を準備します。

 

環境構築

ローカル(Mac Book Air)にLaravel環境を構築するにあたり、書籍ではいろいろな環境が紹介されていたのですが、特に指定の環境がなかったのでVirtualBox + Vagrantで構築することにしました。

サンプルアプリケーションは、Laravel4で実装されているとのことなのでその環境に適したものはないかと探していたらドンピシャでLaravel4-Vagrantを見つけました。

ありがたいことに日本語化して下さっているリポジトリも見つけました。

さっそく作業していきます。

Laravel4-Vagrantをクローン

$ git clone git://github.com/HiroKws/Laravel4-Vagrant.git

クローンしたディレクトリに移動

$ cd Laravel4-Vagrant/

仮想マシン起動

$ vagrant up

立ち上がらない

 Bringing machine 'laravel4' up with 'virtualbox' provider...
 ==> laravel4: Box 'precise32' could not be found. Attempting to find and install...
 laravel4: Box Provider: virtualbox
 laravel4: Box Version: >= 0
 ==> laravel4: Adding box 'precise32' (v0) for provider: virtualbox
 laravel4: Downloading: http://files.vagrantup.com/precise32.box
 ==> laravel4: Successfully added box 'precise32' (v0) for 'virtualbox'!
 There are errors in the configuration of this machine. Please fix
 the following errors and try again:

vm:
 * The 'extra' flag on synced folders is now 'mount_options'

Vagrantのバージョン1.3.5からは同期フォルダのオプションはextraじゃなくてmount_optionにするみたい。

参考:Vagrant1.3.5ではconfig.vm.synced_folderのパーミッションをmount_optionsで設定する

ということで、ForkしてきてVagrantfileを書き換えました

 - lv4_config.vm.share_folder("www", "/var/www", "./www", :extra => 'dmode=777,fmode=777')
 + lv4_config.vm.share_folder("www", "/var/www", "./www", mount_options: ["dmode=777", "fmode=777"])

もう一度!仮想マシン起動

$ vagrant up

仮想マシン無事起動した。

サンプルアプリケーションをダウンロード

https://github.com/jumilla/l4-sample-todo/archive/master.zip

解凍して、中身を仮想マシンのWebルートにコピー

/var/www

仮想マシンにログイン

$ vagrant ssh

Webルートに移動

$ cd /var/www/

コンポーザーから依存パッケージを取得

$ sudo composer update

DBの接続情報を変更する

/var/www/app/config/database.php
'mysql' => array(
     'driver' => 'mysql',
     'host' => 'localhost:55556',
     'database' => 'database',
     'username' => 'root',
     'password' => '',
     'charset' => 'utf8',
     'collation' => 'utf8_unicode_ci',
     'prefix' => '',
 ),

Laravel4-VagrantのDB接続情報と初期データベース「database」を記述しておいた。

サンプルアプリケーションが使うテーブルがないのでアルチザンでマイグレート

$ php artisan migrate

http://localhost:55555にアクセス

スクリーンショット 2015-05-14 18.29.48

ちゃんと表示されました!

さー続き読んでいきます。