HTML5+WordPress勉強会 in 神戸のおさらい

この記事をフルスクリーンで見るフルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。

2月の WordBench 神戸は、Web CAT Studio(株式会社リクルートエージェント)と HTML5-WEST.jp と WordBench 神戸のコラボレーションで、HTML5+WordPress勉強会 in 神戸というカタチで、神戸市産業振興センターにて開催されました。
昨年の WordCamp Kobe の影響なのか、HTML5への関心なのか、定員120名のところ参加希望者は150名近くだったみたいです。
というわけで、普段の WordBench 神戸とは違った雰囲気でした。
個人的には、 WordPress のことを色々と知りたいというのはもちろんあるのですが、それとは別に HTML5に関しても理解しきれていないことが多々ありますので、とても興味深くお話を聞くことができました。

で、おさらいというほどではないかも知れませんが、HTML5+WordPress勉強会 in 神戸の様子を…
すでにスピーカーの方々が各資料を公開されていますので、そちらを見ていただいた方が早いかも 😀

今回のタイムテーブル

  • PHPをさわらず作る!デザイナーさんのためのWordPress ? 超初級 –
  • d3.jsではじめるデータビジュアライゼーション入門
  • 簡単!XAMPP・MAMPで制作して本番環境へ!
  • JavaScript+CSS3を活用してスマートフォンサイト/アプリに動きを付けよう
  • Web技術の現状からWordPressの今後を考えてみる – WordPress&HTML5 合同セッション
  • LT HTML5&WordPress×キャリア

PHPをさわらず作る!デザイナーさんのためのWordPress ? 超初級 –

インストール前の準備やインストール後すぐにするべきこと、固定ページと投稿の違いや子テーマの使い方など、これから WordPress をはじめようと思っている方にでもわかりやすく解説されています。
一ヶ所、PHP ファイルをさわるところがありますが、PHP ファイルに書かれているコピーライトの行を書き換えるだけなので、タイトル通り PHP をさわらずに WordPress でサイトができてしまいます。
デザイナーさんは、まずはこの方法で一度 WordPress をさわってみてはいかがですか。
かなり、敷居が低くなるのではないでしょうか。
また、おすすめプラグインや実体験によるトラブル対処法なども解説されていますので、是非参考資料をご覧ください。

PHPをさわらず作る!デザイナーさんのためのWordPress【超!初級】

d3.jsではじめるデータビジュアライゼーション入門

データビジュアライゼーションとは何ぞや?ということから実際のライブコーディングまで、エンジニアさん向けの内容だと話されていましたが、デザイナーの私にもなかなか興味深い話しでした。
ただ、私がこれを活用できるかは別のハナシ… 🙁

データビジュアライゼーションとは、文字や数字のわかりづらいデータを可視化して、わかりやすくすること。
最近よく見かけるインフォグラフィックなどは、その一例である。
Infographics & Data Visualizations | Visual.ly
Create interactive charts and infographics – Infogr.am などを見てもらうのがわかりやすい。
確かに、色々と用途はありそうな気がする。
こちらも slideshare に資料をアップされています。

d3jsではじめるデータビジュアライゼーション入門

簡単!XAMPP・MAMPで制作して本番環境へ!

ローカル環境で Apache + MySQL + PHP を使える環境にしましょうというお話。
XAMPP と MAMP のインストール方法などを詳しく解説されていました。
私の経験では、XAMPP より MAMP の方がインストール等が簡単だった気がします。
5年ほど前にこのブログで MAMP の記事を書いたのですが、未だに検索エンジンから見に来てくれる方がおられます。
記事の内容も詳しく解説されていたサイト(現在は閉鎖されているようです)を紹介している程度ですので、これからは下記の資料をご覧くださいませ。

講演の締めに「XAMPP や MAMP は、どうでもよくて、お仕事ください。」とおっしゃってましたが、漫談を聞いているようで楽しかったです。
しかし、講演内容より手に持った『Wii リモコン』に皆さんの関心があったのでは? 🙂
そのあたりのことも下記サイトに書かれていますので、『Wii リモコン』に興味のある方はどうぞ。

簡単!XAMPP・MAMPで制作して本番環境へ!

JavaScript+CSS3を活用してスマートフォンサイト/アプリに動きを付けよう

今のところ、スマートフォンや iPad などに限定される内容ながら、たいへん興味深く、また、とてもためになったような気がします。
アニメーションという『動き』の実装が、本当に必要かということもありますが、ユーザー・エクスペリエンスの向上になるのあれば、やはり必要ではないかと。
また、クライアントからの要望や需要があるのも確かだし、アニメーションを使うことで競合他社との差別化や強みになるのではないかという現実的なこともあったりするみたいです。

CSS3 アニメーションは基本的に Mobile Safari に対応。
スマートフォンにおいては、JavaScript よりも CSS3 アニメーションがお勧めである。
今回の内容が『さりげなく主張する動き』ということらしいですが、サンプルで見せていただいたコンテンツは『さりげなく主張する』ものから『けっこう主張しているのでは?』という動きまで様々で、すごく楽しかった。
車(中古車?)のコンテンツなどは、「ホントに CSS3 アニメーションなの?」というレベルですごかったです。

