2014.04.15

自宅を流離うのにgitを使う事にした。

nebazu
MBPをぬくぬくな居間で使う為に色々試行錯誤をしているうちにだんだん春になってきました。
しかし、そこは北国。まだまだ雪がありますよ。へたすりゃ積もらないなりに降ってますよ(´・ω・)。
そして、やっぱり部屋寒い。
ということで、あたたか〜い居間からサイトを制作するためにAptana Studio3をそれぞれのmacにインストールして、gitでサイト管理を始めました。

ほんとはAptanaのワークスペースを共有したいだけだった

そもそもgitが何か分からないのに導入しようとした動機は、ヴァージョン管理が目的というよりは愛用のAptana Studio3のワークスペースをサブ機から共有できないことからでした。
(それぞれマシーンのAptanaごとに.metadataが作られ、共有したいワークスペースにはもうメイン機の.metadataがあるわけでして。あ、だめじゃんこれ。と早々に退散。)

分散型管理って何?
同じデータをそれぞれのマシーンに置き、それぞれの変更を同期をとりつつ管理できるという仕組みかなぁ。
リモートリポジトリというものを共有して、そこにデータを上げたり、取ってきたりするのか。と適当に理解。
JQueryとかZencodingとかのバンドルをダウンロードするためだけにあるんじゃないんだ!これ!という事で、メイン機にはgitもう入ってるし使ってみることにしました。

小難しいことは後からするとして、とりあえずlocalプロトコルで(何の事はない普通にファイル共有)自分のLan内だけだけど、ぬくぬくの自宅モバイルが前提ですからね十分(・ω・´)。
それに、gitを使うようになっていい事が沢山ありましたよ。

gitのインストールはどうだったけ?

win版ではデフォルトで簡易版gitが付いてくるらしいけど、Macの人はgit本体を自分で入れなきゃなりません。
Snow Leopardの時はXcodeを入れて…MacPortsを入れて…MacPortsからgit-coreを入れて…という、特にXcodeを入れるのに気の遠くなるような作業が必要でした。

参考サイト:
【Mac】OS X10.6.8にXcodeをインストールする: なんとなくかいてみる
Cocoaの日々: MacPorts と git インストール

Lionの時も同様の手順を踏んでいたような気がするんですが、Apple DeveloperからCommand Line Toolsを単体で入れられるようになったようです。
Xcodeの行程をすっ飛ばせるってすばらしい。でも今はXcode簡単にAPP Storeから入手できますね。

新しいMBPのMavericksではgitのインストールは恐ろしいほど楽チンでした。
Aputanaをインストールする時、Command Line Toolsが要るし!インストールする?とか気の利いたアラートがでて、入れたらCommand Line Toolsにgitも入ってました。(Xcodeは入れませんでした。MBPには容量でかい…)
Command Line Toolsのgitは(Apple Git-xx.x)とかになり、本家gitよりバージョンの更新が遅かったりするようです。常に最新版を使いたくなったらHomebrewなどでインストールし直そうと思いますだ。

参考サイト:
Macのgitをhomebrewでインストールしたものに変更する – Rock’n’Hack ブログ

ただし、Aptanaの設定もどっかいじらんとダメかもしれない。それはその時また…

gitの準備をする

今までもサイト構築に使っていたメイン機にはAputanaのワークスペース内にオリジナルのプロジェクトフォルダがあります。
このフォルダをそのままgitリポジトリにしました。

オリジナルのプロジェクトフォルダにgitリポジトリを設置

ターミナルからプロジェクトフォルダに移動して

リモートリポジトリはまだ無いけど、作る予定の所のパスを設定。

その他、自分の情報を設定しておく。これは–globalにしておくと便利。

プロジェクトフォルダの中に元々あったhtmlやimgフォルダなどをgitの管理下に置く。

共有するリモートリポジトリを作る

プロジェクトフォルダがあるのと同じメイン機にリモートリポジトリを作りました。HDD換装したから容量あるしぃ〜でも分散してないw。

