Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

2ページ目 | イベント

技能五輪のウェブデザイン職種を見学しに行った。

愛知県の小牧市のポリテクセンター中部で行われた、技能五輪のウェブデザイン職種を見学しに行った。


概要

マンションの販売促進サイトのプランニング、サーバサイド設計、サイトのデザイン、プレゼンテーションといった、Web周辺のすべての実力をためす競技。非常に競技の難易度が高いと思う。それに1日目が6時間、2日目は5時間しか与えられないのだ。今の時代、Web界隈ではここまでの能力を求められているのだろうか?

環境

プログラミング言語PHP
データベースソフトウェアphpmyadmin
テキストエディタSublime Tex Version 2.x※、Terapad v1.09、Sakura Editor Ver. 2.x
画像処理ソフトウェアAdobe PhotoshopCC 2014.2、FireworksCS6、IlustratorCC 2014.1、Acrobat XI Pro

課題

モジュール課題 1(RESTful な APIの作成を行う。)

RESTfulとはどういう意味なのか自分はぼんやりとしか分からなかった。この時点で自分の知識では論外だなと痛感した。調べてみた所、URLに一定の意味を持たせる仕様ということらしい。
たとえば、/api/usersにアクセスすると、ユーザのデータ一覧をJSON形式で取得できたり、api/users/1200だとユーザIDが1200の人のデータをJSON形式で取得できたりするものだ。


技能五輪ではサーバサイドがPHPに決まっているから、普段pythonとかNodeとかでプログラミングを書いている人は大変だ。
また、一日目で書いたプログラミングのRESTを2日目で使用するから、ここで確実にRESTfulなAPIを完成させておきたい。6時間で完成させるのは非常に難易度が高い。

モジュール課題 2 (ウェブサイトのフロントエンド部分の設計、構築作業)

2日目はサイト作り。なんと5時間でサイトを仕上げないといけない。しかも会場ではネットは使えないのだ。使っていいのはjQueryだけ。Bootstrapなどのフレームワークも使えない。それでも、発表のときにはデザインもしっかりしたそれなりのサイトを作っている人も何人かいた。5時間であそこまでのクオリティを仕上げてくる若い人を見ると焦りを感じる。自分もまだ若いが頑張らないといけない。

JIS、ISO、W3C 等の国際標準規格に準拠しコーディングが出来ているかというのも採点基準らしい。自分も普段、このような規格に準拠してコーディングが出来ているかと問われたら言葉に詰まる。こういう規格もしっかり勉強しないと。
ちなみに下のサイトでサイトのマークアップがW3Cの規格を満たしているか確認することができる。

Markup Validation Service


ロール属性

また、ロール属性をきちんと設定してマークアップが出来ている選手が多いことに驚いた。


それぞれのコンテンツに対してこれはバナーだよ。とかこれは検索機能だよとか、役割を明示することがHTML5では出来る。自分もロール属性を書くように心がけたい。

おわりに

審査員の方が仰っていたが、デザインの引き出しを増やすためには車のカタログをみるといいそうだ。なぜなら車には高いものから安いものまであるので、若者やお金持ちの人、様々な人がみる。だからそのことを想定してデザインしないといけないからだそう。自分はマークアップエンジニアだが、デザイナの気持ちも分かるようになりたいのでこういうカタログにも目を配っていきたい。



a-blog cms Training Camp 2014 Autumnに参加しました

a-blog cms の合宿に参加するのは今回が2回目です。普段、中の人としてa-blog cmsにふれています。ですから、外の人からa-blog cmsに関する意見をきけるのはとても新鮮でした。
セッションも普段聞けないような発表が聞けてとても刺激になりました。自分も登壇者としてはじめてa-blog cmsについて発表をしました。

発表内容

IFブロックを使ったコンテンツの制御方法というタイトルで2.0系から新しく使えるようになったIFブロックについて発表しました。はじめての発表でとても緊張しました。

スライド

a-blog cms util kit

