「WordCamp Kansai 2014」に参加、聞いてきた5つのセッションをまとめてみました

WordPressの一大イベント「WordCamp Kansai 2014」に行ってきました。
1日目のセッションデイで5つのセッションを聞いてきたので、公開されている「slide share」と合わせてまとめてみました。

sponsored link

今回参加したセッション

「WordCamp Kansai 2014」の概要については記事を書いていますので、こちらで確認してみてください。

今回参加したセッションは「開会挨拶」と「今、WordPressを使う理由」を除くと5つ。会場が4つに別れていたのですべてを見ることはできませんでした。他のセッションはきっと誰かがオフレポを書いていてくれると思います。

  1. 11:15〜12:00 ROOM C03-C04
    こんなに簡単!テーマフレームワークを使った企業テーマ作成
  2. 12:15〜13:00 ROOM C03-C04
    WordPressでサイトを構築する際の注意点と安全なコードの書き方
  3. 14:15〜15:00 ROOM C01-C02
    「やりたい!」が「できた!」に変わる。チームで作るWebサービス – Scoobの場合
  4. 15:15〜16:00 ROOM C03-C04
    WordPressで実制作までまるっとHAPPY! フリーランスママの愛されディレクション
  5. 16:15〜17:00 ROOM C01-C02
    安全にWordPressを使う 誰でもできるセキュリティ&バックアップ

ここからのまとめには聞き漏らしている部分や僕自身の解釈も多少含まれているので、その辺はご了承願います。
slide shareは各セッションのさいごに貼っています。(まだ公開されていないものあるので公開され次第貼り付けます)

今、WordPressを使う理由

Wordcampkansai2014 7

スピーカーは高野 直子さん。現在は「WordPress.com」で勤務、Automattic社グローバライザー(国際化担当)をされています。WordPress日本語版チームメンバーでもあります。

W3Techs Logoによると、WordPressは世界中のCMSの60%のシェア、世界の人気サイトのうち22.3%を占めているんだそうです。
数あるCMSやレンタルブログやサイト作成サービスがあるなかで、なぜWordPressを使うのか?その理由として3つを上げられています。

  1. 拡張性
  2. コミュニティを中心とするエコシステム
  3. 長期的視野

拡張性

「プラグイン」を使って簡単に機能を拡張できるのはWordPressの大きな特徴のひとつ。
Amazonで検索すると分かるように初心者向けから上級者向けまで多くの書籍も販売されている。

WordPress自体の機能ばかりを拡張するのではなく、APIを利用して外部サービスと連携・機能の拡張ができるように考えているとのこと。そのためにwordpress.com自体のインフラにも力を入れている。

コミュニティを中心とするエコシステム

WordPressには様々なコミュニティがある。WordCampは世界中で行われていて、その数は1年間に100回を超える。
(「エコシステム」というのは1つの会社だけでなく、様々な利害関係者が集まり、パイを取り合うのではなく増やして行くこと)常に変化が必要なウェブにおいてこれは大きな強みになる。

長期的視野

以前はWordPressの商標を守るために「Automattic社」が持ってた商標をオープンソースにした。
誰にでもウェブを始められる環境にするのが目標。今のシェアではまだまだ足りないと考えている。

こんなに簡単!テーマフレームワークを使った企業テーマ作成

Wordcampkansai2014 1

スピーカーは松田 卓さん。京都でゲームとWeb制作をされているようです。

CodexのTheme Frameworksからテーマフレームワークを選び、Photoshop→Dreamweaver→WordPressの流れで制作をしている。

テーマフレームワークのメリットとデメリット

熟練した人が作っていて、ゼロからテーマを作成するより制作しやすいのがメリット。
セキュリティなどは親テーマに任せて、デザインだけを変更することもできる。

デメリットとしてはテーマ独自の作法があり、その情報が少ないこと。

少し紹介すると、PressWorkは管理画面ではなく実際の画面でドラッグ&ドロップで変更できるのが特徴。
hinagataは日本語なので導入しやすい。

