プログラマー・デザイナー共通チュートリアル - actindi/tutorial GitHub Wiki

チュートリアルを進める前に

チュートリアルを進めるにあたっての決まり

• チュートリアルの内容で分かり辛いところがあったら、次にチュートリアルをやる人が分かり易いようにここのWikiの内容を編集する。（自分が引っかかったところは必ず直す）
• 明らかにすでに習得している内容は飛ばして良い。
• ビデオは時間がかかるので、適当に飛ばして OK
• サービス（Webサービス、iPhoneアプリなど）を見つけたら必ず会員登録をして使う
• その際、GmailかGoogleAppsのメールアドレスを使う
• そのサービスにアイコン登録が必要となった場合、著作権でひっかかるものは使わない
• チュートリアルで学んだこと、悩んだことはブログに書いて公開する
• ブログを書いたらTwitter、Facebookなどでブログを書いたことを公言する
• ブログはただの日記ではなく、今後このチュートリアルを進めていく人にとっての教科書になるような内容を目指す

ソーシャル・ネットワーキング・サービスを使う

訳あって今あるアカウントで公開したくない場合は、チュートリアル用のアカウントを作る（Facebookは2個作らなくて大丈夫です）。

• やること

  • Googleアカウントに登録（メールアドレスはGMAILかGoogleAppsを使う）
  • Twitterに登録※なるべく非公開にしない（こっそりインターンの場合はOK）
  • Facebookに登録※なるべく非公開にしない（こっそりインターンの場合はOK）
  • Githubに登録
  • Gravatarでアイコンを設定※著作権でひっかかるものは使わない

• 課題

  • インターネットの世界、それぞれのSNSの文化を知る。いずれは自分がそれを利用するときが来るかもしれないので。

###Lingrを使う準備

• Lingr 使ってません。Lingr 関連はスキップしてください。

• セッティング

  • lingrに登録
  • lingr raderをインストール
  • lingrの使い方

ブログを開設

• ブログを持っていない場合は作る
  • WordPress.com ※デザイナーはいつかWordPressのカスタマイズをするときはくるので、そのときに備えてWordPressで作るのがオススメ（SEOにも強い）
  • Tumblr ※SEOに弱いのが弱点
  • はてなブログ

ブログを書くことの意味

• 自分が何を理解して、何を理解していないかを自分に対して明確にする（自分のやるべきことを確認する）。
• 自分が何を理解して、何を理解していないかを第三者に対して明確にする（アドバイスが貰えるかも）。
• ネット上でアウトプットすることに慣れる。
• 自分用の備忘録、過去の自分へ向けた参考書になるようなものを意識をして書くと、多くの人の役に立ちます。

特に理由などがない限りコメントが可能なものを使用してください。 他の人が間違えなどを指摘できるので。 Tumblrもコメント欄をつけられるようにできます。

参考:なかじま日記

• 課題
  • ブログのURLを yammerで教える（投稿する場所はメンターの方に相談する）
  • TwitterのプロフィールにブログのURLを入れる

Webサイトで使う文字

• 英数字は半角を使う
  • Webサイトで全角英数字ではなく、半角英数字を採用する理由
• スペースは半角を使う。全角スペースはかなりイレギュラーな場合を除いて使うことはない。
• 半角カナは使わない

Macを使う

OS X Mountain Lion

• インストール
  • ゴール
    • Mountain Lionをクリーンインストールできる。
  • 手順
    • OSイメージ入りUSBメモリを刺し、Optionを押しながら起動する。
  • 参考
    • musiclogs.org::blog - Mac OS X Lionのクリーンインストール手順

AppleIDを作成

• 持っていなかったらAppStoreを開いて作成する。ついでにアプリをインストール。（以下おすすめ）
  • skitch無料（スクリーンショットの加工、共有）
  • keynote有料（プレゼンツール、PowerPointのMac版）
  • Evernote無料（メモ帳） 原則禁止となった

ソフトをインストールできる環境を作る

OS X Mountain Lionで開発元が未確認のアプリを開く方法

PC性能を知る

• PCの性能の見方を知る
  • ゴール
    • CPUが分かる
    • メモリが分かる
    • HDDが分かる

エディタのインストール

• デザイナーは下記のいずれかをインストール（今後、コードは今回入れたエディタを使って書く）
  • Sublime Text ※特に使っているものがなければこれを使う（有料）
    • Sublime Text 2 のススメ
    • Sublime Text 2 の設定・カスタマイズなど
    • Sublime Text 2 インデント(Indent)の設定方法
    • Sublime Text 3リリースされました
  • CotEditor（無料）
  • coda2（有料）
  • macvim-kaoriya
  • Espresso（有料）
  • Chocolate(有料)