こちらも slideshare に資料をアップされていますので、どうぞご覧ください。

JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう

Web技術の現状からWordPressの今後を考えてみる – WordPress&HTML5 合同セッション

HTML5-West.jp から村岡氏、WordBench 神戸からは菱川氏のおふたりによる HTML5と WordPress の現状とこれからについてのトークショー(かな?)
なかなか面白かったです。
やはり、「これからは HTML5なんだろうなぁ」とか「今後はもっと WordPress を使う人が増えるんだろうなぁ」という感想。
HTML5で依頼がきた場合は IE には対応しないというのは、クライアントさんの理解も大きいのかなぁ。
それと、HTML5に限らず『勧告』を待っていたら遅いということ、ブラウザに実装されているのなら制作サイドが使いたい時に使うのが良いのではないかという意見には、フムフムと納得してしまった。

LT HTML5&WordPress×キャリア

いわゆる IT 業界の求人倍率が、他の業界(業種)に比べて平均して高いらしいです。
特にエンジニアさんの倍率は飛び抜けていましたよ。
エンジニアさんの未来は明るいのかな。
デザイナーはといえば… 🙁

それにしても、まだまだ知らないことが多いなぁと実感した一日でした。
スタッフやスピーカーの皆さま、お疲れさまでした。
楽しい勉強会でしたけど、懇親会に行けなかったのが残念。

最後に CSS3 アニメーションが気になったので、簡単なのを作ってみました 🙂
簡単に作ったので参考程度にどうぞ。
一応、ベンダープレフィックスを付けていますが、Mac の Safai と Chrome でしか確認していませんのであしからず。

Transitions で動きをつけてます。
:hover を使ってアニメーションさせていますので、イラストにマウスカーソルを重ねてください。

[html]
<ul>
<li class=”ani-01″><a href=”#”><img src=”hogehoge.png” /></a></li>
<li class=”ani-02″><a href=”#”><img src=”hogehoge.png” /></a></li>
<li class=”ani-03″><a href=”#”><img src=”hogehoge.png” /></a></li>
<li class=”ani-04″><a href=”#”><img src=”hogehoge.png” /></a></li>
</ul>
[/html]

[css]
ul {
margin-left: 20px;
padding: 0;
list-style: none;
}
ul li {
float: left;
margin-top: 20px;
margin-right: 20px;
}
ul li a {
display: block;
width: 140px;
height: 140px;
margin: 0;
background: #29322c;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
}
ul li.ani-01 a:hover {
background: #da2703;
}
ul li.ani-02 a:hover {
background: #da2703;
-moz-transform: scale( 1.2 );
-webkit-transform: scale( 1.2 );
-o-transform: scale( 1.2 );
-ms-transform: scale( 1.2 );
}
ul li.ani-03 a:hover {
background: #da2703;
-moz-transform: rotate( 360deg );
-webkit-transform: rotate( 360deg );
-o-transform: rotate( 360deg );
-ms-transform: rotate( 360deg );
}
ul li.ani-04 a:hover {
background: #da2703;
-moz-transform: scaleX( -1 );
-webkit-transform: scaleX( -1 );
-o-transform: scaleX( -1 );
-ms-transform: scaleX( -1 );
}
[/css]

Animations で動きをつけてます。
勉強会で説明されていたように jQuery(JavaScript)をトリガーにしていますが、タイマー設定はしておりません。

ココをクリックしてね !

[html]
<div>
<span>ココをクリックしてね!</span>
<p><img src=”hogehoge.png” /></p>
</div>
[/html]

[css]
div {
clear: both;
width: 140px;
height: 140px;
margin-top: 20px;
margin-left: 20px;
text-align: center;
}
div span {
font-weight: bold;
cursor: pointer;
}
div p {
width: 140px;
height: 140px;
margin-top: 10px;
padding: 0;
background: #29322c;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
opacity: 0.1;
}
div p.active {
-webkit-animation-name: click_ani;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 0.5s;
opacity: 1;
}
@-webkit-keyframes click_ani {
0% { -webkit-transform: scale( 1 ); opacity: 0.1; }
60% { -webkit-transform: scale( 1.2 ); }
80% { -webkit-transform: scale( 0.9 ); }
100% { -webkit-transform: scale( 1 ); opacity: 1; }
}
[/css]

[javascript]
jQuery(function(){
$(‘div span’).click(function(){
$(this).next().toggleClass(‘active’);
});
});
[/javascript]

記述が正しいのかよくわかりませんけど、これくらいの動きだと比較的簡単にできますよね。
まぁ、ブラウザでの実装が問題だったりするわけですが、これからは CSS3 アニメーションが増えてきそうです。

そういえば、WordPress の Twenty Eleven でも検索窓で CSS3 アニメーションをさりげなく使ってますね。
こういう、さりげない使い方はいいなぁ…

スポンサーリンク

  • このエントリーをはてなブックマークに追加

フルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。