テーマの探し方

  1. 公式テーマディレクトリから探す。
  2. Tag Filter(検索条件)で検索する
  3. 最終更新日・ダウンロード数を参考にする。

公式テーマディレクトリにあるテーマはしっかりと審査されているので安心して使える。
カラー・カラム・レイアウトなどから検索することもできる。(custom-○○のあるテーマは独自のカスタマイズができるものが多い)

迷った時は更新頻度の高いテーマを選ぶ。セキュリティや機能の面で安心できる。

テーマの作成

親テーマとコアファイルには変更をしないのが基本。子テーマを作って変更したいところだけをカスタマイズしていく。
子テーマにはstyle.cssとfunctions.phpファイルを用意しておく。

親テーマのHTMLとPHPを変更したい場合はfunctions.phpのフック機能を使う。
方法はテーマのidやclassを確認して、add actionを使用して親テーマに追加したり、上書き(オーバーライド)したりする。

必要なHTMLが準備できたらCSSでデザインを変更する。
idとclassとCSS3セレクタ+URLを使う。

Sassを導入するメリットは?という質問

Sassがないとダメなくらいいつも使っている。WordPressでは色々なページで同じクラスを使うこともあるので、階層化して指定できるのが便利。色やフォントサイズなどの指定が一括でできるのも使い勝手がいい。

WordPressでサイトを構築する際の注意点と安全なコードの書き方

Wordcampkansai2014 5

スピーカーは森川 琢磨(もりたく)さん。PolishWebPartnerという屋号でフリーランスをされていて、サーバーインフラの構築、システム開発、学校法人HAL大阪講師の講師業もされているようです。WordBench大阪の管理人。

専門用語やコードを使わず、セキュリティに対する心構えを教えてくれました。

  1. セキュリティは難しい
  2. この領域には踏み込んではいけない
  3. 知識と技術を身につけよう
  4. 仲良くなろう

セキュリティは難しい

セキュリティ用語は難しい。WordPress Codex 日本語版のデータ検証を読んでみて理解できるひとは少ないと思う。

セキュリティにはデータベース・プロトコル・サーバー・ネットワーク・アプリケーションなど総合的な知識が必要になる。
さらに攻撃してくる人はそれらを理解した上で様々な攻撃を仕掛けてくる。その攻撃の種類・対策・対策の実装なども知る必要がある。

自分でどうにかするのではなく、セキュリティができるひとに相談・依頼するのが最善策になる。結局、工数や費用も安く付くことが多く、自分ですると万が一の場合に信頼を失う可能性も高い。

この領域には踏み込んではいけない

どの範囲までを自分でして、どの範囲からをお願いをするのか?
そのキーワードとして「echo」がある。echoは何らかの処理の結果を表示すること。

WordPressのデフォルトテーマでechoと検索するとesc_attresc_urlなどといった「サニタイズ(データの無害化)」がされているのが分かる。
このようにWordPressにあらかじめ用意されているテンプレートタグなどには、すでにセキュリティ面を考慮したコードが書かれている。これをしっかりと利用する。

echoは出力であり、出力するなら検証をしてくださいとCodexにも書かれている。
中途半端がいちばんしてはいけないこと。

知識と技術を身につけよう

セキュリティに興味があるのなら、まずはWordPressを構成する要素(PHP・MySQL・Apache・HTMLなど)を理解することから始める。
自分でセキュリティをしたいならそれが前提条件。

参考図書として「体系的に学ぶ、安全なWebアプリケーションの作り方」がおすすめ。通称「徳丸本」。

「情報セキュリティスペシャリスト試験」を目指すのもおすすめ。「情報セキュリティ白書」通称「IPA本」が参考になる。

仲良くなろう

セキュリティに詳しいひとにお願いするにも、どうやって探したらいいのか?

技術や知識をもった人たちが集まる場に参加する!(WordCamp Kansai 2014の懇親会とかね!っておっしゃってました笑)


「セキュリティ面から見てテーマやプラグインはどう選べばいいのか?」という質問

公式テーマは審査がきびしい。半端ないくらいにダメだしされる。なので公式にあるテーマは安心して使える。

