この記事を書いた人
machida

今回はプログラマーにとってはもう必須なサービス、「gituhub」に我々デザイナーも挑戦していこうと思います。このサイトのヘッダーにある、「デザイナーもforkしたりpull request送ったり」というサブタイトルがありますが、この「fork」も「pull request」も実は「github」でよく使う用語です。

一応、今のところKUROIGAMENではgithubに置いてあるオープンソースにデザインを入れて作者に送りつける、っていうのを目標にしていて、とりあえずはそれが出来るようになるまでの記事を書いていく予定です。今回でgithubが使える設定が完了して、次回は実際にgithubを使ってみて、それからgithubにあるRubyのアプリをローカルで動かせるようになって…ってところまで頑張ろうと思います。

まずは「git(ギット)」について

「git」とは?

プログラマーが開発をするときは大体バージョン管理を行うのですが、「git」はそれをするためのバージョン管理システムの一つです。
バージョン管理システムとは、コンピュータ上で作成、編集されるファイルの変更履歴を管理するためのシステムのこと。MacのTime Machineみたいに、プロジェクトを前の状態に戻したりとかをするためのものです。
もしかしたら、この記事を読んでいるデザイナーの中にはSubversionというバージョン管理システムを触ったことがある人もいるかもしれません。まぁ、プログラマーに怒られそうですが、それと同じようなやつです。ただ、gitを使ってる人のほとんどが曰く、「gitの方がいいもの」だそうです(僕もgitに関する知識はこれくらいなので、今のところはここまで)。ちなみにgitの作者はLinuxの作者であるリーナス・トーバルズさんです。

「git」をインストール。

色々説明を聞いても実際にgitを使うまではいまいちどんなものかはわかりづらいと思います。やればわかりますので心配しなくて大丈夫。とりあえずHomebrewでgitをインストールしてgitが使える環境を作ってみましょう。

$ brew install git

これでgitコマンドが使えるようになりました。実際に使うのはもう少し先(次回までお待ちください)。今回のテーマは「git のプロジェクトホスティングサービス gituhub に挑戦(準備編)」なので、「git」を使う前に「github」について調べておこうと思います。

「github(ギットハブ)」について

「github」とは?

gitのプロジェクトを置いておくホスティングサービス。プロジェクトのソースコードやそこに使われてる画像ファイルなどを置いておく倉庫のようなものです。webデザイナーなら一度は必ず訪れたことがある「SourceForge.JP」と同じようなものですね。

githubが面白いのは、単なる倉庫として使うだけでなく、githubのユーザーそれぞれが個別のページを持っていて、この人は何を開発しているのかが見れたりすることが出来ます。また、githubに置いてあるプロジェクトを自分のところに持ってきて、元のプロジェクトに手を加えて自分が手を加えたバージョンとして分岐させることも出来たり、その分岐したものを作者に送りつけることも出来ます。

用語から見る、「github」って何が出来る?

  • 「フォロー」

    気になるユーザーが今github上でどんな活動をしているのかをウォッチする機能を「フォロー」と言います。twitterと同じですね。相互フォローを要求してくる人は多分githubにはいないのでご安心ください。

  • 「ウォッチ」

    フォローと同じように、気になるプロジェクトをウォッチする機能もあります(誰がこのプロジェクトをforkしたのか、誰がpushしたのか、誰がプロジェクトのissueに書き込んだのか…など)。こっちはそのまま「ウォッチ」と言います。

  • 「issue(イシュー)」

    プロジェクトのtodoリスト機能を「issue」と呼びます(githubを日本語表示にすると「課題」と出るのですが、みんな訳される前の「issue」と呼んでます)。issueを使ってバグ報告をしたり、今後の開発部分と内容を書いたり、作業が完了したことを報告したりにも使えます。

  • 「push(プッシュ)」

    自分のコンピューター上(ローカル環境)で開発したものをgithubに置くことを「push」と言います。「push」はgitの用語なので、githubに関わらず「git」を使って自分で作ってたものを外のどこかに置くことを「push」と言います。

  • 「fork(フォーク)」

    githubに置いてあるプロジェクトを自分のところに持ってきて、元のプロジェクトに手を加えて自分が手を加えたバージョンとして分岐させることを「fork」と言います。

  • 「pull request(プルリクエスト)」

    folkして手を加えた自分のバージョンをfolk元の作者に「ここをこういう風に変えたから本家に取り込んでよ」とメッセージを送ることを「pull request」と呼びます。