• エンジニアは下記のいずれかをインストール
  • CotEditor（無料）
  • sublime editor（有料）
  • macvim-kaoriya（無料）
  • TextMate(無料)
  • Chocolate(有料)
  • Emacs
  • などなど...

IMEのインストール

• Google日本語入力 ※特にこだわりがなければIMEはこれを使う
• T-Code ※求道者ならこれ

ブラウザのインストール

• Chrome※特にこだわりがなければブラウザはこれを使う。
  検索結果を調べたいときはシークレットモード(ショートカットはCtrl + Shift + n)( Mac の場合は Command + Shift + n)が便利。
  グーグルへログインしていると検索結果が個別に最適化されているので、これを防ぐためにシークレットモードを使う。

その他のインストール（あると便利）

• Dropbox 原則禁止となった
• Screen Capture (by Google)

Webの基本

検索

• ゴール
  • Googleの検索結果で何位にいるのかを知る。
• 提出課題
  • Google で「おでかけ」を検索し、いこーよ (http://iko-yo.net) が何位かを調べ、yammer に貼る
  • Google で「怖い話」を検索し、「怖話」(http://kowabana.jp) が何位かを調べる。
• やりかた
  • Chromeのシークレットモード（ショートカットはCtrl + Shift + n）( Mac の場合は Command + Shift + n ) を使う。これをやって開いたブラウザから検索。
  • グーグルへログインしていると検索結果が個別に最適化されているので、これを防ぐためにシークレットモードを使う。

HTML

• ゴール
  • HTMLの基本を理解する。
• 提出課題
  • HTML課題をHTMLで書く（gistをforkして編集する）。 ポイント：章立てをh1, h2やul liなどを使って自分なりにマークアップしてみる
• 提出方法
  • HTML課題にHTMLマークアップをしたものをGistに貼り、そのURLを yammer に貼る。（後のGithubの章でこれをGithubにもアップする）
• やること
  • HTMLの説明を読む
  • ドットインストール HTMLの基礎をすべて見る。
  • HTML要素のリファレンスに一通り目を通す

CSS

• ゴール
  • CSSの基本を理解する。
• 提出課題
  • CSS tutorialにcssを使ってデザイン（レイアウト、フォントサイズ、色など）を入れたものにURLを付けた状態で公開させる。触るのはこのディレクトリの中にあるpractice。
  • CSSはCSS3（角丸、グラデーション、ボックスシャドウ、テキストシャドウ）も使ってみる
  • 手本はディレクトリのsampleの中。それを参考にpracticeをいじる。
• やること
  • ドットインストール CSSの基礎をすべて見る
  • ドットインストール CSS3の基礎をすべて見る
• Reset CSS 参照
  • HTML初心者が知っておくべきリセットCSS と3つのポイント
  • Reset CSSについてのまとめ：リセットするべき?しないべき？
  • Eric Meyer's Reset CSS
  • CSS Reset - YUI LibraryYahoo!製JS/CSS libraryのYUI
• clearfix 参照
  • floatボックスが親ボックスを突き破る問題
  • clearfixの使い方
• IE hack 参照
  • Quick Tip: How to Target IE6, IE7, and IE8 Uniquely with 4 Characters
• その他 参照
  • 10分くらいで分かるXHTML+CSS
  • Twitter Bootstrapの基礎 ドットインストール
  • 色彩センスのいらない配色講座 配色などの参考にしてください。
  • ズルいデザインテクニック
  • ノンデザイナーのための配色理論
    • [Я]ブログの配色を見直すため「HUE / 360」を使ってみた ： りくまろぐ

Terminalの操作

Terminal

• ゴール
  • Terminalの基本を理解する。
• 提出課題
  • ブログに黒い画面入門を読みながら実際に実際に手を動かしてやってみた報告をブログに書く。
• やること
  • 黒い画面入門を読みながら実際に手を動かす。
• 参照
  • Mac OS X UNIX活用大全

バージョン管理

Git

• ゴール
  • Gitの基本を理解する。
• やること
  • tryGitをやる。
• 参照
  • サルでもわかるgit入門
  • Pro Git

GitHub

• ゴール
  • Githubに自分のリポジトリを作る。
  • clone、pushができる。remote branchが作れる。
  • pull --rebase、 stash、stash popに挑戦する。
• 提出課題
  • HTMLの項目でマークアップしたHTMLファイルを自分のリポジトリにアップロードする。