逆にプラグインはあまり審査が入らないので、ダウンロード数や作っているひとを参考にするといい。
個人的にはよくある「おすすめプラグイン」という記事はおすすめしない。ソースまで見てるの?と感じている。

「やりたい!」が「できた!」に変わる。チームで作るWebサービス – Scoobの場合

Wordcampkansai2014 3

スピーカーは完山 祐毅さんとかよこさんのお二人。完山さんはフリー、かよこさんは制作会社で勤務をされています。

Scoob(スクーブ)はwebデザイナーを対象にした情報サイト。名前の由来はscoop(情報)+ spoon(すくう)+ web(ウェブ)から。

公式サイトからの引用とScoobならではの言葉でイベントを紹介しているのがポイントとのこと。

Scoobを作ったきっかけ

かよこさんはアート系出身でテクニカル(ウェブ)系のイベントに疎かった。情報がまとまっているサイトもあまりなく不便に感じていた。まわりに聞いてみるとみんなも同じように感じていたようで、それなら作れないかと思った。

参考: Scoobをはじめたきっかけ

サイト公開までは以下のようなことをした。

  1. サイトを作ろうと呼びかける
  2. コンテンツ案・サイト構成
  3. デザイン・仕様
  4. デザイン・コーディング・WordPress・Script
  5. イベント登録・デザイン・WordPress
  6. サイトの公開

サイト運営に関して、イベント登録はメンバーだけで作成することにした。外部のひとに投稿できるようにすると軸がぶれてしまうため。

ウェブデザイナーにとって有益というフィルターを忘れないように気をつけている。

サイト作成工程

Scoobの運営メンバーにはウェブに疎いひともいるため、誰にでもイベント登録ができるように管理画面の「カスタムフィールド」を変更している。
これには開催日時・アイキャッチ・マップなど多岐にわたる。(使用しているプラグインは後述)

参考: WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する

使用しているプラグイン

カスタムフィールドの変更・管理にはTypesというプラグインを使っている。

お問い合わせフォームにはTrust Formというプラグインを使っている。Contact Form 7というプラグインがよく使われていると思うが、普段使っていないプラグインをクライアントワーク以外で積極的に使って行こうという理由から採用している。
デフォルトで送信の前に確認画面が出てくるのもおすすめポイント。項目の追加もドラッグ&ドロップで簡単にできる。

必須ではないが、Press This Reloadedというプラグインもおすすめ。Press Thisという機能を拡張できる。
文章を選択してブックマークを起動すると投稿画面を開くことが出来る。選択テキストは引用タグで囲まれた状態になりひと手間がなくなる。
こういった更新しやすい環境を作っておくことも意外と重要なこと。

Show Current Templateは管理画面のメニューバーを拡張できるプラグイン。表示しているページの参照しているPHPファイルを表示できるのでカスタマイズしたい時などに便利。

Gitでバージョン管理

複数人でのサイト運営に便利なGitを使っている。
差分を表示して修正にコメントを残せる点が使いやすい。

これもGitってどう使うの?というメンバーが多かったことから採用した。

ブログ機能の追加

サイトのお知らせなどにブログ機能が欲しいと思ったが、WordPressの投稿機能はイベント情報で使ってしまっていた。
そこでカスタム投稿タイプを使ってブログ機能を追加している。(詳しくはググってねっておっしゃってました笑)

チームで運営することのメリット

実際の仕事ではできないけど興味があることを試す場ができる。またチームでやるとモチベーションが保ちやすく、完成まで持っていきやすい。

サイト運営だけでなく、開発合宿などを行い、親睦を深めながら刺激を与え合うことができる。


「チームでうまく運営するためのコツは?」という質問

円滑に進めるために決めすぎないこと。

なかだるみさせない工夫として、運営以外にチームでの活動など「余白の部分」を楽しむこと。
イベント情報だけでなく、合間にイベント(季節ごとの行事)などの新しいことを挟んでいって意識的に締め切りを作っている。

ScoobはScoobを作りたいと集まったメンバーなので、基本的には自主性に期待している。そのためリーダーも作っていない。