今回の合宿に、node-webkitを使ってa-blog cmsのカスタムフィールド、カスタムユニット、スタイルガイドを簡単に扱うためのアプリを用意しました。使ってくれる方がいれば幸いです。
牧田さんが以前合宿に参加された時に作られた、カスタムフィールドメーカーのアプリ版と考えていただければ間違いありません。
ポート番号、3000番を使用しますので注意してください。


アプリのイメージ


ダウンロード

下のボタンからダウンロードできます

ダウンロード

HTML5 Nagoyaに参加しました

今回は11月14日にエイチームのセミナールームで開催されたHTML5 Nagoyaに参加してきたのでそのまとめを書きたいと思います。今回はライトニングトーク大会ということで一人一人の発表が短く、さくさく話が聞けました。下がその発表内容です

  1. 黒い画面超入門 - tmux を使ってみよう
  2. Adobe Extract Brackets を使ってみた
  3. この一年で学んだこと
  4. CMS fun 始めます!
  5. Chrome DevTools に関する発表
  6. JavaScript でリアルタイムギャラリーを作ってみた
  7. flexboxを使ってみよう!

1. 黒い画面超入門 - tmux を使ってみよう

黒い画面にガリガリコードを書き込む人に私はとても憧れます。
今回はターミナルをいっぱい開かずに、1つの画面を分割してスマートにコードを書こうというものでした。
tmuxとよばれるターミナルの拡張機能のようなものの導入方法から使い方までをざっと説明してくださいました。
tmuxでは、分割された領域をペインと呼ぶらしく、コマンド操作に慣れたら縦横無尽にペイン間を移動できて楽しそうといった印象を受けました。
下がそのスライドになります。

2. Adobe Extract Brackets を使ってみた

BracketsというのはHTMLやCSS、JSを書くためのエディタですが、それだけではなくPSDファイルを開いて、そのファイルを操作することが出来ます。例えば、オプジェクト同士の距離や、line-heightなどのCSSのプロパティが取得できたり、その場で選択したオブジェクトをpngファイルとして書き出すこともできます。
Web制作の現場でのワークフローが変わってくるんじゃないだろうかというお話をされていました。
下がそのイメージになります。


3. この一年で学んだこと

このセッションでは、株式会社アンティー・ファクトリーに勤める新人の石黒さんが入社して一年で学んだことを発表されていました。自分も新卒でWeb制作会社である有限会社アップルップルに入社したのでとても親近感がわきました。
どんどん、自動化ツールなどを導入したり、気持ちのいいアニメーションを通勤時間に研究しているそうです。自分もまけていられないなと思いました。
ちなみに、アニメーションの研究は以下のサイトを参考にしているようです
確かに気持ちのいいアニメーションですね。


4. CMS fun 始めます!

CMSを導入しないと個別のHTMLの管理が大変になるということを仰っていました。
そこで、CMS funというCMSのためのイベントを名古屋ではじめますよ。という紹介をされていました。
参加してみると、いろんなCMSを見比べてみる良い機会になるのではないでしょうか?
下がそのイベントの詳細になります。


5.Chrome DevTools に関する発表

このセッションではChromeのデベロッパーツールで使える便利なショートカットキーなどのお話をして頂きました。
要素の検証で、CSSプロパティをCommandを押しながらクリックすると、そのプロパティが記述されているコードまでジャンプ出来たり、ファイル上の文字をAltを押しながら選択することでマルチライン選択出来ることなどを話されていました。
なんと、デバッグ用のjsもスニペットとしてChromeに登録しておくことが出来るそうです。
これからの自分のマークアップの時間短縮にすごく役に立ちそうなのでしっかり覚えておきたいです。
下がそのスライドになります。

6.JavaScript でリアルタイムギャラリーを作ってみた

このセッションでは、JavaScriptだけで、サーバの記述やDBの設定、フロントまで出来ちゃうよというお話でした。
携帯端末から画像をアップロードするとサイト上にその画像が表示されるデモを見せてもらいました。
@nori2takanoriさんはJAWS-UGの運営メンバーだそうです。
聞きにいくと、サーバやDBのことなどを教えてもらえるかも知れません。