このサイトのヘッダーにある、「デザイナーもfolkしたりpull request送ったり」というサブタイトルのイメージが湧いてきたでしょうか?

githubに登録。

では、githubのユーザーになるために登録をしましょう。登録はこちらの新規登録(日本語表示で解説してます)から。

これをクリックこれをクリック

色々な種類のアカウントが表示されますが、一番上の無料アカウントでOKです。

無料アカウントはこれ無料アカウントはこれ

POINT!

githubには「無料アカウント」の他に、「Micro」、「Small 」、「Medium」という有料アカウント、さらにビジネス用に組織で使える「Bronze」、「Silver」、「Gold」という有料ビジネスプランもあります。

有料と無料、どちらも「公開リポジトリ 無制限」、「公開協力者 無制限」という条件は変わりません。非公開で特定の人しか見れないリポジトリを作る場合のみ、作れる数や、共同でそれを開発できるメンバーの数がアカウントの種類によって異なります。
また、ビジネスプランは個人だけでなく、組織としてのアカウントを作成することが出来ます。まぁ、仕事で使うんじゃなければ公開してしまっても全然問題はないので、無料でOKですね。

これでアカウントが出来ましたが、もう一つ、厄介な作業があります。「公開鍵と秘密鍵」を作成し、「公開鍵」をgithubに登録です。これをやらないとgithubでpushをすることが出来ないのでこの作業は必須なのですが、ちょっと手順が長いので、その説明をする前に一発タイトルタグを入れておきます。

「公開鍵」と「秘密鍵」

はい、タイトルが入りました。では、「公開鍵と秘密鍵」を作成し、「公開鍵」をgithubに登録する、の手順を説明していきます。鍵の説明については下のほうでやってますので、とりあえず作業を進めていきましょう。

「公開鍵」と「秘密鍵」の作成。

まずは、以前にここで紹介しました「TinkerTook」を使って隠しファイルを見えるようにする設定を行います。

すいません、この部分書き直しました(2011年1月10日)

まずは黒い画面を呼び出します。以下のコマンドを打ってください。

$ ssh-keygen

これは鍵を作成するためのコマンドです。これを打つと、

Enter file in which to save the key (/Users/machida/.ssh/id_rsa): 

と、表示されます。「この場所に鍵を作っていいの?」と黒い画面が聞いてます。「enter」キーを押してください(machidaの部分はあなたのユーザー名が入ります)。

今度は、

Enter passphrase (empty for no passphrase):

…と、パスフレーズを聞いてきます。ここは「sudo」でも使ったMacにログインするときに入れるパスワードを入力してください。

Enter same passphrase again:

もう一回入れて、って言ってくるので、もう一度入力。

以上で「公開鍵」と「秘密鍵」の作成は完了。もっと何か作業をしたかったですか ? がっかりさせてゴメンナサイ。これだけです !

「公開鍵」と「秘密鍵」の作成の一連の流れもっと何か作業をしたかったですか ? がっかりさせてゴメンナサイ。これだけです !

最後にgithubに戻り、右上にある「アカウントの設定」をクリック。

「アカウントの設定」をクリック「アカウントの設定」をクリック

そして「SSH公開鍵」タブを開き、「別の公開鍵の追加」をクリック。ここに「id_rsa.pub」の中身を丸々コピペ。

ここに「id_rsa.pub」の中身を丸々コピペ。

以上で「公開鍵と秘密鍵」を作成し、「公開鍵」をgithubに登録の作業は完了。では、「ところでこれって何なの?」の説明に入ります。

「公開鍵」と「秘密鍵」とは?

「id_rsa」の方を秘密鍵、「id_rsa.pub」を公開鍵と呼びます。この二つの鍵はペアで使うものなのですが、公開鍵の方は誰にでも知らせて構わないのですが、秘密鍵の方は絶対に他人の手には渡らせてはいけません。なので、秘密鍵はweb上に置いたりしてはいけません。