WordPressで実制作までまるっとHAPPY! フリーランスママの愛されディレクション

Wordcampkansai2014 2

スピーカーはさた あいみさん。Webディレクター・Webデザイナーとして制作会社に7年従事、出産を期にフリーランスとして独立されています。

現在0歳と5歳の育児をしているため子供が寝た3時間ほどが仕事の時間になっていて、忙しい時には10件の案件を同時に抱えている時期もあったということです。

制作の流れと費用

トップページ・下層ページ・WordPressの構築(投稿ができるまで)をベースに、カスタマイズは別途費用としている。あらかじめ、ある程度のプランを提示しておくのも重要。

  1. ヒアリング
  2. ワイヤーフレーム
  3. デザイン・コーディング
  4. WordPress組み込み・コーディング
  5. 修正
  6. 公開

といった流れになる。5.の修正は原則として2回まで。だらだらと修正が続くのを防ぐためにそれ以降は有料になりますと最初に伝えている。

コミュニケーション

お客さまとコミュニケーションをしっかり取っておくと、制作が円滑に進む。以下の3つを行っている。

  1. スケジュール共有
  2. ToDo共有
  3. 制作物共有

Googleカレンダーのマイカレンダーを使用。各ポイントの時点とスケジュールの変更があった時点で必ず連絡するようにしている。

修正することのメモ・資料としてToDoを共有している。Todoistなどのシンプルなものが使いやすい。修正は勝手に追加しないように伝えている。

サイトのスクリーンショットなどをサーバーに画像(jpg)として置いておくことで、いつでも確認してもらえるようにしている。最後に修正がまとめて来るということが少なくなった。

納品前のWordPress設定

ウェブに疎い人でもサイトを運営できるようにWordPressの設定をいくつか納品前に行っている。

  • セキュリティを10項目ほど強化
  • バックアップはWP Backupというプラグインを使う
  • 更新時に自動的にSNSに共有してくれるプラグインを使うこともある

WordPressの自動アップデートに関しては確認してから導入するようにしている。

納品後の対応

アップデート後にサイトが表示されない時など即時対応できないため、保守契約はしていない。
そのかわりにバックアップやアップデートのプラグインを導入・説明している。

時短術

  1. テーマをテンプレート化
  2. コーディングソフトを活用する
  3. CSSフレームワーク

用途ごとにテーマのテンプレートをあらかじめ作っている。
DreamweaverCodaといったコーディングソフトにはコードを記憶しておく機能が含まれている。よく使うコードを登録している。

BootstrapFoundationといったCSSフレームワークを使うこともある。Bootstrapをよく使っている。

ディレクション術

お客さまを我が子だと思って接する。
お客さまはウェブに詳しいひとばかりではない。分からないことがわからないと言われたこともあった。ディレクションは十人十色。

発想をムダにしない。
自分が必要なら誰かが必要としている。やったことは無駄にならない。

自分でサイトを運営してみる。
仕事にもつながるし、経験にもなる。

「時間が限られている中でお客さまと直接会うことはありますか?」という質問

制作期間の長くなるサイト制作は直接1時間ほど会って話をしている。

「WordPressの使い方を教えることはありますか?」という質問

分かりやすい記事を紹介するようにしている。プラグインなどで使いやすいように構築もしておく。直接の指導には別途費用がかかることを伝える。

「案件はどれくらいの期間関わっていますか?」という質問

5〜10ページで特別なカスタマイズがないサイトは1ヶ月〜1ヶ月半が平均的な制作期間になる。

安全にWordPressを使う 誰でもできるセキュリティ&バックアップ

Wordcampkansai2014 4

スピーカーは杉田 知至さん。クックビズ株式会社でグロースハッカーとして活躍されています。WP Campaign Managerという公式プラグインを開発されています。

WordPressはCMSの60%のシェアを占めており世界で最も使われているCMS。
MacよりWindowsが狙われやすいようにWordPressは狙われやすいということをまず理解すること。

まずは最新バージョンにアップデート

