2012年9月アーカイブ

昔は使っていなかったのに、なくても平気だったのに、今ではなくてはならない私のパートナー、バージョン管理ツールGit(ギット)。
使い始めたときはその便利さに腰が抜けそうになるほど感動しました。
ということで、自分が好きなものは人に薦めたいという原始的感情に基づき、Gitがどういうツールなのか、今さらの今さらの今さらながら簡単にご紹介。
初心者向けというより、これからGitを使ってみようと思っている、勉強しようと思っているGitを知らない人向け。
Gitをインストールして一通りこの手順をなぞるとGitのさわりがわかるようにって意識して書いたつもりです。
(インストール方法はMacなら最速で Git を Mac にインストールして基本的なコマンドを使う方法 | ウェブル、WinならmsysGitのインストール - ふってもハレてもあたりを参照すれば良いかと)
行頭に > がついている行がターミナル(Mac)やコマンドプロンプト(Win)で入力する部分となります。
CUIベースです。登場するコマンドはinit、add、commit、log、reset、reflog、branch、checkout、merge。
リポジトリの複製には触れていないためcloneコマンドも出てきません。
「git-commit --amendぐらいは使えよ!」「そんな効率悪い使い方するな!」「環境を分散させろ、分散!」「Gitの価値は複数人での共有にこそあるだろう!」「ツールじゃなくてシステムって呼べ!」等々、言いたいことは多数あるかと思いますが、導入記事ということでご容赦くださいませ。
みんなGit使おうよ!

まずはinitでリポジトリの作成

まずは、リポジトリってものを生成します。
リポジトリとは、要は情報を管理するものです。
たとえば、ユーザールートのDocuments配下にgittestというディレクトリがあって、そこを管理対象にしたいとします。
> cd ~/Documents/gittest/
にて移動して(説明不要かと思いますが、↑はgitのコマンドではないですよ)
> git init
initコマンド実行!
Initialized empty git repository in /Users/hoge/Documents/gittest/.git/
こう画面に表示されます。
はい、これだけでリポジトリできました。
配下のディレクトリも管理対象になります。

ファイルつくってcommitしてみよう

このディレクトリに新しく、text.txtというテキストファイルを作ったとします。
中身は↓
テストデータだよ。
この時点でコミットしてみます。
コミットっていうのは超端的に言えば状態の記録。
> git add .
> git commit -m "最初のコミットだよ!"
commitコマンド実行!
commitの前のaddはどのファイルを対象とするかの指定なのですが、 .(半角スペースと.)とすることで全ファイルを対象とできます。
"〜"の中身はなにをしたコミットか後でわかるようにするためのコメントです。
[master (root-commit) e8c1294] 最初のコミットだよ! 1 file changed, 1 insertion(+) create mode 100644 test.txt
画面には何個のファイルをどれだけ変更したかの情報が表示されます。
これで現在の状態が記録されました。

logで履歴の確認

ここで
> git log
って打つと
commit e8c129432853bc0f4e3c7d74e6d0b6888982731b
Author: TaguchiKatan
Date: Sat Sep 29 00:55:00 2012 +0900

最初のコミットだよ!
という風に履歴確認できます。
このときにcommitの後ろに表示される文字列は、特定のコミットまで戻したいとき等に使用します(後述しますが、全桁はいらないです)。

やっぱり今のコミットなしなし! そんなときはreset --soft

