SaCSS vol.47

SaCSS vol.472013年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%状況が戻ることが難しいケースが多いので、日常の防衛対策が重要です。

SaCSS vol.46

SaCSS vol.462013年7月27日(土)18:00から札幌市民ホールで開催されたSaCSS vol.46に出席してきました。北海道でJavascriptのプログラムを中心にフリーランスで活躍されているh2hamさん主催のセミナーです。その内容をざっくりとまとめました。

バージョン管理ツールGitについて

Web制作をする上でファイルの世代管理は必須ですが、結構面倒くさいです。その問題を解決するために数年前からバージョン管理ツールが登場し、広まっています。 今回はその中からGitについて導入方法と使い方を2人の方が解説と実演されました。 バージョン管理ツールは監視するファイルなどの世代管理を自動的に行うツールです。 これにより手動で管理する必要がなくなり、かつ、過去の変更箇所の違いや制作者の所在が確認できるため、複数人でプロジェクトを進める場合に大変重宝するツールです。

バージョン管理ツールの違い

現在よく使われているバージョン管理ツールはSubversionとGitです。
  • Subversion→作業したファイルを格納場所(リポジトリ)にアップ(コミット)するとすぐに反映されます
  • Git→作業したファイルを一度ローカル(リポジトリ)にアップし、その後格納場所(リモートリポジトリ)にアップする2段階方式になっています
※Gitをプロジェクトで使う場合には、あらかじめGitをどう使っていくかルール決める必要があります。また、開発者でOSが混在する場合、文字コードと改行コードに注意しなければいけません。

Gitをより使いやすくするツール

  • Github for Mac、Github for Windows
  • Source Tree(両OS対応)
  • Tower(Macのみ5,000円で5ユーザーまで使用可能)

これらのツールはコマンドを使用せずGUIでGitを使えるようになるので非常に便利です。

無料のリポジトリ

リモートリポジトリをレンタルサーバーなどに置く場合には、そのサーバーでGitが使えないといけません。そのためVPSなどを借りてサーバーを構築する必要があり、敷居が高くなります。 その部分を回避する方法として無料のリポジトリを提供しているサービスを利用します。
  • GitHub→外部公開が必須のサービスです
  • Bitbucket→5ユーザーまで無料で使えるサービス。回線が細いため、大容量のデータには不向きです。日本語可能で画像の差分確認も出来ます

Git上で制作する場合の注意点

複数の人間が、同ファイルの同箇所を編集した場合、警告が出るので同時編集を行った人同士でその部分を採用するか決める必要があります。
  • 効率良く作業するためにはまめにcommit(コミット)すること ※コミット→作業したファイルなどをリポジトリに保存すること
  • .gitフォルダを削除するとコミットが消える

Gitを使うメリット

  • コードミスが発生した場合、差分ファイルを確認することでミスの箇所がすぐに判明しやすい
  • 検索置換した後、ミスが発覚した場合でも過去ファイルに戻ることが出来ます
  • 差分ファイルの抽出がプラグインで可能です ※このプラグインはPCにパイソンが入っている必要があり、抽出にはコマンド入力が必要です
  • 削除したファイルの調査も可能