古いバージョンにはセキュリティホールがある。新しいバージョンにアップデートをすることでそれを防いでいる。
例えばバージョン3.0(最新版は3.9.1)を使用している場合は68個のセキュリティホールを放置したままになってしまう。

WordPressがハッキングされる理由の4割が(サーバーやPHPなどの)ホスティング、3割がテーマのセキュリティホール。2割がプラグインとなっている。(2012年のデータ)

ファーストサーバさんのデータによると、直近の半年でサイトの改ざんは40件報告されている。
95%はSPAM(大量のメール送信や外部への攻撃的スクリプト)を送るための踏み台にされている。(サーバーに高負荷はかかるものの)表示はちゃんとされているので、ハッキングされているかどうか、目で見て確認することは難しい。判断には専門的な知識が必要になる。

セキュリティには以下の4つが有効。

  1. パスワード
  2. テーマ・プラグインは公式から
  3. バックアップ
  4. アップデート

パスワード

ブルートフォースアタック(総当たり攻撃)は大抵ユーザー名adminと8文字以内のパスワードが狙われている。基本ではあるが有効。
WordPressはパスワードの暗号化がされているが、平文で保存しているサービスもあるので使い回すと危険。

LastPassというフリーソフトがおすすめ。(Chrome拡張機能もあります)。Macなら1Passwordというアプリも有名。

WordPress公式テーマとプラグインを使う

テーマとプラグインにはWordPress公式と通称「野良」がある。公式テーマは審査があるが、野良は何かあっても自己責任だということを知っておく。

プラグインは審査があまりキビシくない。以前GitHubで自分の公式プラグインのセキュリティホールの指摘を直接もらったこともあった。(もらったコードをそのまま使ったそうです笑)

バックアップは有料サービスを使う

コンテンツはデータベース(MySQL)に保存される。
結論としてバックアップの選択肢はVaultPressという有料サービスしかない。

理由として無料のバックアッププラグインはデータベースから元の状態に復元ができないこと。
有名なプラグインのBackWPupはGoogleで検索すると、データベースが丸見えになってしまう方法があること。

アップデート

WordPressのバージョン3.7以降ではマイナーアップデートは自動でアップデートしてくれる。設定でメジャーアップデートの自動更新もできる。
dvanced Automatic Updatesというプラグインを使うとアップデート関係を管理できるのでおすすめ。

PHPのバージョンにも注意する。バージョン5.3のサポートがそろそろ終わる。バージョンアップの検討を。

個人でするならアップデートやバックアップは自動でやってくれるwordpress.comという選択肢も。

「ハッキングされているかどうか知る方法はありますか?」という質問

乗っ取られているのかは自分で調べるのは難しい。詳しいひとに相談するしかない。

フォローアップということで補足情報を記事とSlideShareにあげてくださっています。

安全にWordPressを使う 誰でもできるセキュリティ&バックアップ #wckansai フォローアップ記事 | tomotomo Snippet

WordCampに参加した感想

今回WordCampに参加した理由のひとつが実際にサイトの制作をされている方の考え方と制作工程を知りたかったからです。
これにはScoobさんとさたあいみさんのセッションが参考になりました。特にさたあいみさんはTwitterを見ていると評価が高かったようです。

もうひとつはセキュリティとバックアップのこと。僕はBackWPupというプラグインを使っていますが、復元する時の方法がよく分かってなかったんです。
それがそのプラグインは使うなと(笑)。セキュリティも含めて色々なヒントをいただけた気がします。

まだまだウェブやWordPressのことは分かっていないんですが、さらにその面白みを感じられました。
WordCamp運営チームのみなさん、参加者のみなさんお疲れ様でした。

参加者のみなさんのツイートをまとめてくださっていますので、こちらもぜひ目を通してみてください。

  1. WordCamp Kansai 2014 #wckansai 時系列ツイートまとめ (2014年6月7日) – Togetterまとめ
  2. 2日目 コントリビューターデイ : WordCamp Kansai 2014 #wckansai 時系列ツイートまとめ (2014年6月8日) – Togetterまとめ