STAFFBLOG スタッフブログ

WordPressの標準管理画面が変わるよ

井上武明
2018/11/13
閲覧所要時間:約4

どうも、職場のディスク上にはいつもカメラが置いてある井上です。

ちょうど1年前はオールドレンズに手を染めているとブログに書いていましたが、その後フィルムカメラの方にも手を出しました。
毎月フィルム1本撮影するのが自分に課したノルマです。

管理画面が大きく変わるよWordPress 5.0

さて、ネット上のサイトの約3割で使われているというWordPressですが、その記事を書くエディタにはTinyMCE(タイニーエムシイイー)が長く使われてきました。
私がWordPressを使い始めた時には既に使われていたので、一体いつから使われているのか調査したところ、

2005年12月31日リリースの WordPress2.0
かれこれ約13年も使い続けられています。

ネットの世界で13年前と言えば、遥か昔の世界。
iPhoneやAndroidなどのスマートフォンは存在せず、インターネットといえばパソコンでやるのが当たり前の時代でした。

それほど長く使い続けられているものを変更するとやはり大変で、簡単には行きません。

例えるなら、今までキーボードで入力してたのをやめて、今後はフリック入力が標準にするよと言われるようなもの。
長くキーボード入力を続けている人ほど反発が強く、キーボードで入力しやすいようにしていた数々の工夫は一旦リセットされるような感じで、色々と反発がありました。
(ちなみに私も未だスマホのフリック入力が出来ません・・・)

それでも新しい時代に合わせた変革は避けることは出来ないと判断し、WordPressは2016年12月にGutenberg(グーテンベルク)という新しいエディタに変わるという方針を示し、実際に2017年7月にはテスト用プラグインがリリースされ、長い時間をかけて準備が進められてきました。


そしてついに11月19日にリリース!っと思いきや・・・

先週末にWordPress 5.0のリリース日は11月27日に延期すると案内されました。
11月27日も確定していないので、さらに延期となった場合は2019年1月22日まで伸びる予定です。

WordPress 5.0になったら、どうしたら良いの?

Classicエディタという追加プラグインをインストールすることで今までどおりTinyMCEが利用できます。
また、Gutenbergがメインエディタになった場合でも、それまでのデータが一括でGutenberg用のデータに更新される訳ではないようなので必要以上の心配はありません。
「旧エディタ」として今までどおりのエディタを使う事は出来るようです。

将来的にどこまでTinyMCEがサポートされるのかについてはまだ決定しておらず、現在の見込みは最低2021年末までを見込みにしようかと議論が始まったばかりのようです。

既存のWordPressはどう対応するの?

  1. 正式リリース前のために仕様が確定していないこと。
  2. Classicエディタとして現在のエディタを使い続ける方法が公式に用意されていること。
  3. 各サイト用にカスタマイズした部分が多いため、未検証のまま一律に変更をする事が出来ない。

以上の3点からClassicエディタを継続使用するプラグインを順次インストールしてまいりました。
セキュリティリスクによる緊急的なアップデートではないので、サイトの安定性を優先すべきであるという判断になります。

将来的にはGutenbergをベースにした管理画面に移管する必要がありますが、目新しさを優先して逆に使い勝手が悪くなるようではいけないので、サイトとしての目的を出来るだけ効率的に実現することを最優先に、順次対応していきたいと考えています。

普遍的な使いやすさの大切さ

自分がフィルム撮影に使っているのはニコンF3という1980年から2000年まで20年間もロングセールされていたカメラです。

最新のデジタルカメラと違って、どんな環境でも誰でもキレイな写真を簡単に撮影して、その場で撮影した写真を確認出来るわけではありませんが、「こんな風な写真を撮りたいから、こういう設定に」と思った時にストレスなく設定を変更して撮影させてくれます。

カメラと同じで、サイトの管理画面も必要な機能をしっかりと把握して使いやすいものは古くても使いやすいものです。

何でも出来る代わりに画面いっぱいのボタンが並び、何回もクリックしてやっと思った設定が出来るではなく、
シンプルで必要な機能に出来るだけ簡易にアクセスでき、必要な場合は難しい設定でも対応が出来る柔軟性を持つ。

そんな使いやすさを目指したいと思っています。

最後にGutenbergを実際に使ってみよう

WordPressの日本語公式サイト内にはGutenbergを実際に触れるデモ用ページが用意されていますので、気になる方はぜひ一度お試しを。

新しい Gutenberg 編集エクスペリエンス
https://ja.wordpress.org/gutenberg/

WordPress 4.9.6から追加されたGDPR対応機能を実際に試してみた

井上武明
2018/05/23
閲覧所要時間:約7

欧州連合 (EU) のGDPR(General Data Protection Regulation)がいよいよ2018年5月25日に施行とですが、もちろんご存知ですよね。

GDPRへの対応についてはこの1ヶ月程度の間に様々なWEBサービスから「利用規約の変更」などのメールが届いて来ているかと思います。

GDPR(General Data Protection Regulation)はEUのデータ保護に関する法律なので、日本は無関係かなと思いきや、その影響範囲と「 最大で2000万ユーロ(約26億円)または全世界の売上高の4%のうち、いずれか大きい方 」 という高額な制裁金のインパクトから週末の報道特集などで話題になっているかもしれません。

EUの法律なので当然日本語での詳しい説明は少ないのですが、Wikipediaによると「 初回かつ意図的でない違反の場合は、書面による警告 」とあるので真摯に対応する準備を用意していれば法律施行後でも大丈夫かと思いますが、一応確認はされてください。