wainoprojectディレクトリに移動してリモートリポジトリとなるwaino.gitフォルダを作る。拡張子.gitは必須。
リモートリポジトリにはinitにオプションをつけます。

–bareは内容のファイルとかを作らないgitのデータのみの生?のリポジトリを作る。
–sharedをつけるとややこしいパーミッションを良きに計らってくれる。共有するために必要。

無事にリモートリポジトリができたので、オリジナルのプロジェクトフォルダに戻ってpush!

色々な表示がだらららーっと表示されて、できたよ!っぽいメッセージが出るけど、リモートリポジトリにデータが無事にpushされたかどうか心配だったりする。
次のcloneで安心できるよ!

サブ機にクローンしてローカルリポジトリを作る

居間で使うサブ機MBPにAputanaのワークスペースを作って置き、ここにリモートリポジトリからデータをクローンしてくる。
サブ機で使うusernameとmailを設定。メイン機と違う名前にしたほうが後々commitなど管理しやすい。

ワークスペースにしたディレクトリに移動して

作られるディレクトリの名前を変える場合は、スペースを一つあけてbetuno名前を入れる。
色々な表示がだらららーっと表示されて、できたよー!っぽいメッセージが英語で出たら、成功。
cloneして来たリポジトリには最初からremoteの場所の設定もされている。
Finderから見てみるとメイン機のオリジナルのプロジェクトフォルダ(ローカルリポジトリ)と全く同じように材料が揃ってる。わーい(∩・ω・)∩

Aputana Studio3でgitを使う

サブ機でAptanaを開き、通常通りプロジェクトエクスプローラー>ローカルファイル・システムからcloneしてきたフォルダを辿り、右クリックでpromote to project…を選び、プロジェクトにすると…
いきなりAptanaのGUIでgitが使えるようになってます。はー出来た(∩・ω・)∩

もちろん、最初にリポジトリにしたオリジナルのプロジェクトもgit仕様になってます。横に[master]とか出てます。
Aptanaから直接操作してリポジトリを作ったりしたことはないのですが、Aptanaでやらない方が簡単な予感…

apt_git800
文字化けやスペルミスありますがtest画像。

最初はターミナルの使い方を最低限でも覚えようと思ってMac本体のアプリケーション>ユーティリティ>ターミナルを使っていたんですが、Aputanaにもありましたターミナル。git入れる時使った…そういえば。
ウィンドウ>ビューの表示>ターミナルで下のカラムに表示させてます。

コマンドを打ち込まなくてもプロジェクトエクスプローラーは右クリック>チームで、APP Explorerからはバーから直接or右クリックで基本的な操作が出来ます。
変更してまだインデックスにaddしてないファイルや、未コミット、未プッシュもエクスプローラー上にマークされるので便利です。

”リソースヒストリー”ではファイルごとのコミット履歴も見られます。ただ、全体の履歴の見方がわからないので、ターミナルからlogとか打ち込んだりしてます。
ターミナル上でcheckoutとかするとなかなかExplorerで表示が切り替わらなかったり少々難はありますが、全部が全部AptanaからGUIの操作をしようと思わなければ、なかなか使えるのではないかと。
EGitとか入れたらどれだけ便利なんだという世界です。
しかし、EGit。
ヘルプ>新規ソフトウェアのインストール>URL入力 からインストーラーまでは辿り付けるのすが、なんか足りないってAptanaに怒られてインストール出来ないので、しばらくはこのデフォルトの機能とターミナルでしのごうと思います。そんなに大した事してないもん…な

以上、git備忘録でした。まだまだ続くよ(`・ω・´)

2014.04.07

居間とMBPとBluetoothマウスと母ちゃん

mouse
Mac Book Pro を使うにあたってマウスを買い足しました。

MBPは母ちゃんも使うので、ちょっと操作が分かりにくいMagic Mouseは却下。
いわゆる普通のマウスがいい。
最近ではマウスにしっぽ(ケーブル)が付いてるのはもう使いにくい体になってしまったし、MBPのUSBポートをマウスの受信機で消費するのもなんだし出っ張るし、そこはBluetoothで行きたい。
ボタンがあんまり多いと母ちゃんはむちゃくちゃするので、シンプルなもの。
それでいて自分が使うのに機能を割当られるといいよね。
って条件で選んだらLOGICOOL Bluetoothマウス M557になりますた。

お色は母ちゃんが喜ぶレッドだす。
Bluetoothのつかみもばっちりです。Macへの接続に特に苦労はありませんでした。

真ん中のウィンドウズボタンが気に入らないけどw ウィンドウズボタンの無いモデルM558がApple Storeで販売されてますが…高いし白しかないのよ。
ここには、Mission Controlを割当ててます。
Mission Control はパソコンってなにそれおいしい?っていううちの母のような人にも分かりやすいみたいです。
母ちゃんはSafariくらいしか触らないんだけど、謎の画面が開いていたらとりあえず真ん中のボタンを押して、Mission Control からSafari(常に起動させてる)を選んで使いこなしております。
変なところを触らなくて良いそうですw

Logicool Preference Manager はボタンをカスタマイズするユーティリティでございましてロジのサイトからダウンロードできます。
環境設定から開き、直感的にボタンに機能を割り当てられます。

ホイールが左右に倒れるチルトホイールの機能は大変便利です。同時にページ間とアプリ間のスワイプを割り当てることができないのがちょっと不便ですが。

私はちょっとホイールの感触が気に入らないのですが、値段の割にはまずまずのマウスではないかと思います。電池も最大一年持つしね。ここはMagic Mouseよりも偉いw

2014.04.06

Mac Book Pro Retinaを今、居間にw

mbp

2月の末に、Mac Book Pro Retina 13 late 2013 を買いました。
買った動機は冬寒い。
に尽きます。
喜び勇んで開封したので開封の儀どころではなく、iphoneの変な画像しかないw

ホカホカの居間で出来る作業はホカホカでしたい。
ガラヶの家族も居間でネットしたいよね。
ということでAppleStoreでぽちりました。

なぜエントリーモデル?(オチあり)

当たり前ですが、どこで使うか。何に使うか。が機種選定の鍵になるんではないかと思います。
それプラス、オーバースペックの”オーバー”の部分にお金を使うことないよね。という考え方で挑みました。

MBPでネットサーフィン以外にする作業としては、

PhotoShopでちょっとした切り抜き、リサイズなど画像の編集
Aptanaでサイト構築 これがメイン

今までと同じ作業しかしない訳で。
snow leopard搭載のiMac late2006のスペックでも十分間に合ってる作業です。
MBPとの性能差は火を見るよりも明らかですし、今回MBPに求めたものが機動性のみだったという。
機動性のみだとすると選択肢に13inc Airが入ってきます。
しかしストレージ容量を我慢すればRetinaのMBPとの差額を6,000円と見ることもできます…
あと6,000円で2.4GHzでIPSでRetina。余裕で出せます!
画質と色は”オーバー”の部分じゃないです。しかもAirのディスプレイには当たり外れがあるという。

そこで貧乏なりに頑張って、Mac Book Pro Retina の13インチモデルの一番お安いME864J/Aを選択。
メモリだけ8GBにカスタマイズしました。
あとで自分では増やせないし本当は16GB積みたかったけど…貧乏だもん(´・ω・`)。

AppleStoreではME864J/Aを8GBにメモリ増設した場合、13inc真ん中のクラスME865J/A吊るし(8GB/256GB)との差額は1万円ほどになります。フラッシュストレージの容量128MBに一万円出すか出さないかの選択になります。

ただし!ニコニコ一括払いをするなら量販店でME865J/A 8GB/256GB一択です。AppleStoreのME864J/A カスタマイズより、交渉でポイントとかなんとかお得になる場合の方が多いんじゃないかなぁ。交渉とか関係ないAmazonですら!