7.flexboxを使ってみよう!

これは私です。主催者の山田さんに「発表しないの?」といわれ急遽発表することにしました。内容としてはCSS3のflexboxを使うと、orderプロパティを駆使して、デバイスのサイズによってコンテンツの表示順を制御できるよという内容です。このネタは以前にもブログに書いたことがあります。是非読んでみてください。


感想

Chromeのデベロッパーツールが自分が思っている以上に高機能なことを知って驚きました。個人的にはこれが一番大きな収穫です。あと、tmuxの話もよかったです。tmuxをバリバリ使っていろんなタスクを自動化できるようなマークアップエンジニアになりたいものですね。


夏のjavascriptシューティングゲーム祭り2014に参加して

今回のイベントに参加した感想を書きたいと思います

今回のイベントの内容

  • 弾幕記述用ライブラリbulletml.jsについて(未定)
  • tmlib.jsとrunstantでライブコーディング
  • 超弾幕も可能? WebGL高速化のススメ
  • Dartでオンライン対戦STG作ってみた
  • LT

弾幕記述用ライブラリbulletml.jsについて(未定)

シューティングゲームに欠かせない要素について語られていました。
ただ避けるだけのゲームは面白くない。弾をよけて楽しいですか??という切り口で入ったのが印象的でした。
ファンユーザにとって必要なゲームの要素は下記のようです。

  • バリバリ壊す楽しさ
  • 大型機械破壊による弾消し&アイテムがっぽり

確かに、敵を倒した時の爽快感はゲームには必要な要素かもしれません。
敵を倒した時のエフェクトが弱かった自分のゲームについても見直すきっかけになりました。
ただ、もうちょっとJSの話もききたかったな。

tmlib.jsとrunstantでライブコーディング

tmlib.jsというゲームを簡単につくれるだけではなく、DOM操作まで行えるライブラリがあります。コード数は長く、なんと3万行近く書かれています。phiさんという個人の方がほぼ単独でかかれています。TM Lifeというブログをやっておられますが、僕もJavaScriptをそこから学んだといっても過言ではありません。そのブログにかかれている内容がライブラリにも取り込まれていたりします。
今回は、そんな、tmlibをみんなでいじってみようというハンズオン形式でした。

runstant起動


ソースコードを短縮URLとして格納し、それをシェアできる素晴らしいエディタでした。サーバと一切通信せずに、ソースの公開ができるのは画期的ですね。

超弾幕も可能? WebGL高速化のススメ

WebGLをいじったことのない、自分にとっては超絶難しいお話でした。
しかし、WebGLが使われるようなWebの案件もちょくちょくあるみたいです
http://www.riseart.jp/works/

WebGLで描画するには次の4ステップがあるそうです

  • 頂点データを用意する
  • シェーダに渡せる用に加工する
  • シェーダに送る
  • 描画命令を出す

頂点データを用意することと、シェーダに渡せるように加工することは初期化処理でできます。WebGLで高速化を図るにはいかに初期処理でやれる計算をやってしまうかということだそうです。
ちなみに、シェーダとはGPUを直接操作するものです

Dartでオンライン対戦STG作ってみた

オンライン対戦の通信をするにはサーバを介するsocket通信よりも、peer to peerで対戦者同士を直接結ぶ、WebRTCと呼ばれる技術をつかうそうです。


WebSocket


WebRTC


Dartrium

Dartと呼ばれる、Googleによって開発されたAltJSを動かせる環境だそうです。気軽にAltJSが楽しめて良さそうですね。
dartrium
Dartを使えば、WebRTCをJavaScriptで書く場合のブラウザ間での、実装差異を吸収してくれるようです
ですからブラウザを意識することなくコードがかけるということです

LT

個人的に、ES6の話がとても興味深かったです。
JavaScriptよりも簡単にコードがかけます。
JavaScriptのお父さん的な存在です。
どれくらい記述が楽か下に示します

JavaScriptの場合