たとえば、ファイルの変更とコミットを繰り返したとします。
テストデータだよ。お腹空いたよ。
> git add .
> git commit -m "二度目のコミットだよ!"
テストデータだよ。お腹空いたよ。眠いよ。
> git add .
> git commit -m "三度目のコミットだよ!"
テストデータだよ。お腹空いたよ。眠いよ。秋だね。
> git add .
> git commit -m "四度目のコミットだよ!"
git便利でお腹がすいた。
> git add .
> git commit -m "五度目のコミットだよ!"
いったん履歴を見てみましょう。
履歴を見るのはlogコマンドですが、オプションを指定すると省略形で見やすくなります。
> git log --oneline
0ba26ab 五度目のコミットだよ!
715a0e6 四度目のコミットだよ!
4a8fc57 三度目のコミットだよ!
2d82027 二度目のコミットだよ!
e8c1294 最初のコミットだよ!
オプションは色々あるので、複雑な開発をするときは調べてみると良いですよ!
さて、この状態で最後にしたコミットを取り消したいときはreset!
> git reset --soft HEAD^
これで五度目のコミットはなかったことに!
logを見てみると
> git log --oneline
715a0e6 四度目のコミットだよ!
4a8fc57 三度目のコミットだよ!
2d82027 二度目のコミットだよ!
e8c1294 最初のコミットだよ!
こう変わってます。
コマンドで使用したHEADは最新のコミットを意味します。
HEADの後ろの^はいくつ前かを意味します。
HEAD^ならHEADの一つ前。
HEAD^^ならHEADの二つ前。
つまり、上のコマンドは、最新のコミットの一つ前にsoftに(ファイルはいじらずコミットの記録だけ)戻す、って意味です。
ファイルそのものは変わっていません。
このHEAD^の部分にはlogコマンドで取得した文字列を指定することもできます。
文字列全部を入力せず、--onelineを指定したときに出た先頭数桁だけで大丈夫です。

ファイルそのもの元に戻したい! そんなときはreset --hard

ファイルそのものを二度目のコミットまで戻したい。
そんなときは、softではなくhard!
今は四度目のコミット時点にいるので、二度目のコミットまで戻すには^が二つ。
> git reset --hard HEAD^^
test.txtを開くと
テストデータだよ。お腹空いたよ。
二度目のコミット時点のデータまで戻った!
ちなみに、^を一つもつけなければ最新のコミットに戻ります。
最後のコミット以降の変更をすべて削除したいときにどうぞ。

ファイルを元に戻しすぎちゃった! そんなときはreflog

本当に戻したかったのは二度目じゃなくて三度目のコミットだった!
というときはまずreflogコマンド。
> git reflog
2d82027 HEAD@{0}: reset: moving to HEAD^^
715a0e6 HEAD@{1}: reset: moving to HEAD^
0ba26ab HEAD@{2}: commit: 五度目のコミットだよ!
715a0e6 HEAD@{3}: commit: 四度目のコミットだよ!
4a8fc57 HEAD@{4}: commit: 三度目のコミットだよ!
2d82027 HEAD@{5}: commit: 二度目のコミットだよ!
e8c1294 HEAD@{6}: commit (initial): 最初のコミットだよ!
はい、これまでやったことが全部出ました。
三度目のコミットはHEAD@{4}なので
> git reset --hard HEAD@{4}
test.txtを開くと
テストデータだよ。お腹空いたよ。眠いよ。
はい、元通り!

branchで枝分かれ

gitにはブランチというものがあります。
一言で言うなら枝分かれ。
要は今のファイル構成を複製した別環境を用意すること。
> git branch
と入力すると
* master
こう表示されました。
これは、今masterというブランチにいるよという意味です。
branchの後ろになにもつけないと今いるブランチが確認できます。
masterブランチはデフォルトで作られます。
> git branch master_temp
と入力すると新たにmaster_tempというブランチが作られ
> git branch
* master
master_temp
状態はこうなります。
> git checkout master_temp
と入力するとmaster_tempに移動します。
現在の状態を確認すると
> git branch
master
* master_temp
こうなります。
*の位置がmaster_tempに変わりました。
master_tempの中身はmasterと現時点では同じです。
さて、master_tempに移った状態で、test.txtを
テストデータだよ。お腹空いたよ。眠いよ。
から
中身を変えてみたよ。
こう変えて
> git add .
> git commit -m "大幅に変えてみたよ!"
コミット実行!
このコミットはmaster_tempで行われたもののため、masterには影響していません。
> git checkout master
masterに戻って、test.txtを見ると
テストデータだよ。お腹空いたよ。眠いよ。
はい、変わっていません!

mergeでブランチの内容を適用!

masterにmaster_tempで行った変更を適用したいときは
> git branch
* master
master_temp
今masterにいることを念のため確認してから
> git merge master_temp
test.txtを開くと
中身を変えてみたよ。
となります!
不要になったブランチを削除するなら
> git branch -d master_temp
-dと削除するブランチ名をつけてbranch実行。
状態を確認すると
> git branch
* master
ばっちり消えました!

最後に

まだまだGitの魅力の1/100も伝えられていません!
続きはぜひ使ってあなた自身の目で、身体で、気持ちで感じてください!
GitHubについてや複数人での使用についてもそのうちまとめたいところ。
みんなGit使おうよ!(二度目)