GDPRはEUの法律ですが、日本でも個人情報保護に関する法律は年々厳しくなる方向で改正されてきていますので事前準備として無駄にはならないと思います。

WordPressのGDPR対応

さて、世界のCMSの約6割が利用していると言われるWordPressも当然このGDPRへの対応を行いました。
詳しくはWordPressの日本語公式ブログ 「WordPress 4.9.6 プライバシー・メンテナンスリリース」(https://ja.wordpress.org/2018/05/19/wordpress-4-9-6-privacy-and-maintenance-release/) を参考いただくとして、実際に必要になった時に備えてテスト用WordPressを用意しで試してみました。

まず、WordPress 4.9.6へアップデート


WordPress管理者権限ユーザーには「個人データとプライバシー」と言う通知が表示されたかと思います。
これは以下の内容についてのお知らせです。
・個人データをエクスポート(抽出)する機能と消去する機能が増えました
・プライバシーポリシーページについて設定するように促す

プライバシーポリシーページについて


追加された「プライバシー設定」というページは上の通りで、原則としてWordPress側はプライバシーポリシーを適切に設定するように促して、そのページがどの固定ページになるかを指定するだけにです。
プライバシーポリシーの内容については各サイト所有者が適切に作成し、定期的に見直しましょうとだけ案内されています。

重要なのは「定期的な見直し」という事で、意外と多くのサイトとが制作当時のままで見直されずに放置されていませんか。
この「個人情報の取扱い」に関してはWEBサイト上でだけではなく、その後の社内(または関連先)での利用実態まで含めた確認が本来必要になるので、制作会社に丸投げせずに一度しっかり社内確認した上で対応をオススメします。

個人データのエクスポートの流れ

GDPRでは個人から求められた場合は保存しているデータを提供するように求められています。
そのための手続きとして以下の様に依頼者とメールアドレスでのやり取りを通じた流れになっていました。


依頼者のメールアドレスを入力します。
このメールアドレスを受け取る機能はWordPress標準ではありませんので、現実的には各種メールフォームやE-mailでの依頼、電話等での依頼の場合はE-mailを別手段で確認した後になると思われます。


メールアドレスを入力して「リクエストを送信」すると「保留中」の状態になります。


リクエストしたメールアドレス宛に上記のようなE-mailが送信されるので、依頼者本人が確認用リンクから専用ページにアクセスしてもらうことになります。


確認用リンクにアクセスすると上記のようなページが表示されます。


WordPress管理画面上では「保留中」から「確認済み」の状態に変わり、次のステップとして「データをメールで送信」が可能になります。
(管理者用にダウンロードリンクも有るようです)


「データをメールで送信」をクリックするとメールアドレス宛に上記のようなE-mailが送信されます。
ファイルの保持期間と、そのダウンロード用リンク先のURLが記載されているので自分でアクセスしてデータを取得します。
ダウンロードファイルはHTML形式のファイルをZIP圧縮したもので、ファイル解凍する手間がありますが、検索エンジンなどから意図せず情報流出しないようにするなどの目的があるのだと思います。


ダウンロードしたZIPファイルを解凍して表示したHTMLファイルはこんな感じです。
テスト用なのでほとんど情報は入っていませんでした。


データ送信後は「完了」の状態になります。


個人データの消去の流れ

エクスポートと同じようにデータ消去の手続きも用意されていました。
消去もエクスポートと同じように依頼者とメールアドレスでのやり取りを通じた流れになっていました。


依頼者のメールアドレスを入力します。
このメールアドレスを受け取る機能はWordPress標準ではありませんので、現実的には各種メールフォームやE-mailでの依頼、電話等での依頼の場合はE-mailを別手段で確認した後になると思われます。


メールアドレスを入力して「リクエストを送信」すると「保留中」の状態になります。


リクエストしたメールアドレス宛に上記のようなE-mailが送信されるので、依頼者本人が確認用リンクから専用ページにアクセスしてもらうことになります。


確認用リンクにアクセスすると上記のようなページが表示されます。


WordPress管理画面上では「保留中」から「確認済み」の状態に変わり、次のステップとして「個人データの消去」が可能になります。


「個人データの消去」をクリックすると結果が下に表示されます。
ここでは該当する個人データが無かったので「見つかりませんでした」となりました。


削除後は「完了」の状態になります。


リクエストしたメールアドレス宛に上記のようなE-mailが送信されて、消去手続きが完了したことが伝えられます。

以上が、エクスポートとデータ削除の流れにです。
意外と簡単でした。


注意するポイント

ここまでは WordPress 4.9.6 で用意されたGDPR対応についです。
WordPressのバージョンによっては変更があったり、利用しているテーマやWEBサイトの作り方、サーバーの状態などで全く同じとは限りません。

また、これだけでは不足する場合が考えられます。

WordPress以外で社内に保存されている個人データ

依頼者としては同然これも対象になると考えられるので社内での適切なデータ管理が必要です。

WordPressのプラグインが保存したデータ

WordPress 4.9.6 が用意したGDPR対応についてはWordPress本体の機能として持つ部分に関してが対象です。
インストールしたプラグインによっては個別にデータベーステーブルを用意して保存している可能性が考えられ、それらの対応GDPR対応に関してはそれぞれのプラグイン製作者の対応次第です。
サーバーのデータベースに直接アクセスして調査することも可能ですが、かなり高度な作業になってしまいますので、セキュリティ面でも定期的に更新されているプラグインを利用することをオススメいたします。

APIなどの外部WEBサービスの利用

GoogleAnalyticsやSNS連携など、外部のWEBサービスをページ内に組み込んでいる場合、それらについても適切に把握して対応することが求められています。
このためにWEBサービス側もいろいろな準備や変更が必要となったために「利用規約変更」の案内メールが増えたことにつながっています。

まとめ

今回のGDPR(General Data Protection Regulation)も、以前に話題となった「個人情報保護法」も法律施行直後は大きなニュースになりますが、しばらくすると当たり前の事になって大きな混乱にはなっていません。
メディア側も大きく報道するのと同時に分かりやすい説明をしてくれると思いますので、無駄に恐れずに最初は知ることから初めましょう。

WordPressとカスタムフィールド製造業

井上武明
2017/11/14
閲覧所要時間:約6

こんにちは、2017年になってオールドレンズに手を染めている井上です。

私が使っているニコンの一眼レフは「不変のFマウント」などと呼ばれ、1959年発売のNikon Fから同じレンズの基本規格(マウント)が使われ続けられ、半世紀以上前のレンズが最新のデジタル一眼レフでも使える楽しさがあります。

まぁ、いろいろと制約がありますが、自分より年上のレンズで撮る楽しさもありますが、安く楽しめると言うのが一番ですね。
写真は1959年に発売されたFマウント最初のレンズNIKKOR-S Auto 5cm F2と、そのおまけで購入したNikomat FTn(1967年発売)で遊ぶ4歳のわが娘。レンズはチョットだけ改造して普段使っているデジタルの一眼レフでも使えるようになってます。

という事で今回はオールドレンズの魅力をたっぷり紹介・・・思っていたらWordPressの気になる記事があったので今回はカスタムフィールド製造業について。

カスタムフィールド製造業?

ウェブ制作など、興味のあることについてネット上に出ている情報はつねに収集しているんですが、9月末にとても面白いと感じる記事がありました。


いったんまとめよう。カスタムフィールド製造業とは……

  • 顧客に対してWordPressサイトの制作を提供する仕事を意味する
  • プログラミングにはそれほど詳しくなく、ACFやCustom Post Type UIなどを駆使してWordPressをカスタマイズする人が該当する
  • デザイン、Javascript、コンテンツライティングなどの他の強みがあまりなく、器用貧乏っぽい人ほど、この言葉に敏感に反応する
  • 大きなプロジェクトに年単位で関わり数千万の予算をもらうのではなく、50万から300万ぐらいのプロジェクトを忙しくこなしている人が、この言葉に敏感に反応する
    といった概念である。

出典:カスタムフィールド製造業ならびにWebアセンブラーという職業について – Capital P


カスタムフィールド製造業、まさに自分のことじゃないか(笑)

なぜカスタムフィールド製造業が必要とされているのか

WordPressとはウェブサイトの更新を行うためのプログラムのCMS(Contents Management System)の一つで、CMSが使われているサイトの59.8%、ウェブサイト全体の29.0%でも何らかの形で利用されていると言われる超メジャーなCMSです。

そのため書店でもWordPress関連書籍は非常に多く、

「WordPressを使えば専門的な知識がなくても、プロなみのWebサイトを作れます」

みたいなキャッチコピーの本が沢山あるので簡単そうに感じますが、そこはやはり「本を売るため」のセールスコピーなので専門知識ゼロの方でもストレス無く簡単に作れますと言えるほどは簡単ではないです。(ちなみに似たようなキャッチコピーは昔から多くのウェブ制作サービスで使われてます。)

「最新スマホのカメラを使えば専門的な知識がなくても、プロなみの写真を撮れます」

と言われて買ったスマートフォンの中の写真データ、プロ並みとはちょっと言えない気がしませんか。

例えば雑誌の表紙などで使われる写真
これは購買層や誌面の内容に合わせて一流のカメラマンが「構図」「光の方向」「色味」「ピント」などを考えて、何度も工夫し、調整して撮影した中から最高の1枚が使われます。

例えば修学旅行などで撮る集合写真
この場合もカメラマンがいろいろと指示を出して失敗がないように準備をして素早く何枚か撮影しますが、渡されるのはやはりカメラマンが選んだ最高の1枚だと思います。

これはウェブの世界も同じです。

重要な内容のページやトップページ
これは利用者が求めるものとサイト運営者が提供したい内容に合わせて「デザイン」「機能」などを考えて、何度も工夫し、調整して作成した最高の1ページを用意します。

会社概要や商品・サービスのページ
住所や価格などある程度決まった形式が必要とされ、一定以上のクオリティを維持しつつも商品やサービスの変更に合わせて速やかに更新する必要が出てきます。

前者は頻繁に変わることは少ないですが、後者は情報のクオリティよりも正確性と鮮度が大切で、更新のたびにカメラマンに来てもらって撮影するのは時間と費用がもったいない気がしますよね。

最低限のクオリティで失敗しない撮り方をカメラマンに教えてもらって、必要なカメラやライトを買って自分で撮れるようになりたいと思うかもしれません。
せっかく撮った最新商品と人気商品なら、入口横で目立つショーウィンドウを用意して自分でならべたくなりますよね。

ついでに手書きポップも添えると読んでもらえるかな。
という感じに「誰でも撮れるような撮影セット」「入口横のショーウィンドウのスペース」がウェブでも必要とされます。
それがCMS(Contents Management System)の本質であり、「カメラのシャッターを押すだけ」「ケースの決められた位置に置くだけ」のレベルにまで簡単にしてあげるのがWordPressの「カスタムフィールド製造業」の本質だと思えます。

さらに言えば
「ショーケースの商品の値札は必ず見えるように並べ方のルールを決めましょう」
「売れ残らないように夕方になったら値引きシールを貼りましょう」
「プレゼント企画なら当選者のお届け先の住所とか聞かなくて大丈夫ですか」
などなど、忘れたら大変な事柄をウェブでもしっかりサポートすることも実際にはカスタムフィールド製造業の大切な仕事だと思います。

ただ言われたとおりに物を作るだけではダメってことですね。

管理画面が大きく変わる予定のWordPress5.0

さて、もうすぐWordPress4.9がリリースされる予定ですが、その次のWordPress5.0では長年使われている管理画面のテキストエディタがTinyMCE(タイニーエムシイイー)からGutenberg(グーテンベルク)という全く新しいものに変わる予定だと聞いています。


Gutenbergのテキストエディタはまだまだ開発中なんですが、テスト用のプラグインとして提供されているので誰でも試してみることが出来できます。(日本語化はまだまだ先ですね)

今までは難しかった表組みや画面の分割、各種機能の埋め込みなども使いやすくなるようなので期待していますが、ツールが使いやすくなったとしても「カメラのシャッターを押すだけ」の簡単さで失敗がなく作れる訳ではないので、簡単に更新できるようにサポートをするためのカスタムフィールド製造業的なものは無くならないと思いますが変化に対応する準備は大変です。

テキストエディタを見直す方針が示されたのが2016年12月、Gutenbergの名称とテスト用プラグインが出てきたのが2017年7月とWordPressはすごいスピードで進化しようとしています。
なので独りではついて行くのは大変。

こういうときにも協力してウェブ制作にあたれる仲間ってありがたいです。

※先日の社員旅行の台湾写真、せっかくなので何枚かを無理やり使いました。(^^;

実際のWordPresssサイトの作り方について

井上武明
2017/02/09
閲覧所要時間:約8

フロンティアビジョンに入社してもう1年の井上です。
入社に合わせてウェブ制作環境をWindowsからMacに切り替えたので、今回のブログでは会社から貸与してもらっているMacBookPro13の使い勝手をレポートしようかなっと思っていたんですが・・・電源が入らなくなる故障が発生しました。

メーカーに修理に出したのですが、「電源が入り、チェックでも異常なしだったので戻します」とそのまま帰ってきてしまいました。
大丈夫かなぁっと思っていたらやはり再発。
2回目は前回修理から90日以内という事でロジックボード交換を無償交換。

2回とも金曜日に修理に発送して翌月曜には戻ってくるというAppleのサポートには感動しましたが、やはり故障中は作業効率がガタ落ちしてMacBookPro13の使いやすさを再認識することになりました。

あたりまえですが機械にも健康と寿命があります。
機械もデータもバックアップはしっかりしましょう。

心の傷は置いておいて、実は先日「WordPressの投稿と固定ページの違いってなんだっけ」と話が出ていたので今回はWordPress関連のお話です。

WordPressとは

WordPressとはCMS(コンテンツマネジメントシステム)の一つで、ウェブサイト上に管理画面を用意してお知らせやブログなどのページの中身を追加・修正するプログラムのことです。

WordPressの利用率はもの凄く高く、W3Techsの調査データによると今日現在でCMSのシェアが58.6%、ウェブサイト全体でも27.5%で使われています。
2位以降のCMSと比較してその利用率の差は圧倒的な状況ですね。
img3
上記図の元データ w3techs
https://w3techs.com/technologies/overview/content_management/all


色々な更新機能をウェブサイトに持たせる事ができて人気のWordPressは、その基本概念として1つのページを「投稿」「固定ページ」に分けて考えられています。

WordPressの投稿と固定ページの違い

WordPressは元々ブログ用に作られたプログラムで、ページの概念を時系列に並べる必要が有るか無いかに分けています。
img2
単純に説明すると以下のような感じです。
  • 「投稿」 ・・・ ブログのようにページが時系列に列べられて管理され、カテゴリーやタグなどで同じものを列べて表示させるアーカイブが用意できるページ。
  • 「固定ページ」 ・・・ 会社概要やお問い合わせなど、時系列に並べる必要が無く、メニューの決められた位置に固定させるようなページ。

ちょっと複雑ですが、公開後も増やしていくページの場合は「投稿」内容の修正を行うだけの場合は「固定ページ」と考えると分かりやすいのかなと思います。

一般的なWordPressサイト

WordPressサイトのページデザインはテーマと言われるプログラムで管理されていています。
標準で用意されているいくつかのテーマの他に、下のように管理画面上からWordPress公式サイトに保存されている無数のテーマから自由にダウンロードして利用する事が可能になっています。
img4
書店などに並んでいるWordPress本は、この公式サイトにあるテーマを利用してウェブサイトを作るやり方の紹介がほとんどで、ちょっと高レベルの本では自分でテーマをつくる方法の紹介になっています。

しかし、企業などのウェブサイトになると企業イメージにあった高いデザイン性が求められます。
オリジナルデザインのウェブサイト全体をWordPressテーマとして用意するのは結構大変なんですが、実際にはページ内容の更新をすることがほとんど無い場合がよくあります。

他にも、お知らせの他にスタッフブログや商品紹介ページなど、目的・機能・デザインが違うタイプの更新が必要になる場合や、PDFファイルなどを定期的に増やしたいがダウンロードページは一つにまとめておきたいなど色々なケースが出てきます。

そういったウェブサイトごとの要求を満たしつつ、WordPressの管理画面はできるだけ分かりやすくシンプルする事も重要。

毎回WordPressをどう使うのがこのウェブサイトにはベストなのかを考え、出来るだけ効果的なWordPressの作り方で使い分けをしています。

お知らせなど一部だけWordPress

まず最も小さくWordPressを使う方法として、ウェブサイト全体は静的なHTMLファイルとして作成しますが、更新が必要なお知らせなどの部分だけをWordPressで用意し、トップページなどに数件の新着を表示する機能を追加する事があります。
img5
お知らせの更新に必要な機能だけに制限させるので、無料ブログサービスやSNSの更新と同じ程度に誰でも使えるようなシンプルな管理画面を用意することができ、オリジナルデザインでも最小限のコストで収めたい時などに有効かと思います。

お知らせなどに加えて事例や商品紹介などもWordPressで管理

ブログなどでは必要なカテゴリーのチェックを入れてもらうなどの対応で表示を分ける方法もありますが、この方法だと管理画面が複雑になってしまいます。

複数の商品写真や説明文などが必要で入力ミスを減らしつつ、できるだけ更新しやすくするために「カスタム投稿」「カスタム分類」「カスタムフィールド」などの追加機能を加える事があります。
img6
専用の更新機能を用意する場合、十分な打合せや検討を行った上で作り始めるのはもちろんなんですが、公開直前や公開後に写真サイズを制限が必要になったり、掲載順番の変更、予定していなかった項目の追加などの調整や変更が発生することはどうしてもあります。
その場合に必要な修正が速やかに加えられるような柔軟な作りも大切ですね。

全体をWordPressにしつつも普通のページを一部入れる

意外と知らない人もいるのですが、WordPressサイト内に静的なHTMLファイルがある場合は実際のHTMLファイルの方を優先して表示させます。

どうしてそうなるのかと言うと、ウェブサイトにアクセスがあった場合、そのURLに該当する場所のファイルにアクセスを試みます。しかし、該当のファイルがないと通常はエラートとして表示されるのですがWordPressではそこで内部データベースをチェックして用意されたHTMLファイルのデータを用意して表示してくれることになります。
img1
例えばWordPressをインストールすると直下にreadme.htmlというHTMLファイルがあります。
そんなことは通常しませんがWordPress管理画面の中でパーマリンク設定を調整してreadme.htmlと言う固定ページを作成しても実際にあるreadme.htmlが表示されることになると思います。
(このreadme.htmlはWordPress本体のアップデートと共に更新されるのでファイルを削除しても復活します。)

これを知っていると完全に別デザインのランディングページなどが必要なった場合などで、わざわざWordPressテーマファイルに手を加えなくても簡単にページを用意出来ます。
また、ランディングページが不要になった時はファイルを削除することでWordPressがページがない場合の処理を行ってくれるので安全に運用することが出来ます。

WordPressの中に複数のWordPressを入れる

通常はWordPressのカスタム投稿やテーマ設計でほとんどの事は対応できるのですが、WordPress管理画面を運用する上で分けたい場合や、ウェブサイト内に擬似的に別のウェブサイトを運用したいなどデザイン・機能的に大きく変わる場合があります。

単純にWordPressを複数インストールする方法もありますが、実は複数のWordPressプログラムをインストールしなくてもネットワークサイトまたはマルチサイト機能といわれる方法でWordPress内で擬似的に複数のWordPressを用意する方法もあります。

この場合、WordPressアップデートも一括管理でき、異なるWordPressのデータを表示させるやり方もあり便利ではありますが、運用中のWordPressを後からネットワークサイト化すると不具合を起こす可能性が高く、一部対応していないプラグインなども有るため十分な検証を行って用意する必要があります。

制作側から見たWordPressを使うメリット

そんな色々な使い方ができるWordPressですが、最大のメリットは必要な追加機能をプラグインとして比較的簡単に追加できること。そして必要な管理画面を用意する必要が無いことです。(使いやすく安全な管理画面を用意するのはかなり大変な作業なんですよ)

また、定期的なアップデートにしっかりと対応させることで安全に運用出来るようにすることも大切です。
そのためにアップデートで問題が発生しないような作り方をするように注意しています。

運用側から見たWordPressを使う際の注意点

パスワードの管理と必要なアップデートをしっかりと行えば、基本的にはWordPressは安全に運用できます。

ここ数日WordPress関係で多数の改ざん被害のニュースがあり、もしかすると「やはりWordPressはダメだね」と感じた人もいるかもしれません。
しかし、これは間違いで実際には他のCMSでも同じようなトラブルの可能性は必ずあります。

自動車でリコールがよくあるように不具合や問題が全くないモノを作るのは不可能です。
また、スマートフォンの普及など変化に応じた対応は絶対に必要になってきます。

今回の改ざん被害ケースの多くは将来に向けたWordpressの追加機能部分で問題があったのですが、改ざん被害が発生する以前からWordpressコミュティの一部メンバーとレンタルサーバー各社などが水面下で監視・準備を行ってくれていました。

WordPress4.7.2 セキュリティーリリースの裏で起こっていたお話
https://twitter.com/i/moments/826971421427445763


最後に

一般利用者の方が気にされる必要は本当はないのですが、Wordpressが無料でこれらを実現していることは凄いことです。

ウェブ制作をしていると正直Wordpressだけに依存しすぎるのも良くないなと考える時もありますが、今回のブログを書いていてWordPressの魅力はWordPressコミュニティ全体の力が非常に強力な事だと改めて感じました。

WordBench熊本に参加してます

井上武明
2016/09/27
閲覧所要時間:約3

どうも、今週のジャンプを読んでちょっぴり「こち亀ロス」な井上です。
ただ今、参加費500円を払ってWordBench熊本に参加してブログを書いてます。

作業中

WordBench熊本とはなんぞや?

WordBench(ワードベンチ)とは WordPressユーザーのための地域コミュニティの事で、WordPressでメールフォームを作るプラグインとして超有名なContact Form 7の制作者の三好さんが発起人となり、2008年9月に開催された WordCamp Tokyo 2008で発表されたそうです。(今調べました。)

その熊本県でのコミュニティがWordBench熊本です。

ちなみにもっと大規模なWordCamp(ワードキャンプ)というのもありまして、こちらはWordPressの普及と情報交換を目的に世界中で行われているユーザー・デザイナー・開発者が集う巨大イベントです。(これも今調べました。)
2016年は7月9日〜10日に大阪、9月17日〜18日に東京で開催されていて、その内容はWeb上に無料で掲載されています。

WordCamp Kansai 2016
https://2016.kansai.wordcamp.org/movie-and-slide/


WordCamp Tokyo 2016
https://2016.tokyo.wordcamp.org/09/24/slide/


・・・行きたかったな。わぷーグッズもいっぱいあったみたいだし。

わぷー

WordBenchって何か凄いWordPressユーザーが集まってそう。

いや、全然凄くないです。むしろWordPress始めたばかりの人が多く、HTML/CSS/PHPなどのWeb制作技術やWordPress関係の高度なカスタマイズ技術が習得できると期待して参加すると・・・多分がっかりしちゃいます。

それなら何故参加するかというと・・・はて、何でだろう。

単純に技術習得だけを目的にするのであれば、書籍やネット検索を使って勉強する方が効率的です。

実際の仕事ではその繰り返しで新しい知識や技術を習得してますが、多分それだけでは得られないものが有るんだと思います。

 

【本題】8月末にContact Form 7の使い方セミナーで講師しました。

講師と言っても講師代を頂けるわけでもなく、プライベート時間を利用して資料を作成し、他の方と同じく参加費を払って講師をしました。

WordBench熊本での発表は結構頻繁にやっておりまして、
「今回は初心者向け何かやろうか、よしスパムフィルタ付きのメールフォームの作り方なら良いかな」
っと企画。すると何故か最初の参加申込者がContact Form 7の制作者ご本人という衝撃の事態に!

さらに嫁から「長男の学童夏祭りと重なったから!」とダメ出しも加わってしまいました・・・っが!

勉強会の様子
写真のように何とか無事に講師を務められました。(^▽^)
(プライバシー保護のため写真は加工しております。)

センターポジションがContact Form 7制作者の三好さんご本人。
その後ろにいるピンクの子が「嫁との妥協案」として連れてきたアンパンマン鑑賞中な我が娘です。

超メジャーなソフトの使い方を本人の前で説明する機会ってあんまりないですよね。
・・・子連れでなければ懇親会にも参加したかったな。


WordPressが普及している理由は?

CMSのシェア
W3Techsの調査データによるとCMSのシェアが59.3%、Webサイト全体でも26.7%で使われていると言われるWordPressですが、その普及の最大の理由は「使いやすさ」「カスタマイズ性」「無料」ではなく 「コミュニティ」 に有ると感じます。

具体的には WordPress+やりたいこと で検索すると大体調べられると言うのはコミュニティの底力ですね。

スタッフブログを AMP 対応しました!

fujie
2016/08/30
閲覧所要時間:約6

amp-thumb ※画像のカルーセルスライダーはこんな感じになればいいな…というパロディイメージです。

AMP ( アンプ ) 対応になったスタッフブログからこんにちは。
アンプと読むらしいです。読み方は知っていてもエーエムピーと読む癖がついているので、いきなりアンプが~と言われてもまったく認識できませんでした。

対応方法や情報だけは前々から仕入れていましたが、個人的に盛り上がってない感やニュースサイトだけでいいのではと思っておりましたが、

スマホ対応が不要になる!? Google、通常のモバイル検索結果でスマホ向けページの代わりにAMPページを表示する実験を開始
https://www.suzukikenichi.com/blog/google-starts-experiment-to-replace-mobile-friendly-pages-with-amp-pages/

などを読むうちに急にやる気になり、重い腰をあげました。

WordPress を利用しているので、便利なプラグインにてささっと対応もできますが、( 現段階のプラグインだと、AMP の厳しい制限によりエラーがかなり多くなるようですが… ) より深く理解したかったので、オリジナルテンプレートで対応することにしました!

ということで実際作業した感想のレポートです。
※詳しい対応方法は解説記事を探すと大量に見つかるので省きます。

対応方法にて大変お世話になった参考サイト



URL はどうするか?

AMP 化の URL は自由に決めることができます。

使用できるタグや属性などが厳しく制限されているなか、URL は特に定まっていないのに衝撃を少し覚えました。

既に AMP 対応なされているメディアのブログ、個人のブログなどを参考に URL の末尾に ?amp を付与すると AMP 対応のテンプレートを見るように設定しました。

この記事の実際の AMP ページは下記のとおりです。
スタッフブログを AMP 対応にしました! ( AMP )
https://www.fvs-net.co.jp/blog/11607?amp




どういうデザインにするか?

制限されているタグや属性の中で表現できる範囲内に関しては、デザインは自由なので、こちらもすでに AMP 対応なされているところを参考にしました。

いくつか見ていくうちに共通点がありました。

  • スマホ対応にてよくつかわれるハンバーガメニュー ( ドロワー ) などは無し
  • 記事のみに集中 ( サイドバーなどは排除 )
  • 前後記事や似た記事などはあったりなかったり
  • オリジナルテンプレートで対応している場合は、レスポンシブウェブデザインとかなり近い形で表現が可能
以上のことを踏まえ、レスポンシブウェブデザインの時に書いた CSS をもとに、ハンバーガーメニューやサイドバーを排除したテンプレートを用意し、細かい調整を行いました。



HTMLタグを AMP 用に置き換えるときに苦労したこと

画像 ( img ) や フレーム ( iframe ) などは、それぞれ対応したタグに置き換えなければならないので、テンプレート上にて処理を記述します。
何度も繰り返しになりますが、タグの制限などが厳しいため、間違いがあると、デベロッパーモードにて、すぐにエラーが出てしまいます。
URL の末尾に #development=1 を付与するとエラーチェックができます。

WordPress なので、 PHP の正規表現を駆使していくことになりますが、
iframe というタグだけても
  • 普通の iframe を amp-iframe へ置き換え
  • WordPress の記事埋め込みカード機能の iframe も amp-iframe へ置き換え
  • YouTube の埋め込み iframe は amp-youtube へ置き換え
といろいろあり、正規表現が苦手なので、分岐に苦労させられました。

正規表現作るときはいつもこちらのリファレンスとにらめっこ…。
PHP: preg_match() / JavaScript: match() 正規表現チェッカー ver3.0
http://okumocchi.jp/php/re.php




最初のインデックスまでに1日!

AMP 対応ページは元の記事にメタタグにて指定を行うので、即時に公開できるのですが、サイトマップや Fetch as Google を行ったとしても、Search Console の Accelerated Mobile Pages にてインデックスされるまでに1日かかりました。



検索結果に雷マーク!

また、インデックスされたとしても、話題性がない普通のブログ記事は、トップニュースには載らないようです。
今日だったら台風とか天気に関することを書いて、アクセスが伸びれば載るのかな?という感じだと思います。

でもでも、ちゃんとインデックスされれば、下記のように検索結果に雷マークが付与されます。
名称未設定-1 いい感じ!

また余談ですが、スマホ対応のラベルは撤回されました。
( ラベルがなくなっただけでランキングシグナルからは外れてません )
こちらが参考になると思います。
「スマホ対応」ラベルをGoogleが廃止!?モバイル検索結果から削除される・・・
https://www.peko.co.jp/seo/smartphone/sumaho-corresponding-label-google-abolition



エラーへの対処とまとめ

弊社の今までのブログ記事は、648件です。

毎日20件前後 AMP 対応ページがインデックスされ、
その中で1・2件ほどエラーが上がってきている ( PHP の置き換え漏れ、カバーできない範囲 ) のが現状です。

とりあえずの AMP 化対応はプラグインを使えばすぐに終わり、オリジナルなら半日か1日で終わるけど、その後の対応でエラーへの対処を図っていく必要があり、さらに今後の記事への品質管理も考えなければ ( AMP を意識した記事の書き方のマニュアルの整備など )、検索エンジンに対してよい評価がもらえないと思うので、今回の AMP 対応を通して仕組みづくりが大切で、大変なことだと学ぶことができました。

また、取り掛かり前と後では正規表現に関する知識もより一層蓄えることができたので、総じてプラスになったと感じております。

以上です。



過去の対応 or 導入しましたの記事

WordPressで使えるギャラリー(Lightbox編)

shuhei
2015/08/31
閲覧所要時間:約2

さっきテスト用に一度公開したらFacebookに通知が行ってしまったようで失礼致しました。(2回出てきたらごめんなさい!)

にしてもまだこのネタ引っ張るの!?

ごめんね、これで最期にしますから(懇願

あと今回訳あって短めです。

メディア追加の罠

前回の記事ではギャラリーの見た目をカスタマイズしましたが、まだ少し気になる点がございました。

ギャラリーの画像をクリックすると、画像だけのページが表示されます。

なんか気持ち悪いですよね(え、そうでもない?そうですか・・・

実はこれギャラリーだけでなく、何も考えずに「メディアの挿入」とかで画像をぶち込んでも同じ様に勝手にリンクされてしまいます。

うちのブログでも知ってる人はちゃんとリンクを切ってるようですが、僕の昔の記事とか見るとめっちゃそのまんま貼ってますね(汗

ポイントはこちら

スクリーンショット 2015-08-31 16.08.33
画像やギャラリーを挿入する時に「リンク先」という項目がありますので、ここで「なし」を選択するとリンク無しの画像だけが表示されます。

その他「メディアファイル」だと画像だけのページ、「添付ファイルのページ」だと記事に画像が表示されただけのページ、「カスタムURL」だと好きなURLへのリンクへ飛ばすことができます。

しかし修正できるとは言え、一個一個の記事を直すのはめんどくさい。

せめて「メディアファイル」だけでも

解決したいと思います。

結論から言うと「Light Box」にしてしまうだけです。

手順は簡単。プラグインをインストール&有効化するだけです。

今回使用したプラグインはHUGE-IT LIGHTBOXというプラグインです。

こちらを導入した前回のギャラリーがこちら。



よりスタイリッシュになったような(気がします)

まとめ

LightBox系のプラグインはこれ以外にも探すとたくさん出てきます。

それぞれに表示の仕方やデザイン・動きなど異なってきますので、自分のサイトに合ったもの探してみてはいかがでしょうか?

WPのJetpackでFacebookと共有すると全文表示される!?

2015/06/25
閲覧所要時間:約1

こんにちはゾエです。
僕のブログでは「Jetpack」というWordpressのプラグインを導入しています。
これはブログの記事を書いたら「FacebookやTwitterなどのSNSと連携して自動で投稿してくれる便利な機能」なのですが、いつの頃からかFacebookへの投稿が記事の全文を投稿するようになってしまいました。というか、会社のブログも全文投稿されてるッッ!?


01

本来なら”記事のタイトル”を表示して投稿してくれるものですが、記事の全文が投稿されてしまうと長ったらしくて不快ですね。これでは「いいね!」や「シェア」もされにくくなってしまいます XP


この問題を解決する方法は?

Jetpackをやめて手動で投稿する

一番確実なのはこれだと思いますが、ブログを書く度に幾つものSNSへ手動で投稿するのは少し面倒ですね。


投稿する際に「詳細を編集」をクリックする

02

ブログ記事を公開する際に、「詳細を編集」をクリックして「カスタムメッセージ」が表示されている状態で公開すると正常に動作するようです。
あくまでも応急処置になりますが、お試しあれ〜。

WordPressで使えるギャラリー(カスタマイズ編)

shuhei
2015/05/25
閲覧所要時間:約3

あ…ありのまま 今 起こった事を話すぜ!

CA177_L 「おれは 前に更新したの4ヶ月も前じゃんと思ったら その前の更新も更に4ヶ月前だった」

な… 何を言っているのか わからねーと思うが

おれも 何をされたのか わからなかった…

前回のあらすじ

とまあどうでもいい前置きは水に流しましょう(目そらし

さてさて、前の記事でWordPressのギャラリー機能について簡単に紹介しましたが、ネタが思いつかなかったので引き続きお話を進めます。
前回作った下のようなギャラリーを作りましたが、これに手を加えてみましょう。


プラグインの追加と使用方法

さて、今回ご紹介するプラグインは「Jetpack by WordPress.com」になります。

Jetpack by WordPress.comとは

説明しよう。30種類以上の機能がこれ一つで利用できる高機能プラグインなのだ。
一部有料機能もあるが、多くの機能が無料で使えるぞ。
使いたい機能だけを有効化して使おう。
なおこれを利用するためにはwordpress.comへの登録(無料)が必要だ。
wordpress.comへの連携は、脱線しそうなので他のブログ様を参照してくれ。

こちらに準備しておいた連携済みjetpackが…

右メニューダッシュボードの下に「jetpack」の項目が追加されてますので、それを下にスクロールしていくと「jetpack機能」というのが見えてきます。
今回はその中から「タイルギャラリー」を有効化してみましょう。

スクリーンショット 2015-05-25 19.29.55

記事のページでギャラリーの更新

記事のギャラリーページに戻って、ギャラリーを編集します。
編集方法は前の記事のまとめ直前あたりに書いてあるよ!
種類はデフォルトで「サムネイルグリッド」と「スライドショー」が入っていましたが

スクリーンショット 2015-05-25 19.36.13
このようになんか増えてます。
これでお好きなタイプを選べば設定完了です。

以下、追加された種類のデモになります。

タイルモザイク

正方形タイル

丸型


まとめ

ちょっと小洒落たギャラリーをサクッと作りたい時はとても便利だと思います。
正方形や丸型だと写真の縦横比が変わってしまいますが、モザイクタイルだとある程度自動で合わせてくれるみたいです。

本当はもう少し掘り下げたものもあったけど長くなりそうなので。
決してネタを温存とか時間ないからとかそんなんでは…

WordPressで使えるギャラリー(導入編)

shuhei
2015/01/24
閲覧所要時間:約2

こんにちは、最近ジョギングを始めたにしむらです。
熊本城マラソンには出ません。フリじゃなくて無理です(迫真)

さて皆さん。WordPressで画像を投稿する時どのようにされていますか?
このブログでもそうですがだいたいは

CA088_L
こんな感じの1点張りじゃないでしょうか。

ただこれ画像が多くなると

CA076_LCA077_LCA086_LCA087_LCA085_LCA078_L
んぎゃわいい!!!うん、ちょっとバラバラで見づらいですね。

そこで今回ご紹介するのがWordPressにデフォルトで入っているギャラリー機能です。
WordPress2.5以降のバージョンなら入っているかと思います。

ギャラリーの作り方

まずは普通に画像を投稿するのと同じ様に、挿入したい位置でメディアを追加をクリックします。

スクリーンショット 2015-01-24 11.21.19
次にページ左上にある「ギャラリーを作成」をクリック。

スクリーンショット 2015-01-24 11.23.36
するとギャラリーに使う画像の選択画面になりますので、入れたい画像をクリックしてチェックを入れていきましょう。
画像を選んだらページ右下の「ギャラリーを作成」をクリック。

スクリーンショット 2015-01-24 11.27.30
ギャラリーの編集画面になりますので、並び順や設定を好きなように編集しましょう。

スクリーンショット 2015-01-24 13.33.30
最後に右下の「ギャラリーを挿入」をクリックすると・・・


こんな感じになります。(見やすい!
その他にもギャラリー編集画面でスライドショー形式を選択すると







こんな表示もできます。(なぜか上に改行取ってあげないと上部のテキストが埋もれてしまいました)
一度置いたギャラリーを編集する場合、テキストモードでタグを直接編集するか、ビジュアルモードでギャラリーをクリックして編集ボタン(鉛筆)をクリックして下さい。

スクリーンショット 2015-01-24 11.48.45

まとめ

この他にも細かい設定の追加や、プラグインを追加することで表示方法を変更したりなどカスタマイズの幅はまだまだあります。
今回は導入編ということで、カスタマイズについてはまた追々書いていく予定です。「予定」です。
標準機能だけでも便利なことに変わりないので、機会があればぜひ使ってみてはいかがでしょうか。

フロンティアビジョンのFacebook

デンタルWEB

求人情報

スタッフ紹介