黒い画面とgithubを連動させて使います。よくwebデザイナーの皆さんが使ってるFTPのようにファイルを送ったりするのですが、githubの場合、黒い画面からgitコマンドを使ってgithubにファイル送信などを行います。そのときに、自分のアカウントに登録した公開鍵と対になる秘密鍵が自分のコンピューターにあることで、「あなたはmachida本人ですね」、とgithubが認識し、machidaのgithubのリポジトリにファイルを送信することが出来るのです。FTPの場合、ユーザー名やパスワードを入れますが、それの代わりになるのが「公開鍵」と「秘密鍵」です。パスワードを入力するのと違って、こちらの場合は鍵のファイルを持っているだけでいいのです。秘密鍵が誰かの手に渡ってしまったら、その人がmachidaのなりすましをすることが出来てしまうので、秘密鍵は他人の手には渡らせてはいけない、という訳です。

まぁ、一回上記の作業をしてしまったら、今後はあんまり鍵について意識することもなくgithubが使えるのでなんだかよくわかんねぇなぁ、って方も安心してください。コンピューターを新しく買った場合なんかは注意です。古いほうのマシンを初期化する前に鍵をちゃんと新しいマシンに移しておきましょう。

それと、鍵自体の仕組みの話は飛ばしてしまいましたが、気になる方はRSA暗号でググるのがおすすめ。

次回はいよいよ実際にgithubを使う方に挑戦します。

この記事を書いた人
machida

続いて今回も黒い画面に触る前の準備の話。

やっぱり僕がMacを使ってるので、Macユーザー向けになってしまいます(windowsユーザーの方がいらっしゃいましたら記事を書いていただけると助かります)。

Macで開発するのに欠かせないのが「Xcode」。

Xcodeとは、Macでソフトを開発する人の為の便利なものが色々入ってる詰め合わせの様なもので、その中には「Xcode」、「Interface Builder」、「Instruments」、「Dashcode」などという開発者向けのツールが入っているようですが、僕は今のところそれらを全然使ったことがありません。
ただ、Xcodeをインストールすると、Macで黒い画面をやる際に便利なものも一緒にインストールすることが出来るので、これからMacで黒い画面を触ってみようというデザイナーには必須です。今後、KUROIGAMENでのMacの説明をするときは、Xcodeはインストールされた前提で記事を書くことになりますので、今回はXcodeのインストールの説明をしたいと思います。

OS XのディスクにXcodeは入っているので、そこからもインストールが出来るのですが(ディスクには入っていますが、インストールするにはディスクから自分でインストールさせる必要があります)、Apple Developerに登録をすればMac Dev Centerのサイトから最新のXcodeをダウンロードをすることが出来ます。

Xcodeのダウンロードは無料で出来ますが、iPhoneアプリを作ってそれをAppSotreに登録したりするのには、iOS Developer Programというのに登録する必要があって、そっちは有料です。

POINT!

もしかしたら職場などでエンジニアが発する「iPhoneは金かかるし、審査あるしやる気がしねぇ」という声を聞いたことがあるかもしれません。

「金かかるし、審査あるし」

は、今出てきたiOS Developer Programのことを言っています。

今回はディスクからではなく最新版のXcodeをMac Dev Centerからダウンロード、インストールを行いました。

手順

  1. まずはRegister as an Apple Developerへ行き、「Get Started」ボタンをクリック。

    Register as an Apple Developer

    フォームに記入して、最後に登録したメールアドレスにcodeが書かれたメールが届いたら、フォームにそのcodeを入力するか、そのメールのcodeをクリックして登録完了。そんなに難しい英語は出てこないので大丈夫。

  2. 登録が完了したら こちらからXcode and iOS SDKをダウンロード(ファイルが4G弱あるので結構時間がかかります)。インストールして完了。

    Xcode and iOS SDKをダウンロード

    余談ですが、僕の場合、Xcode and iOS SDKっていうリンクしかなくて、自分が欲しいのは「Xcode」なんだから「iOS SDK」はいらないんじゃないの?どこかに「Xcode」だけってあるんじゃないの?と、少し混乱しました。
    「Xcode」と「iOS SDK」は一緒になっているものしかないので、もしお近くのプログラマーがあなたに「Xcode入れておいてー」と言った場合、「Xcode and iOS SDK」を入れて大丈夫です。
    …という、以上何もわからないデザイナーはこんなところでびびったりするんですよ、というアピールでした。

POINT!

Apple Developer登録の途中で電話番号を入力するところがありますが、入力フォーマットが国際電話のものになってるので注意です。日本のCountry Codeは「81」です。市外局番は国際電話の場合、先頭のゼロを外すので、東京(03)のCity Codeは「3」になります。例えば、03-1234-1234っていう電話番号の人は、

81 - 3 - 12341234 - 空白
Country Code - Area / City Code - Number - Extension

になります。

…と書いてはみましたが、実際は「間違って入力しても問題無く登録できました」。よって、この部分の説明は意味なし!

おまけ

さて、上記の作業で「Xcode」と「iOS SDK」がインストールされた訳ですが、「iOS SDK」の中にiPhone / iPadのシミュレータが入ってます。それを立ち上げるとなんかいいものを無料でいただいちゃった感じがして嬉しいです※1。せっかくですのでそれを立ち上げてみましょう。

シュミレータの置いてある場所はここ

/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iOSシュミレータ(iPhone Simulator.app)

iPhoneいただきました!※1iOSシュミレータ(iPhone Simulator.app)

この記事を書いた人
machida

こんにちは、machidaです。

僕はこれを読んで頂いてるデザイナーの皆さん以上にプログラムが全然出来ない、黒い画面に恐怖を抱いてる一(イチ)デザイナーでありますので、その立場からの黒い画面との格闘したレポートを書いていこうと思います。

僕自身、そういう記事を前から読みたいと思っていたんですが、なかなかそういう記事ってないんですよね。じゃあKUROIGAMENはPVいっぱい稼いじゃうんじゃないの?なんて、汚いことも考えちゃったりしてます。
是非、これを読んだデザイナーの皆さんもブログにデザイナー目線での黒い画面の記事を書いて、僕の黒い画面の前で唸ってはググるの繰り返しで消費する無駄な時間の削減に協力していただきたいです。ついでに、そういった記事が増えればオフィスの床に散乱する頭髪の量の削減になるのではないかと期待しています。

さて、今回は黒い画面を使う前にやっておくといい設定の話。

僕は現在、komagataさんの中古のMacBookを使っているのですが、Macで黒い画面を使う場合、実は普通にMacを使っているときには隠されているフォルダやファイルをいじることが多々あります。黒い画面だけあればいい、っていうプログラマーさんには全然問題のないことなのかもしれないのですが、僕は実際に黒い画面で触っているフォルダやファイルを通常のファイルと同じように、「お、ちゃんとインストール出来てんじゃん」ってファインダーから確認して安心したい派です。

普段隠されたファイルやフォルダを簡単に見えるように設定する方法をご紹介。
「おいおいそこからかよ」、って感じですが、こういうエントリーを書いておけば、今後フォルダ内のキャプチャを貼ったときに、「注:.fileを表示する設定になっています(詳しくはこちら)」なんてリンクも貼れて便利かも、という魂胆もありです。

milligrammeさんに教えていただいた「TinkerTool」(milligrammeさんいつもありがとうございます!)。
これはMacのデフォルトの環境設定では変更できない設定変更を行うことが出来る便利ツールです。今回は普段隠されたファイルやフォルダを簡単に見えるようにする方法としてご紹介しますが、他にもDockの配置位置を細かく設定したりだとか、スクリーンショットの保存場所を変更したりなど、色んなことが出来るようです。そうそう、このツールはMac OS Xでしか使えないです(念のため)。

TinkerTool

手順

  1. まずは「TinkerTool」のサイトへ。
    http://www.bresink.com/osx/TinkerTool.html
    「Download」のページに行ってアプリをダウンロード。
  2. アプリケーションのフォルダに入れたら「TinkerTool」を起動させます。
  3. 「TinkerTool」の「Finder」タブ下にある「隠されたファイルおよびシステムファイルを表示する」というチェックボックスにチェックを入れる。
  4. 右下のFinderを再起動をボタンをクリック!

これで段隠されたファイルやフォルダが見れるようになりました。

TinkerTool

いつも見えてるとごちゃごちゃしてウザッって思う方も、チェックボックスを外すだけでまた元の見えなくなる設定に戻るので楽チン。

POINT!

Macは「.(ドット)」から始まるファイルは見えないようになっています。OS XはUNIXの流れを汲んだDarwinというOSがベースになっているそうなんですが、UNIXの隠しファイルのルールがそうなっている為、OS Xでもそうなってるようです。
あなたのHDDの中にある、非人道的な映像を収めた動画ファイルもドットを付けておけばOK!

最新の実績

  • Remember The Wordpress
  • happy1000days
  • happy1000days
  • happy1000days

こちらも合わせてどうぞ

  • webデザイナーの為の「本当は怖くない」“黒い画面”入門

アフィリエイト