キャプチャー


またまた新しいWebサービスを公開しました。


JavaScriptプログラミングをこれから勉強する、あるいは、勉強を始めたばかりの方向けのコンテンツです。


Simple JavaScript Codes For Beginners


順番に理解すると基本的な文法が一通り身につくよう意識してJavaScriptのコードをまとめました。
Runで実行、BackとNextで戻ると進む、Copyでコードをクリップボードにコピー、SaveとLoadで進んだ地点の保存と呼び出しとなっています。


コード数は約150です。どのコードも10行程度と短いです。
要点を理解するためのものなので。


内容としてはalert、コメント、変数、配列、文字列、if、switch、while、for、関数、オブジェクト、for in。
JavaScriptそのものの文法を身につけるもののため、DOM(htmlやxmlを扱う方法)には触れていません。
DOMに触れるものも作ってはみたいのですが、どういうUIにすれば理解しやすく使いやすいか悩み中。


制作者としてのモットーは「言葉で語るなコードで語れ」。
JavaScriptだって言葉だろうというつっこみはなしでお願いします。
頭を悩ませながら進めてもらうため、説明は出来る限り少なめとしました。


PCとiPhoneで画面が異なりますが、表示されるコードはまったく同じです。
見栄えをiPhone用に最適化しているだけです。
よければホームにアイコンつけてネイティブアプリみたいに使ってください。


キャプチャー


AndroidもiPhoneと同じ表示がされるようにはしてありますが、動作確認は不十分です。


ちょっとだけ真面目な話をしますと、前々から自分の得た知識を少しでも良い形で人に伝えたいなと考えてきました。
その答えはまだ全然導き出せてはいないのですが、今回のコンテンツがその大きな一歩になればと思っています。


ご意見、ご要望等はTwitterの私のアカウントに気軽にどうぞ。


今後ともよろしくお願いいたします。

ふりがな自動挿入ツールを公開しました

| カテゴリ:Web・IT

新たなWebサービスを公開しました。


Web tool to add furigana automatically to Japanese text-ふりがな自動挿入ツール-


その名の通り、入力したテキストに自動でふりがなをつけるサービスです。


Yahoo!デベロッパーネットワークのルビ振りAPIを使っています。
100%とはいかないですが、90%も厳しいかもですが、けっこう高精度です。


このblogを読まれている方はおそらく日本語のできる方なので、このツールの使い道はないかもしれないと思います。


もしも近くに日本語勉強中の方がいて、こういうツールを欲しがっていましたら、ぜひ教えてあげていただきたいです。


私自身、英語を勉強するときに海外製のツールにかなり助けられたので、少しでもその恩返しになったなら嬉しいなと。


This web tool can add furigana automatically to Japanese text(up to 100KB , about 50000 characters).


キャプチャー

はい、タイトルの通りです。
久々にアプリを開発してみました。
iPhone/iPad両方に対応したアプリです。
iPad対応アプリは初めてです。


ダウンロードはこちらをクリック(iTunesStoreへのリンクです)。


出来事と日付を登録すると、それからどれだけの時間が経ったか、あるいはそれまで後どれぐらいの時間があるかを一覧表で表示します。


最初は配布するつもりではなく、開発の勘を取り戻すためにと自分用で作っていたのですが、せっかく作ったのだから配布しようかなと。
めちゃくちゃシンプルでこれといったデザインもしていないため、Appleの審査で機能不足でリジェクトされそうだと不安だったので、無事にこうしてリリースされてほっとしています。
とりあえず言えるのは、私にとっては超必須アプリ!


ダウンロードしてみていただけると嬉しいです。
よろしくお願いいたします。


キャプチャー

キャプチャー

はい、タイトルの通りです。

これまでに開発をしてきた中で、様々な開発環境、Webサービス、ライブラリ、プラグインのお世話になってきました。もういくら感謝してもしたりないというほどに。

今回、それらを一ページでまとめてみました。だいたい60個ぐらい。

基本的に無料で使える、あるいは制限有りの無料サービスが用意されているものだけを揃えたつもりです。

私のよく使う技術がFlash(ActionScript)、Objective-C、JavaScriptのため、内容はそっち寄りです。