//引き数のデフォルト値の設定
var func = function(x,y){
    x = x || 100;
    y = y || 100;
   //処理
}

//オブジェクトに関数を持たせる
var obj = {
    method:function(){
        //処理
    }
}

//オブジェクトリテラル
var func = function(){
    var x = 100;
    var y = 100;
    return {x:x,y:y};
}

//文字列内で変数を展開
var text = "私の戦闘力は"+power+"です";

//変数を複数代入
var a = 1;
var b = 2;
var c = 3;

ES6

//引き数のデフォルト値の設定
var func = function(x=100,y=100){
}

//オブジェクトに関数を持たせる
var obj = {
    method(){
    }
}

//オブジェクトリテラル
var func = function(){
    var x = 100;
    var y = 100;
    return {x,y};
}

//文字列内で変数を展開
var text = `私の戦闘力は${power}です`;

//変数を複数代入
var [a,b,c] = [1,2,3];

とても楽ですね。勉強してまたブログにES6に関する記事を書こうと思います。

感想

普段自分が勉強してたら気づけないことも勉強会を通して知るきっかけにもなるし、同じことに興味のある仲間と出会えるのでまた遠くても参加してみたいと感じた。
LTでもみなさんしっかりとスライドを用意してきているので次回参加する時はしっかりしたい。あと、エディタでライブコーディングをする時は、画面の文字が見やすいように拡大するなどの配慮も大事だなと感じた。


WCAN2014 Summerに参加して


WCAN 2014 Summerに参加しました。200人もの方々で、会場がいっぱいに埋め尽くされました。
今回は以下の方々に講演をしていただきました。



今回は名村さんの発表した内容について、まとめて最後に感想を書きたいと思います。
他の方々の発表も近日にまとめて記事にします。

だれがどうみてもそうとしか受け取れない文書

サービシンク 名村晋治さん

ディレクターにどんなスキルが必要か?

最も重要な仕事はジャッジ(決定)すること。
ジャッジするためにはマークアップの知識やサーバの知識、いろんな知識が必要になる。ジャッジを下せるようにハンズオンの説明会にいったりする。
そのジャッジを周りの周りのみんなに「連絡」をしていかなければならない。

文書術が必要

ジャッジを周りのみんなに「連絡」する際に必要となるのが文書術。
出来上がった物が自分の意図と違うと作り直しになる
無駄とも思える連絡のやりとりが続き、時間が過ぎていく
だめな文章は「主語」が抜けている場合がおおい。
コミュニケーションは聞き手でなく、100%話し手に問題がある。

だめな文章を書くと

補足説明が必要になる
相手が聞き直してくる
あとで見た人が「意味不明」

きちんとした文章を書くのはめんどくさいよね

書くためのツールを用意する
(インデント形式、wiki記法が使えるツール)
「見出し」「段落」「リスト」の表示と整理

マークダウン記法

h1の見出し * 見出し
h2の見出し **見出し
リスト表示 - リスト表示

メールを書く際

いつも、定型文を書くのがめんどくさい。

TextExpanderをつかって、そういった定型文を登録しておこう



ドキュメント記述のこつ

  • まずはかならず「要件」を書く。なぜ、それを行うのか、作るのかを共有
  • 断定的ないいいかたをする「です、ます調」は使わない事実だけをいう
  • 同じ単語を繰り返さない
  • 一年後、同じ文章をみてわかるかを意識する

感想

私自身、頼まれたページのマークアップが終わって、上司に連絡をするときに「修正しました」と連絡し、「どのページのどこを??」とおこられることがあります。主語URLが抜けていると、相手には伝わらないことがおおいです。「どこのことを言っているかわかるだろう」と鷹をくくって連絡を怠るとよけいに時間を割いてしまうので、最初から相手につたわる文章で連絡することがだいじだなと今回のセミナーで感じました。
また、ツールなどをつかってあらかじめ、よく連絡する内容や定型文などを登録しておき、それに対するショートカットを用意しておけば連絡する時も便利だなと思いました。


堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド