WordCampTokyo2017参加してきた。現状スライドまとめ、来年へ向けた反省など。
WordCampTokyoに参加してきました。日が経って忘れてしまう前に、書き残しておきたい。スライドまとめは最後にありますので、まとめをご覧になりたい方はそちらへ！
後悔したこと
のっけから後悔したことを書くってどうなのよーという感じですけども。人は得られたはずの利益を遺失した時、その価値は3倍（確か）に感じるようで、人間の本能であるということで許してください。
個人名刺を作っておきたい
１番の公開はこれ。こういったイベントで会社の名刺、、でもいいのかもしれないけどやっぱりなんだか違和感がある。twitterは会社と完全分離させているし、イベントではtwitterで繋がってる方としか多分会わないので、なおさら。自分を何者にするか？からしっかり考えて作りたい。
バッグ小さかった
ボディバッグで会場に向かいましたが、最初のセッション開始前にもう超パンパンになってしまいまして。
なぜかというと、ノベルティや販促物のことをすっかり忘れていて、色々頂いていたら全然足りなかった、という感じです。
辞書２冊分くらいはあったんじゃないかなあ。
セッション開始と終了の時に、メモを出すのも大変という結構面倒なことになっておりましたww
↓頂きものたち。
普段お世話になっている各企業のノベルティということもあって、どれもこれも可愛い、かっこいい！と興奮しちゃいました。
懇親会も参加した方がいい
今回、色々とタイミングが悪く、WordCampの懇親会には参加できませんでしたが、それについてはちょっと後悔があります。
というのも、やはりスピーカーのみなさんや、遠方から参加される方はひとまず懇親会に参加されていて、そういった方々と実際にお会いする数少ないチャンスを逃してしまったから。
僕の場合は「SNSだけで繋がっている方々と会う」が今回の目的の一つなので、ちょっと失敗したかな、、と思っています。東京近郊の方であれば、その気になればお会いできるので。
スピーカーの方、プラグイン作者の方、ここでしか会えないかもしれない方がたくさんいるはずです。
会いたい人とは事前に打ち合わせする方が良かった
今回、結果的に５名の方にお会いできたのですが、結構バタバタでちょっと失礼をしてしまったこともありました。。可能なら事前にスケジュール組めてたら良かったなーと。
よかったこと
良かったことはまあみなさん大体同じ様なことになるのかなーと思いますが、書かせて頂きます。
会いたい人に会うことができる
WordCampは一年を通して最も大きなWordPressイベントですし、参加費もとても安いので、非常に多くの人が参加されます。ということは、普段はネット上でしかやりとりしていない人に会うことができる可能性も格段に上がる訳で、実際に多くの方にお会いできました。大規模イベントだからこそですね。
新たな知識を得ることができる
これも当然ですが、今まで持っていなかった考えや具体的手法を取り入れることができます。見積もりに「レビュー」項目を入れるなんてのはものすごく大事で即効性のあることで、これだけで来た甲斐があったな、という感じです。
新たな繋がりが生まれる
僕はWordCampTokyoとは違う懇親会にいって来ましたが、とても魅力的な方々とご一緒できて、大きな刺激をいただくことができましたし、色々と相談させてもらったりして本当に楽しかったです。
来年に向けて
今年、初めてWordCampに参加してみて思ったのは「ただ参加するだけじゃなんか申し訳ないな」ということでした。
これはテーマが「join」だからということは関係なく、例えば宮内さんの熱い思いや、スポンサーの皆様の厚意や、行き届いた会場整備、運営に触れて、自然と湧き起こった感情です。
という訳で。来年はスタッフTシャツを来ているかも。
最後に、現時点で公開されているスライドまとめておきます。公式が発表されるまで、ご利用いただければと思います。
スライドまとめ
補足を含むブログが公開されました。
それでは。
videoタグの再生終了後にposterを表示させる方法
posterの再表示で詰まる
HTML5のvideoタグは使い方も簡単ですし、動画がトップにどーんとあるだけで、サイトの印象を一気に変えることができるので重宝しますよね。
再生のループや待機画像（poster）なんかの設定もHTMLだけで完結できて、とても使いやすく出来ています。
そんなvideoタグですが、先日ちょっと詰まってしまったことがありました。
「アクセス時は自動再生して、再生終了したらループはさせないで、posterを表示させて。」
videoタグには色々と便利なイベントが用意されていたので、その方向で調べるも撃沈。結果的には以下の内容で対応しました。
posterが表示されるのは再生されるまで
早速コードを。
HTML
JS
ずーっと、どうしたらposterを表示できるのか考えていたのですが、ググっても出てこず。ふと、autoplayをオフにしてた時はposterが表示されていたな、と思い出し、上記のような方法に落ち着きました。
HTML上ではautoplayをオンにしておいて、1度目は再生させて、videoタグに用意されているイベントのendedが発生したタイミングでloadメソッドで再読み込み、読み込み終了後、autoplayをオフに。
こうすることで、videoが読み込まれたけど、再生はされない→posterが表示される、という状況を作ることが出来ました。
実はこの方法にたどり着くまで数日を要していたのですが、終わってみれば処理的には何も難しいことはなかったですね（汗）。
しょっちゅう思うことですが、発想を変える、アプローチを変えるっていうのは本当に大事ですね。思考が凝り固まってないか？常に気にした方がいいなあと感じます。
さいたまデザインDTP勉強会に参加してきた。
9月2日、ソニックシティで開催されたデザインの勉強会に参加してきた。
普段デザインを行うこともなく、これまで勉強してきたわけでもなく、更にはまだまだフリーダムな子どもたちを連れて完全エンジョイ勢として参加してきて、正直周りの皆様に失礼＆ご迷惑であったのではという気持ちもありますが。
楽しかったなあ。
今回の勉強会で使用するツールは「レイアウトを工作する」という名のとおり、ハサミ、カッター、色鉛筆、定規なんかがメインで、こういう道具に触れること自体がまあ新鮮！
脳の普段使わない場所にじゅわ～っと血が流れる感じがした。
それと、同じテーマで作られた制作物を一度にたくさん見られるのはとても貴重だと思った。
作品を見て、その意図を汲み取る。自分の考えが正解かはもちろん分からないのだけど、「あぁ、そういうことか！」みたいな感覚になると、そしてさらにその思想みたいなものが自分と近しいと、作品を通して理解し合ったような、不思議な感覚になった。大半は根拠のない感覚なんだけど、とても気持ちのいい体験だったなあ。
しかし！
自分のなんというか、ビジュアル面での技量、技術ってもののなさには打ちひしがれました。もっと描けたら。もっときれいに出来たら。と思いながら提出...。
ときには落書きしてみようかな。。
We Project 8月の振り返り
久しぶりに充実した一ヶ月
８月が終わった。月が変わったことに気が付くといったら言い過ぎだけれど、そんな余裕もなかったのだろうなあ。とくに5，６、7月は。
とは言え、そんな状態から脱したこともあって充実した一ヶ月を過ごすことが出来た。
知識、技術を増やし、一緒に働く仲間と飲みに行き、先日はWordPressもくもく会にも行けたし、更に明日はデザインのワークショップに参加予定。
自分の場合は何をするにでも広く浅くするのが好きで、読書でも数冊を並行して読むのが好きだったりする。
そんなわけで、今月の勉強内容の節操のない感じはとても自分らしくて好きだ。
器用貧乏は自覚しているけど、器用貧乏も極めればそれなりの価値はあるんではないか、と淡い期待をしてる。
そんなこんなで、8月の記録。
| Activity Type | Duration | Percent |
|---|---|---|
| WordPressテーマ作成 | 02:45 | 0.4 |
| PHP学習 | 26:14 | 3.5 |
| 読書 | 03:51 | 0.5 |
| Gitの勉強 | 04:20 | 0.6 |
| Python | 03:53 | 0.5 |
| BLOG | 06:09 | 0.8 |
| 勉強 | 03:08 | 0.4 |
PHPの勉強
メインに据えてるのはこれ。
- 作者: 小川雄大,柄沢聡太郎,橋口誠
- 出版社/メーカー: 技術評論社
- 発売日: 2010/11/12
- メディア: 大型本
- 購入: 32人 クリック: 1,065回
- この商品を含むブログ (59件) を見る
電車内では読む部分を、早朝会社についてからはコードを実際に打ち込む部分を、という感じで進めていて、今現在はフレームワーク作成のところ。
正直、あまり理解できていない。多分何周かする必要がある。もしくはオブジェクト指向の勉強が必要かな。
ともあれ、言語仕様を読むことで少し世界が広がった気がする。
Git
あと、Gitの勉強とPythonの勉強を始めた。
Gitを会社に導入したい。とても。そのためにまずは自分が使い始めること。自分的には先日のエントリーで書いた2箇所が一番わかり易いかな。
ひとまず一人でGitHubでadd→commit→pushしまくっている。つぎブランチ。とかマージとかプルリクとか。今月で一通り使えるようになりたい。
Python
Pythonはpaizaラーニングが無料で学べるのでそこでとりあえず始めた。まだまだ入門なんだけど、パーフェクトPHPを一周完了したら次は
退屈なことはPythonにやらせよう ―ノンプログラマーにもできる自動化処理プログラミング
- 作者: Al Sweigart,相川愛三
- 出版社/メーカー: オライリージャパン
- 発売日: 2017/06/03
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (5件) を見る
を参考に、日々の業務の効率化を図りたい。
WordPressテーマ制作
超ゆっくり作ってる。今年中に完成させたい。ワイヤーフレームをWordPressで出来たらいいなーと思っていて、そんな感じのものを目指してる。
読書
これ読了した。今の部署は新規部署なので、実はなんでもやり放題なのだけど、その環境を楽しんでいない人もいるのでその人に読ませたい。
これはまだ読み終わってないけど、知識として入れておきたいから。
人工知能は人間を超えるか ディープラーニングの先にあるもの (角川EPUB選書)
- 作者: 松尾豊
- 出版社/メーカー: KADOKAWA/中経出版
- 発売日: 2015/03/11
- メディア: 単行本
- この商品を含むブログ (38件) を見る
積ん読も増えてきたので読む時間を増やしていきたいな。
以上！
開発環境の準備｜WordPressテーマの作り方
昨日はさいたま市大宮駅のコワーキングスペース「7Ｆ」で開催されたWordPressもくもく会に参加してきました。
もくもく会というのは初めて参加したんですが、かなり最高です！僕は普段人に聞いて解決できる環境にいないので、人にアドバイスを求めることが出来るというのが本当に幸せ。
そして、やっぱり同じことに対して興味関心を持っている方と同じ空間で作業できることもあって、適度な緊張感を持って数時間作業を進めることが出来るのがいいです。
毎月開催しているみたいなので、次回もぜひ参加したいなと思っています。
しかし、僕は昨日のWordPressもくもく会でWordPressを触っていた時間は1/4程度でした・・。なぜなら、環境構築でハマってしまっていたから。
今日はその辺りをおさらいしながら書いていきたいと思います。
開発環境を準備することも技術のひとつ
実は今回、テーマを作成する中で並行して身に着けたいスキルがいくつかありまして、それが
- vagrantを使ったローカル開発環境に慣れること
- DreamWeaverを上手く使えるようになること
- Git、GitHubに慣れること
なんですが、まあ割と一般的な技術なのだろうと思います。ただ、僕の場合は仕事上で必要に迫られることないし、こういったメジャーな開発環境くらいは自分で用意できるってのも大事な技術の一つだと思うので、個人で導入していこうと思った次第です。
後はタスクランナー入れたり、CSSメタ使う、ってのも外せないところだと思うのですがそこまでやってるとテーマ作成が始まらない気がしたので、ひとまずこれで走り始めちゃいます。
というわけで、だいぶ前置きが長くなりましたがまず環境構築についてメモ。
仮想環境の概要と導入
WordPressの開発環境としては３通りあるのだろうと思います。
- ネットワークに繋がっているサーバー
- Xampp、Mampp
- 仮想環境
今回作るのは最後者の仮想環境。
仮想環境のいいところは本番環境との連携ができることであったり、チームで環境を揃え易いこと。
導入方法
仮想環境を使う準備
仮想環境を作るのにはソフトを二つインストール必要があるので、それぞれを公式サイトからダウンロード＆インストールします。インストーラの指示に従っていればOK。
一つ目がvirtualBox、二つ目がVagrant。
それぞれの役割は
virtualBox→PCの中にサーバーを構築するための仮想空間とマシンを作る。
vagrant→VirtualBoxで作るサーバーの設定をコントロールする。
といったイメージ。
ただし、この二つをインストールしただけでは仮想サーバーを起動することはできなくて、vagrantのboxファイルを用意してあげる必要がある。
ファイルとしてはvagrantfileというものがvagrantのboxファイルにあたる。このvagrantfileがフォルダに設置されると、そのフォルダを含む配下が全て仮想サーバーの中身になる。Gitのinitに考え方は近いかもしれない。
VCCWを使う
vccwはWordPress開発専用のvagrntボックスファイルという感じで、基本的にこれさえあればすぐにWordPressのテーマやプラグインの開発に最適化された環境が得られる。
GIthubに連携する
開発しながらGitに慣れていきたいので、Githubも連携。
この記事に沿って設定していったら特に躓くことなく出来ました。ありがたい！
gitの操作とか概念はここ↓を見ながら練習中。
DreamWeaverのローカルサーバーとして仮想環境をセット
これは特になんてこともなくて、「サイトの設定」でサーバーをセットするときに、
「使用する接続」をローカル / ネットワークにして、対象のフォルダを設定するだけ。
カンタン！
これで開発環境も整いました。さあ次のステップも頑張ります。
テーマの仕様を考える｜ WordPressテーマの作り方
WordPressのテーマを作る時って、みんなどうしてるんでしょうか？僕は基本的にHTMLとかCSS用意してからWordPressの関数に置き換えていっています。タイトルタグの出力なんかは先に書いちゃったりするけど。
さて前回で各ファイルの準備は終わったので、どんなテーマにするかを決めていきます。ただし、仕様は刻々と変わっていくでしょう。人から言われる仕様変更は辛いですが自分でする仕様変更は楽しいもんです。
仕様決め
全体
レスポンシブで構築。DreamWeaver+Bootstrapが高速構築可能らしいので試してみる。
header
ナビゲーション、サイト内検索、メインイメージ（スライダー、動画に対応。）、メインイメージにメッセージ挿入が可能。GoogleのWebフォントを選べるようにしたい。
footer
背景画像が設定可能、メニュー、サイト内検索、コピーライト情報が設定可能
main
理想としては、Wordにそっくりな感覚でレイアウト組めたらいいのかなと思うけれども、相当難しいだろうから代表的なレイアウトのパターンをいくつか用意して対応する。
まずはこの程度で始めてみようかな。
【テーマに必要なファイルと役割について】 | WordPressテーマの作り方
若干、ドットインストールっぽいタイトルになってますけども。タイトルの通りオリジナルWordPressのテーマ作成を始めたくて、勢いでまたしてもカテゴリーを作ってしまいました。大丈夫なのか自分。
とはいえ始めてしまったので、順を追って進めていきたいと思います。
ちなみに、完成形のイメージはありません。ぼんやり思っているのは、WordPressでワイヤーフレーム作りができたらいいんじゃないかな？それをしやすいテーマがあったら色々と捗るんでは？という程度です。実際にそれをやるかは別のお話・・。
それでは、早速今回の本題に入っていきたいと思います。
テーマファイルの準備
まずはテーマで必要になるファイルの準備から。
- functions.php
- header.php
- sidebar.php
- footer.php
- index.php
- page.php
- single.php
- archive.php
- tag.php
- search.php
- 404.php
- style.css
ひとまずこのくらいあればいいかな。まだ色々あるのは理解していますが、とりあえず作り始めたいので。
一応簡単にそれぞれの役割をまとめておきたい。何か間違いがあればご指摘いただけるとありがたいです。
functions.php
テーマで使う関数を書いておけたり、WordPressに用意されている機能の管理をするためのファイル。テーマ全体の動作に影響する。
header.php
テーマに使用するヘッダー。複数用意したりもできる。
sidebar.php
テーマに使用するサイドバー。これも複数用意可能だけど、複数作ることって珍しいかもしれない。
footer.php
テーマ共通で使うフッター。
index.php
テーマのメインテンプレート。テーマ作成には必ず必要。
page.php
WordPressにあらかじめ用意されているページのタイプの一つ、「固定ページ」のためのテンプレート。基本的にはほとんどindex.phpと同じなことが多い。
single.php
WordPressにあらかじめ用意されているページのタイプの一つ、「投稿」のためのテンプレート。こちらも基本的にはほとんどindex.phpと同じなことが多い。
archive.php
「投稿」タイプのページを一覧で表示するテンプレート。対応できるクエリは「カテゴリ、作成者、日付」。
tag.php
タグを利用したクエリに対応するためのテンプレート。
search.php
サイト内検索の結果を表示するためのテンプレート
404.php
404 Not Foundのためのページ
style.css
テーマのCSS
次回
とりあえず今日はここまで。
まずは基本的なテーマを作ろう。