定番ばかりで目新しいものがないかなとは思いつつも、このリンクで利用者が増えて開発者への新たなる感謝が生まれればこれ幸い!

※本記事は更新予定ありませんが、ほぼ同じ内容をまとめたこちらのページのLinkの章は随時更新予定です。

IDE & Text Editor

  • Xcode

    Mac、iPhone、iPad向け開発用のアップルによる統合開発環境。
    iPhone、iPadのシミュレータがついているのでサイトの表示確認にも。

  • Android SDK

    Androidアプリ開発用のEclipseプラグイン。
    Android用シミュレータがついているのでサイトの表示確認にも。

  • Eclipse

    Java言語等に対応した統合開発環境

  • Aptana Studio

    EclipseベースのWebアプリケーション制作用統合開発環境。
    JavaScript開発でお世話になっています。

  • Sakura Editor

    MS Windows用のテキストエディタ

  • mi

    Mac OS X 用のテキストエディタ

  • Zen-Coding

    HTMLやXML等の様々なフォーマットでのコーディングを高速化するプラグイン。
    私はまだ慣れていないですが、慣れるとかなり高速でコーディングできるようになるはず。

その他ソフトウェア

  • LibreOffice

    オープンソースによるWindows、Macintosh、Linux等に対応したオフィススイート。要は無料のWordやExcelやPowerPointみたいなもの。
    開発用ソフトウェアではないですが、Mac環境でかなり重宝していますためリストに載せさせていただきました。

  • 縮小専用

    画像ファイルを一括で縮小

  • IETester

    Internet Explorerのバージョン毎の表示確認。
    つまりは旧バージョンのIEのセットです。

  • SWF Animation Converter

    SWFファイルをJavaScript変換。
    JavaScript変換のためというより、全フレームの静止画切り出し用として使わせてもらっています。

  • ブラウザ

    動作確認のため、メジャーどころは一通りインストールしています。日常使いはFirefoxとGoogle Chromeです。

    Firefox , Google Chrome , Safari , Opera , Internet Explorer

  • FireMobileSimulator

    携帯端末(DoCoMo/Au/SoftBank)での表示を確認できるFirefoxアドオン。
    実機確認をすべきなのはもちろんですが、その前段階として使っています。

Webサービス

  • GitHub

    コード共有サイト。
    最近ではこのサイトを使用して自分のコードを公開しているプログラマが増えましたね。

  • Stack Overflow

    プログラミングの Q&Aサイト。
    コードで検索するとこのサイトが出ることが多いです。

  • Codecademy

    コード学習サイト。
    手を動かしながら勉強できるのがいいです。

  • wonderfl build flash online

    Flashクリエイターのコミュニケーションを促進するソーシャル・ネットワーキング・サービス。
    ブラウザ上でActionScript3.0のコードを書いてブラウザ上で動かせます。

  • jsdo.it

    WEBデザイナー、マークアップエンジニア、JavaScriptエンジニアといったフロントエンドエンジニアのためのコードコミュニティ。
    こちらもブラウザ上でコードを書いてブラウザ上で動作させられます。

  • Dropbox

    様々なプラットフォーム向けに最適化されたファイル共有サービス。
    なにが素晴らしいって、そのUI。

  • Color Scheme Designer 3

    配色自動生成ツール。
    メインとなる色コードを指定するとそれに合った色を表示してくれます。

  • Preloaders.net

    ローディング画像生成ツール。
    あのぐるぐる回るやつを作ってくれます。

  • Dynamic Dummy Image Generator

    ダミー画像生成ツール。
    サイト作成の当て画像はこちらでどうぞ。

  • stripe mania

    ストライプ画像生成ツール

  • iCone

    iPhone風のアイコン生成ツール

  • FavIcon from Pics

    アニメーション付き、無しのfavicon生成ツール

  • The W3C Markup Validation Service

    XHTML/HTML文法チェックツール

  • AddThis

    FacebookとかTwitterとか様々なシェアボタンの生成、管理ツール。
    アクセス解析も可能です。

  • dlvr.it

    BlogのフィードをTwitterやFacebookに自動配信

  • Zenback

    ブログに関連記事や関連情報を表示するサービス。
    ブログ記事の末尾にZenbackがついているのを誰もが一度は見たことあるはず。
    この記事の終わりにもついています。

  • Backlog

    Webベースのプロジェクト管理ツール。
    ファイルの共有や意見のやりとりに重宝します。

  • Google Swiffy

    SWFファイルのHTML5(JavaScript)変換ツール。
    JavaScript変換はFlashでもCS6から機能として入りましたが、こちらはそれと違ってcanvasタグを使わないのがありがたい。

  • Yahoo!デベロッパーネットワーク

    開発者向けのAPIやサービスを提供。
    検索関連だけではなく、ニュースや字句解析等も提供。

  • TestFlight

    開発中のiOSアプリ共有サービス

  • Google Analytics

    サイトの詳細アクセス解析

  • Google AdSense

    広告サービス

  • Amazon Associates

    アフィリエイトサービス。
    Amazon商品にリンクしてお金を貰うサービス。

  • AWS - Amazon Web Services

    クラウドプラットフォーム支援サービス。
    アフィリエイトをカスタマイズしたい人もこちらをどうぞ。