けど…今回、私はAppleローン1%を利用して1年払いにしたかったのでございます。
以前iMacを買った時に1口座をすっからかんにして貯蓄し直さなかったという苦い経験から量販店との差には目を瞑ることにしましたw
そんな訳でエントリーモデルCTO 8GBなのですw。
結局は財布と相談よねというオチが着いてしまいますが、身の丈にあった選択ではないかと思われます。

ストレージ容量対策

予想通りメインのお絵描き用マッスィーンもサブのサーバーマッスィーンもあるし、そこにプラスするぶんにはMBPエントリーモデルで十分でございました。
心配になるのが内蔵ストレージの容量。
なんだかんだ必要最低限AptanaとPhotoshopとESETをインストールして現在ストレージは30GB使用してます。
どのみち容量に余裕があってもTime Machineを使いたくなるので、外付けを用意するのは必須。進行形のファイルをMBPに、作業が終了したものに関しては外付けに保存することにしました。
もともとAirMac Extremeを通してUSB接続の外付けハードディスクは無線でつながってる訳で、MBPに余計なケーブルを繫がずとも快適にバックアップと保存ができました。
これからMBPを入れたLAN環境の構築をするならAirMac Extremeはすごく便利です。あってよかったAirMac。
うちのは第二世代だけど(;´Д`)平べったくてかわいいもんね!

画面共有で快適すぎる

そしてこれが一番ありがたかったw
MBPがあれば、居間から寒い部屋のMacを操作できるのです!
今までは寒い部屋にMac2台が隣り合っておいてあり、座ったまま椅子でコロコロ移動するだけでしたから特に画面共有の必要性はなく恩恵はなかったけれど、MBPを今で使うにあたってこれほど便利なことはありません。
今やってるgit学習も一台のMacでコンフリクトしながらあったかい部屋でできるってもんです。うがー
マウス、キーボードを持ち替えないってのは、”Teleport”で経験済みなのですが、一つのモニタで違うマッスイーンを操作するのはモニタの前をうろちょろしなくていいし、なんだかことの外はかどります。

あとがき

Retinaディスプレイはどうかと言うと、文字の読み書きは快適です。
言われてるように普通のディスプレイが汚くて見られなくなる!ということは無いです。普通のディスプレイを見た時、最初違和感はありますが数分で馴れます。
どちらかというと馴れないのは、13inc RetinaにおけるWEBサイトの画像のぼやけ方です。ロゴ、文字画像周りはWEB制作側が対応をしていかなきゃなぁーと実感しましま。

その他、MBPを導入してwebの開発環境として多少見なおさなくてはならない部分もありましたが、見直しですごく環境が向上しました。
それはまた後ほど、晒してゆきたいと思います。
まだモバイルも家庭内限定ですしw 試してみたいことが沢山。夢が広がりますwうはww

2014.03.26

本棚

Photoshopを使うようになってからほぼ三冊の本に教わったなぁと今にして思う。

グラフィック社
フォトショップ・スーパーイラストレーション 寺越慶司 著
グラフィック社
寺沢武一のデジタルマンガ解剖学 寺沢武一
MdN
フォトショップ講座 ベン・ウィルモア 著

すべてPhotoshop 5.0時代の本だー。
特に寺越慶司さんの著書にはいろんな事を教わった。チャンネルとマスクについてほぼ全てこの本に教わった。

新しいMacを買ってPhotoshopをインストールして何だか思い出した。

2014.01.26

AmazonJSでサイドバーにちまっとアマゾン

WordPressでアマゾンアソシエイトを表示してます。
ネタに付随してアマゾンへのリンクをするときはいいのです。
昔の記事の商品に新しいバージョンがでてたり、記事をかくほどでもないけどお気に入りの商品をちまっと載せて置きたい。
そんな時にサイドバーに表示できたらいいなと思っておりました。
Amazon純正のは使いにくいし、なんかサイドバーに特化したプラグインでもないかな〜と数日しらべたんですが見つけられませんでした。

ネットをあてもなくさまよってたら、AmazonJSのショートコードをカスタムフィールドを使ってサイドバーに設置する方法に出逢いました!。

もう、今すぐこちら!

WordPressでAmazonのアソシエイトリンクを設置する | Webクリエイターネット
プラグインの設置のみならず、Amazonアソシエイトプログラムに登録するところから、英語で敷居の高いProduct Advertising APIの申し込み、設置のためのPHPスクリプトまで至れり尽くせりなのです!
ありがとう!ありがとう!
PHPぃ?えちょって食べれるの?というこの私にも、ほらこの通り!
amaside
ちょっとCSSをいじりました(・ω・)それしかわかんないしねw

AmazonJS

APIの設定などはWebクリエイターネットさんを見れば一目瞭然なので設置テストとプラグインの変更点だけ記したいと思います。
このAmazonJS。シンプルでとても使いやすいです。
AmazonJS (WordPress Plugin) | kwLog
制作者さまの理念を読んでなるほどと思いました。設定とともに一読されることをお勧めします!
すばらしいプラグインです!makoto_kwさま、ありがとうございます。

さて、本文への設置テスト。

うわなにこれ欲しい。茶碗…
リンクカラーなど当ブログのCSSが効いてたので、いきなり設置しても違和感がありませんでした。シンプルで押し付けない。ほんといいです。
cssに少し手を加えてみました。
v0.6から画像のサイズもショートコードで指定できるようになりました。imgsize属性でsmall, medium, largeが指定できます。
当サイトではcssをいじくってるので画像と文字部分のマージンが広くなってますが、デフォルトでは画像サイズにあわせたマージンが美しく設定されてます。

cssをオリジナルの物に替えるには作者さまのサイトの『高度な使い方』”スタイルの拡張”で説明されてます。

ダッシュボードの配色エクトプラズムってなんなの

ダッシュボードの配色エクトプラズムってなんなの

カスタムCSSにチェックをいれて、使用しているテーマの中にamazonjs.cssというファイルを作り、上書きしたいcssを変更。
.amazonjs_item と .amazonjs_item .amazonjs_indicatorのbackgroundのurlの階層を書き換えるのをお忘れなきよう。
amazonjs.jsを替える場合も同様にテーマ内にファイルを作り、チェックを入れてください。

カスタムフィールドを使いサイドバーに設置する

カスタムフィールド用の便利なプラグインを使ってないので、デフォルトのカスタムフィールドの場合になります。
まず、土台となる固定ページを作りました。
カスタムフィールドの”名前”の新規追加を押して分かりやすい名前を付け、値にAmazonJSの出してくれるショートコードをペースト。
『カスタムフィールドを追加』ボタンを押して、ページを公開して準備が整いました。
ループ以外の場所にカスタムフィールドを出力する時、ページのidが必要なので控ておいた。(『短縮URLを取得』ボタンを押すと簡単にidわかりますん)

サイドバーのテンプレートの(私の場合はsidebar.phpです。そのまんまですね。)設置したい場所に、スクリプトを追加。

これ、Webクリエイターネットさんのコードまんまなんですけど、違うところはget_post_metaの第一引数に固定ページのidを直接持ってきているところです。
それだけです(∩・ω・)∩。

コメントが入れたかったので、カスタムフィールドの値に直にタグを書きました。これはいいのかどうかわからないw

できなかったこと

複数の商品を表示するので、値に複数のショートコードを入力します。
カスタムフィールドの値の窓が狭いのと(伸びるけど)、変なコメントを入れたりして見た目にごちゃごちゃだし、複数のカスタムフィールドで管理したいような気がしました。
一つの”key”に複数の”value”ですね。
forecheでクルクルしてやればいいのかなーと思いましたが、そうするとカスタムフィールドでショートコードを使う方法が分からないので断念しますた。
逆転の発想で、掲載したい数だけ別名のカスタムフィールドを作ったろーかなーと思いましたけど…却って不便そうなので…w

PageTop