2013年8月24日（土）18:00から札幌市民ホールで開催されたSaCSS vol.47に出席してきました。北海道でJavascriptのプログラムを中心にフリーランスで活躍されているh2hamさん主催のセミナーです。そのまとめとなります。
綺麗なリボンを作る方法（Illustrator編）
WebリボンをIllustratorで作る上でのポイントは次の通りです。
- 形の単純化→複雑なオブジェクトをそのまま作るのではなく、一番簡単な形（四角形、円形）にしてから作り込むと把握しやすいです
- 質感の確定→そのオブジェクトがどのような色、形、感触をしているか具体的に決めていくと完成形が想像しやすくなります
- 立体構造の把握→オブジェクトが浮いている、背景に巻き込んでいる場合、どのようになっているか構造を考える事で、ドロップシャドウやグラデーションのかけ方などより現実味のあるオブジェクトの制作が可能です
フラットデザイン基礎編
フラットデザインとは、シンプルで余計なテクスチャを使わないデザインです。スマートフォン向けで読込が早いのが特徴。その反面、難易度が高い、ボリュームにかけるなどデメリットもあります。
元はロンドンの地下鉄で使われているデザインをウィンドウズがOSのUIとして採用して広まりました。
他にポイントとしては、ピクトグラムの使用、配色は原色を避け規則性を持たせるなどがあります。
愛と成果物
複数人でサイト開発を行う場合、自分勝手な意識がプロジェクトの進行に大きな影響を与えます。そのため、次の担当舎に成果物を渡す場合、相手に分かるよう構成を考える、自分の意見を押しつけない、分からない事柄は質問するなどトラブルを回避するよう心がけましょう。
成果物の構成としては、レイヤーはグループに分ける、ファイル名の命名原則を考える、画像は最小構成にすること、などが挙げられます。
VirtualBoxで遊ぼ
VirtualBoxとは、ローカルPCで仮想環境が構築できるソフトです。自分のPC環境を汚すこと無く別環境を構築できるのでシステム開発などで重宝します。XAMPPより動作が速い反面、PCに負荷がかかる傾向があります。
「すぐには役立たないプログラミング入門 — 電話番号を探す関数を作って見る」
ある文章の中から電話番号の位置を見つける関数を作る方法を考える、という題目でプログラムを構築していく流れを紹介しています。
プログラムの仕様とアルゴリズムを確定することで全体の8割が完成します。今回の題目については正規表現でも再現可能ですが、非常に複雑なソースコードになるためあまりお勧めできません。
Canvasでゲーム制作
Canvasとは、HTMLの命令にある画面を描画する要素です。JavaScriptを使いHTMLで描画する形が基本で、初心者向けのプログラムです。
Canvasでは線や四角形を描く、色を付ける、画像を動かすなど様々なことがブラウザ上で可能です。LT内では簡単なシューティングゲームが紹介され、盛り上がりました。
イラレでボタンを作ろう
Illustratorはアピアランスという機能により、オブジェクトに様々な効果を付加することで非破壊の複雑なオブジェクトを制作することが可能です。
文字に対して長方形や縁を入れたりぼかし、角丸、グラデーションなどを使用してボタンを作ることが可能です。
Androidアプリ屋だけどWebフロントエンド開発にアサインされた件について
プログラマーがフロントエンドエンジニアとして携わった感想をまとめられていました。
ポイントは、Web サイトが実際にユーザーがどのように使うのかを考慮して開発すること、プログラムは最終的にマシン語と呼ばれる言語に変換され動作することから、プログラムがどうマシン語に変化していくかを想像して開発することです。
夏の夜の ちょっとコワイ話
Webサイトが改ざんされてしまった場合、どのように対処するかを説明されました。
改ざんされた時点でWebサイトを閉鎖し、原因と対応後、復活する流れとなります。さらにブラウザやセキュリティソフトなどからはじかれるため、同様に対応する必要があります。
結果的に様々な問題が発生するため、現状を回復しても100%状況が戻ることが難しいケースが多いので、日常の防衛対策が重要です。