JavaScript Library & Plugin

  • html5.js

    html5の新要素をInternet Explorer8以前に対応

  • Smooth scrolling

    ページ内リンクをスクロール表示

  • SWFObject

    SWFファイルの埋め込み支援

  • jQuery

    JavaScriptを扱いやすくするライブラリ。
    最近では「JavaScriptができる」が「jQueryができる」と同意で扱われることが多いぐらいの定番ライブラリ。

  • jQuery Mobile

    スマートフォンとタブレット向けにサイトを最適化するjQueryプラグイン

  • jQuery.socialbutton

    FacebookやTwitter等の様々なシェアボタンを簡単につけられるjQueryプラグイン

  • JQueryCookie

    Cookieを簡単に扱えるようにするためのjQueryプラグイン

  • jQuery ZeroClipboard

    クリップボードにコピーを行うためのjQueryプラグイン

  • jQuery-JSONP

    JSONPを行うためのjQueryプラグイン。
    PHPと通信するときに使わせていただきました。

  • jQuery Bar Graph Plugin

    棒グラフを書くためのjQuryプラグイン

ActionScript Framework & Library

  • Adobe Flex

    ActionScript開発用フレームワーク。
    SDKだけなら無料です。

  • Papervision3D

    3D描画ライブラリ。
    今ではFlashに標準に3Dがつきましたが、なかった頃はかなりお世話になりました。

  • sketchbook

    三角形や星等の描画ヘルパーライブラリー。
    ActionScript3.0で図形を扱う際は入れておいて損はないです。

  • Tweener

    TweenとTrasitionを扱いやすくするライブラリ

  • PageFlip

    ページめくりを実装したFlashファイル

CSS

PHP Library

  • PEAR

    PHP用ライブラリ提供サービス。
    このリストに含めるような類いのものではない気もしましたが、せっかくなので紹介。

  • HTTP_OAuth

    OAuth通信用パッケージ。
    TwitterでのOAuth認証で使わせていただきました。

CMS Framework

  • WordPress

    Web関係者で知らない人はいないであろう定番CMS

  • MovableType

    Web関係者で知らない人はいないであろう定番CMS

「せっかく色々開発してきたんだから、その成果なり得た知識なりをもっと役立てたい!」


という思いを形にする一つのきっかけになればと考えまして、これまでにプログラミングしたものを1ページでまとめてみました。
お勧めのサイトや本もまだ数は少ないですが載せてあります。


Programs by Taguchi Katan


仕事関連は執筆に携わった本だけで、それ以外はすべて仕事外で開発したものです。
これですべてというわけではないですが、主となるものは掲載しています。


英語もつけていますが、文章チェックずさんなのでこれはまた時間を見つけてもっとしっかり書き直したい。
というか、英語に関わらずもうちょっといい形でまとめたいなという思いがかなりあり。


まとめを見た上でなにか聞きたいことがあれば、Twitterで気軽に絡んでください。
プログラミングのことはほとんどつぶやいていませんが、プログラミングの話は大好きですので。


今後ともどうぞよろしくお願いいたします。

1

概要

青春B運営メンバー多口カタンによる雑記blogです。
自己紹介はこちら。開発物をまとめたものはこちら
 
ヘッダーイラストはkojiさん制作です。
感想・意見・要望等ありましたら気軽にフォームにてコンタクトくださいませ。
 
Twitterはじめましたので誰でも気軽に声かけてくださいね。