結果からいうとencodeURIComponentをかける範囲によって挙動不審な動きをしてしまったという。

失敗例

まずは共通のhtmlとしてボタンを設置します。
今回はFacebook、Twitterと最近増えてるLINEのボタンを。

<div id="sns-area">
<a class="Facebook" href="#" target="_blank">シェア</i></a>
<a class="Twitter" href="#" target="_blank">ツイートする</a>
<a class="Line" href="#" target="_blank">LINEで送る</a>
</div>

そしてすぐ後などにjavascriptを記述します。

<script>
var text = encodeURIComponent("SNSに投稿する文字列をURIエンコードしたときのメモ)");
var pageurl = "http://lettuce-eater.com/blog/?p=364";
var Facebook_url = encodeURIComponent("http://www.facebook.com/sharer.php?u=" + pageurl + "&t=" + text);
var Twitter_url = encodeURIComponent("http://twitter.com/share?text=" + text + "&url=" + pageurl);
var Line_url = encodeURIComponent("http://line.me/R/msg/text/?" + text + " " + pageurl);
$('.Facebook').attr('href', Facebook_url);
$('.Twitter').attr('href', Twitter_url);
$('.Line').attr('href', Line_url);
</script>

→失敗例のDEMO

テキストとページのURLを用意し、各共有用のURLにくっつけたものを encodeURIComponent でURIエンコードして準備完了。
jQueryでaタグのhref属性に入れたら完了、のはずでした。

開発者ツールとかで書き換えられたhref属性を見てみても正しくエンコードされたURLが記述されているのに、クリックするとこのページのURLが頭に差し込まれてわけのわからないアドレスになりNot Foundに。

成功例

先ほどのjavascript部分を修正します。

<script>
var text = encodeURIComponent("SNSに投稿する文字列をURIエンコードしたときのメモ");
var pageurl = "http://lettuce-eater.com/blog/?p=364";
$('.Facebook').attr('href',("http://www.facebook.com/sharer.php?u=" + pageurl + "&t=" + text));
$('.Twitter').attr('href', ("http://twitter.com/share?text=" + text + "&url=" + pageurl));
$('.Line').attr('href', ("http://line.me/R/msg/text/?" + text + " " + pageurl));
</script>

→成功例のDEMO

変更点としては入込み前の完成文言にencodeURIComponentをかけるのではなく、日本語の部分にのみ先にencodeURIComponentをかけたところです。

詳しい人はすんなりわかりそうですがハマってしまった自分としてはBLOGネタとしてメモでした。

• 参考：Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ
• 参考：【gulp】初めてでもできるgulpの導入ととりあえず使ってみるまで

とりあえず必要な node.js 導入後、ターミナルにて

$ node -v

でバージョン確認できたら完了

gulpをグローバルインストール

node.jsがインストールされていたら npm コマンドが使えるので、
従来は下記のように入力しインストールするが若干変わったらしく・・・

$ npm install -g gulp

以下でインストールする。

$ npm install --global gulp-cli

※ちなみにgulp導入済みだった場合は、衝突を防ぐため下記を実行で一旦gulpを削除してからインストールをした方が良いようです

$ npm rm --global gulp

最後に下記コマンドでバージョンが表示されれば、各プロジェクトにgulpをインストールする準備完了

$ gulp -v

作業ディレクトリごとにgulpをローカルインストール

まず npm で cd コマンドを使い作業環境に移動するのですが、作業ディレクトリをターミナルアイコンにドラッグして起動すると移動済み状態で開始するというのを知ってからは後者の方法で進めています。

下記コマンドで npm セッティング。設定内容はとりあえず全部 Yes ということで -y をつけると自動で進むらしい。

$ npm init -y

package.json が作成されるので、ようやく gulp のローカルインストールへ。
下記コマンドで現在の作業ディレクトリに gulp 関係のファイルがインストールされます。

$ npm install gulp --save-dev

インストール後、gulpfile.js というのを作りいろいろ記述していくようなのですが、今回は既存環境の実行だったのですでに存在していました。

gulpを走らせる

既存の gulpfile.js ということで、下記コマンドを実行すれば良いはずだったんですが

$ gulp

すぐにプラグイン不足ということに気づき、gulpfile.js に記載されているプラグインをインストールしていきます。
プラグインのインストールコマンド

$ npm install プラグイン名 --save-dev

プラグインのアンインストールコマンド

$ npm uninstall プラグイン名 --save-dev

下記記述方法で一括インストール可能

$ npm install --save-dev プラグイン名 プラグイン名 ...

ただ、どうしても imagemin-pngquant というプラグインが下記エラーでインストールできず

npm ERR! pngquant-bin@3.1.0 postinstall: `node lib/install.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the pngquant-bin@3.1.0 postinstall script.
npm ERR! This is most likely a problem with the pngquant-bin package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node lib/install.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls pngquant-bin
npm ERR! There is likely additional logging output above.

npm ERR! System Darwin 15.4.0
npm ERR! command "node" "/usr/local/bin/npm" "install" "imagemin-pngquant" "--save-dev"
npm ERR! cwd /Users/XXXX/XXXX/XXXX/XXXX
npm ERR! node -v v0.11.11
npm ERR! npm -v 1.3.25
npm ERR! code ELIFECYCLE
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/XXXX/XXXX/XXXX/XXXX/npm-debug.log
npm ERR! not ok code 0

よくよく読んでいるとnodeとかnpmが古いんじゃないかと思い下記サイト様を参考にアップデートしました。

• 参考：Node.js と npm のアップデート

imagemin-pngquant のインストールが完了し、再び下記コマンドで無事にgulp環境が動いて終了です。

$ gulp

今回の教訓はエラーちゃんと読め！でした。

ただ、adobeのアカウント再認証や、使っていたSassやCompassが動かなくなりターミナルでのインストール先を変更する必要があるなどありましたが、問題はXcode経由でCompassを導入しようとした際、アップデートされたXcodeを起動してすぐライセンス・規約に同意するフェーズで[agree]ボタンが無反応だったところです。

• 参考：【Mac】OS X 10.11 El CapitanでSassなどが動かなくなった場合の対処方法

ターミナル側からの認証も試したのですが何の反応もなく、1日対処法を探しあきらめてクリーンインストールをした時のメモです。
（Fusion DriveのOS再インストールとしてこれが正しいかはわからないですが、今の所おかしい挙動もなく動いています。

ディスクユーティリティでSDD/HDDを消去する前に、認識されている論理ボリュームグループを消去する

先にこの工程を行っておかないと、HDDを初期化中にエラーが起きてディスクを認識されなくなりロックされたりすることがあるようです。

• 参考：El Capitanクリーンインストール中にまさかのトラブル発生-HDDが認識されない不具合の修正方法

iMacを終了後、[コマンド＋R]を押しながら起動し、OS Xユーティリティの画面まできたら画面上部メニューのユーティリティからターミナルを起動します。

下記を入力、Enterを押してMacにマウントされているディスク情報を確認します。

diskutil cs list

Logical Volume Group の右に表示されているのが論理ボリュームグループとして認識されているディスク固有の文字列だそうです。

次に下記を入力、Enterを押してディスクを消去します。
※XXXXの部分は前の工程で表示された文字列をコピぺ

diskutil cs delete XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX

• 参考：Yosemiteのクリーンインストール時にディスクエラーになりインストール出来ない時の対処方法

ディスクユーティリティでSDD/HDDを初期化し
OSのインストールへ

ターミナルを終了しディスクユーティリティを開き、マウントされているSSD/HDDを各個消去します。

いざ、El Capitanをインストールしようとディスクユーティリティを閉じ「OS Xを再インストール」を開き進んでいくと
SSDとHDDのどっちにインストールする？にような状態になっていたので、これはFusion Driveなのかと不安になりました。

これでいいのかと思い調べると下記記事を発見。

• 参考：El Capitan、Fusion Driveは要注意

現バージョンでは不明ですが「El CapitanのDisk UtilityはFusion化をしてくれません」との記述あり。

Yosemiteインストデータをすぐに準備出来そうになかったので、
自分でFusion化できないかと調べると古めの記事ですが下記記事を発見しました。

• 参考：Mac で HDD+SSD で Fusion Drive を作って MacOS Xを再インストールするAdd

ターミナルを使いSDD/HDDをFusion Drive化

上記サイトを参考にまずOS Xインストールを中断し、ターミナルを開きます。

まず下記を入力、Enterを押してマウントされているdisk*のどちらがSSD/HHDなのかを調べます。

diskutil list

次に下記を入力、Enterを押してSSD/HDDを一つの論理ボリュームグループとしてまとめます。
参考サイトに、“ただし disk0 が SSD で、disk1 が HDD の場合。”とあるのでSSDであるdisk1を先に記述。
‘SKYLAB’の部分は論理ボリュームグルームの名前らしいので任意のもので。

diskutil cs create 'SKYLAB' disk1 disk0

CoreStrage operation が走り数十秒ほど待つと、
Discoverd new Logical Volume Group の右にディスク固有の文字列が設定されます。

上記文字列をコピーし下記を入力、Enterを押してFusion化へ。
ここでの’SKYLAB’の部分はHDDの名前になるので以降この名前で表示されます。
（↑基本では’Macintosh HD’と表示されているやつです

diskutil coreStorage createVolume XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX jhfs+ 'SKYLAB' 100%

これでFusion Drive化が終了し、ディスクユーティリティでも1つのドライブと認識されました。

OS Xを再インストール

OSのインストール先を選ぶ画面でも1つのドライブとして表示されました。

最後に、冒頭で起こっていたXcodeを起動後のライセンス・規約に同意するフェーズで[agree]ボタンが無反応！という現象について
El Capitanインストール後にすぐXcodeをインストールして起動してみたところ何事もなかったかのように[agree]ボタンは機能しました。

Doorkeeperイベントページ
https://wbtokyo.doorkeeper.jp/events/24846

今回はWordPressの構築側の話というよりはブログツールとして利用した際のお役立ち情報を聞いてきましたので、あくまで自分用メモの延長ですが雑記として残したいと思います。

WordPressでSEOを考慮した、運営術

中島 真洋氏（ナカシマ マサヒロ）
運営ブログ：着ぐるみ追い剥ぎペンギン
スライド：https://www.slideshare.net/secret/8MprHK5i7wF1mr

構築されるサイト構造とプラグインの充実によりWordPressはSEOに強いが、さらに各SNSからのアクセス流入を増やすために下記事柄に注目する。

• titieにはSEOキーワード（2つほど）を意識したタイトルをつける
• 記事を書き終えてからタイトルをつけるくらいの意気込みで
• Googleが新しい検索結果導入してから表示が変わったので、タイトルの表示文字数は28文字程にする。もしくは大事な要素は前半に入れる
• 連載ナンバーとかは極力入れずにちゃんと変えたタイトルにする
• 多少は煽るような言葉を入れるのも良い。その際検索エンジン向けとSNS向けのタイトルを違うものにする
• SNS投稿に便利な「Jetpackプラグイン」も良いが、各SNSにまったく同じ内容が投稿されてしまうので、個々に合わせて紹介文や概要文などを追加する

記事ごとにやさしく面倒を見て、外のネット界隈に出てもやっていけるように育てるという印象を受けました。

WordPressとヒートマップ：Ptengineプラグイン

吉田 喜彦氏（よしだ よしひこ）
運営ブログ：カグア！Googleアナリティクス解説Blog
スライド：http://www.slideshare.net/kagua/wordpressptengine

googleアナリティクスはLPなどの縦長ページとかは苦手なところもあるので、補強する意味でもヒートマップツールを利用するとメリットもいっぱいあります。

Ptengine – 無料で使えるヒートマップツール

• WPプラグインがありユーザ登録後インストすればすぐ使える
• 無料版の制限は1ページのみ計測でPV25000まで。バナー表示追加で+10k
  → 検証用に設定して傾向を見ては別ページに設定して、という使い方かなと
• コンバージョン、クリック計測
• デバイスごとに分けて計測
• 閲覧されていたエリアを閲覧できるアテンション機能
• スクロール停止位置のヒートマップ。記事の一定箇所が注目されているというのが可視化される

他のおまけ情報。
・楽天のシェアボタン、Amazonの広告おすすめ
・aタグよりサムネイルがクリック率高いのでサムネイルは手を抜かない
・アーカイブオルグ – 昔のサイトを見ることができるサービス

登壇の中で言っておられた「作業は無限だがリソースは有限なので、ヒートマップで優先順位の参考にできる」というのが印象的でした。
より良いブログブラッシュアップの方法としてヒートマップツール導入はありかと。

私のブログ更新ツールを晒します（完全版）

和田 稔氏（わだ みのる）
運営ブログ：モンハコ

ブログの更新は大変！
時間がかかるポイントを見出し、適切なツールを使って時間の節約をしようというお話。

１.写真・図版の撮影・挿入
iPhoneからは？ – PictPort　というDropboxへの転送が楽になる有料アプリ
デジカメからは？ – Eyefi という無線LANで飛ばせるSDカードがある

２.レイアウト調整
MarsEdit – ローカル環境でレイアウト再現し、プレビューしながら編集可能。写真をD&Dで挿入できる

３.繰り返しの定型文
TextExpander – 事前登録しておくとすぐに出せるスニペットツール

４.文章構成
ATOK Passportのプレミアムプラン
構成をチェックしてくれる

５.関連記事のリンク作成
内部リンクはSEO的に影響する
Googleが手動リンクと自動リンクをみわけているらしい
思い入れのある記事を関連リンクに入れたいが、手動の関連記事リンク作成は手間なので下記ツールなどを利用
getTabInfo – 関連記事作成支援ツール

ライトニングトーク

根津 陽氏(ねづ あきら)
運営ブログ：NEZU.log
タイトル：ブログ執筆環境をタスクランナーで自動化してみる
node.jsを使用している gulp などタスクランナーツールを使い、ブログ運営の作業も自動化することによって爆速化できます！というお話。

田原 遊馬氏（たはら ゆうま）
運営ブログ：90zbear.com
タイトル：ビジュアルエディタ用CSSで快適なブログライフを！
記事執筆時、ビジュアルエディタにcssを反映させることにより確認更新の頻度も減りスムーズに
エディタ用のスタイルシート用意し、function.phpに数行追加で実現ができるというお話。

岡本 雄樹氏（おかもと ゆうき）
SEOやソーシャル対応は面倒！忙しい人はsimplicityというテーマに丸投げしようwというお話。
シンプルなソーシャル対応機能が付いているのでサクッと導入できる。デザインは一般的になってしまうが根本的な時間短縮に納得です。

齋木 弘樹氏（さいき ひろき）
電車遅延で齋木さんが後から来られたので、司会の清野さんが代弁で登壇されました。
タイトル：「WordCamp東京に行ってみよう！」
タイトルのごとくWordCamp東京へ行こうというお話。
日付は10月31日（土）、11月1日（日）で、今年のテーマは「more publishing」みんなで発信して盛り上げて行こう！的なことで詳細は順次決まっていくそうです。

まとめ

今回、更新が頻繁でない自分にとっては少しでも運用のためになるノウハウが満載でした。

一番大変なのはやっぱり記事のネタを考えるところ、それ考えると記事を生かすために気を配り
手を抜くポイント・力を入れるポイントを見極めて慣れていけばブログの品質もグッと上がると思いました。

登壇者の方々、21Cafe運営の方々、懇親会でお話してくださった方々お疲れさまでした！

もともとブログ始めた頃は当時デフォルトだった「Twenty Twelve」のまま運営してましたが、ようやく更新することができてとりあえずの一歩全身です。
参考書を元に制作を進めていったので基本シンプルな構成で、前のテーマとぱっと見変わらない感じがしますが一応現代風にレスポンシブ対応もできたかと。

まだいろいろ足らないので随時追加・更新していこうと思います。
・パンくず
・固定ページ系
・サイトのSNS系ボタン
・フッターコンテンツ
・ページトップボタン

【Doorkeeperイベントページ】
第20回ゼロから始めるWordPress勉強会　〜テーマをゼロから作ろう〜

今回使用されたスライドを公開されていたので合わせて紹介します。
ゼロからはじめるWordPress ゼロからテーマをつくる編

自分は、WordPressについて趣味程度しか使ったことがなく、phpもほとんど触ったことがなかったので、
今回の内容はできる人にとっては本当に初歩的な事だとは思いますが、なかなか一歩が踏み出せない自分にとって大きな一歩でした。

これからの進歩のために

スライドの最後に紹介されている「WordPress レッスンブック 3.x対応（エビスコム著）」は
自分が2年くらい前に購入したのと同じものでした。どれだけさぼってるんだとw

上記の本を読破したらば、最近コリスさんの記事でも紹介されていた下の本も購入したいところ。

小耳に挟んだこと

・charsetは日本語の前に記述
・WordPress、Theme内functions.phpは自動で読み込む
・bootstrapはreset.cssのごとくとりあえず読み込んで、使いこなすのがいい感じ
・ググってたどり着く記事には、若干間違ってることもあり泥沼行きもあるので注意
・WordPress初歩を抜けたら下記のような公式オンラインマニュアルを一読するといい
WordPress Codex 日本語版

まとめ

参加側としての勉強も大切だけれど、LTだけでも登壇者として参加したほうが数倍経験を積める！
とのことなので、積極的にLTする側になるこ！という今年の新たな目標が増えました。

運営側・参加者の方々お疲れ様でした。
また、懇親会でお話できた方々も本当にありがとうございました！

コンテンツごとに全画面

各コンテンツの高さが少なくても、最低でも全画面表示されるようにするには下記を記述します。

html,body {
	height: 100%;
}
section {
	min-height: 100%;
}

ローポリ風画像背景

CONTACTの背景に使用しているローポリ画像は下記ソフトを使用して作成しました。
DMesh

Mac / Win 共に無料版があるので手軽に試すこともできます。
ただローポリポイント作成時に画面サイズまでしか表示できないので、それ以上の解像度用が作成できません。

ちょくちょく更新していこうと思うので、以後よろしくお願いします。

自分の時間割は下記でした。
10:00 – 10:50 【講堂】 オープニングセッション
11:20 – 12:00 【ルームD】 HTML5マークアップについて矢倉先生に聞いてみよう
13:20 – 14:00 【ルームD】 Web Componentsのアクセシビリティ
14:20 – 15:00 【ルームE】 2015年これからの日本のWebサイトパフォーマンスについて
15:20 – 17:00 【ルームF】 [ハンズオン]やってみたら実は簡単！ WebGLで開ける新しい表現
17:40 – 18:50 【講堂】 スペシャルセッション

※ 以下個人がヒアリングし感じた内容を含みますので、詳細は公式の動画等を確認ください。

オープニングセッション

なかなか理解できる内容ではなかったのですが、登壇者3名の話にはとても引き込まれました。

特に印象的だったのは慶應義塾大学教授 村井 純さんの、アメリカの『Netflix』という動画配信会社が行った
テレビで情報を収集し、その内容を反映したコンテンツを配信しエミー賞を取ったというもの。

また、アメリカで足を怪我された際に、事前にレントゲンデータを日本に送っておくことにより
帰国後の治療がスムーズだったというのも革新的だと思いました。

HTML5マークアップについて矢倉先生に聞いてみよう

・今年に入り HTML5 Japanese Community Group てのが設立された
・アクセシビリティについても考慮するが、正しいマークアップの結果確保されてるもの
・様々なマークアップを行う際は、経験を元にパターンを取り入れる事により効率化
・チーム製作においてはパターンも共有し、より良いモノへと更新していく
・作業で悩む時間を削減するための手段
・HTML Best practice
・WEBCRE8 酒井さんの、GitHubでマークアップの基本を共有アップデート中[html5style] ・htmlページのもくじを生成する方法
　- ページ内の見出しを自動で取得しつつ構文するjavascript
　- 統一されたマークアップではないので汎用性のある柔軟なプログラムじゃないと使えない
・チーム内でSaSSが浸透していれば、サイトの規模により導入の利点が大きい
・ビルドツールGrant等も並行して推進していくと良い
・構文を最後に整えたり、自動変換したりしてパターンの統一化を

Web Componentsのアクセシビリティ

・一時的な制約、屋外での太陽光なども考慮
・3つのポイント
　- セマンティクス（データの意味）
　- 様々なデバイス・環境でのインタラクション
　- 代替えコンテンツ

・視覚的に同じでも、マシンがセマンティクスを認識できるほうがいい
・Custom Elements で拡張されたマークアップ
・独自要素の定義　- 通常のDOMツリーには表示されない shadow DOM を使う
・WAI-ARIAを導入し、拡張マークアップすることでアクセシビリティの強化

2015年これからの日本のWebサイトパフォーマンスについて

・ページDL（DLと表示は別）時間、日本はアメリカの3倍ほどの時間がかかっている
・webパフォーマンスの品質管理として、納品前にパフォーマンス試験をする仕組みを導入　キャパシティプランニング
・納品後にパフォーマンスの指摘を受けた後にパフォーマンス検証を進めると、工数が多くなってしまう
・バックエンドが強くなっても、末端のスマホ等の進化が遅めなので、劇的な進化は望めない
・W3Cでも、ほぼコネクティングがない環境を想定した構築も想定している
・夜9時から深夜1時くらいに通信が重くなる傾向があるので、ターゲットに合わせて昼夜も考慮したパフォーマンス計測も必要
・パフォーマンス・データを見る上で統計学が有用

【WEBパフォーマンスの改善はどう変わる？】
・イメージファイルの最適化（jpeg pngの圧縮）
・JavascriptとCSSの最適化（minify）
・ネットワークの最適化（css spriteなど）
・マルチバイトとWEBフォント（日本語は重く難しい）
・レイアウトのデザイン（2015年は企業TOPページから画像が消える現象!?）
・モバイル向けWEB
・アニメーション（ブラウザ、プラットフォーム下で要注意）

・あえて機能を精査・削減（取捨選択）することでの向上を図る
・制限があってこそ、クリエイティブが発揮できるもの
・PCは1MB以内、SPは100kb以内の制限内でやっていくという指針

[ハンズオン]やってみたら実は簡単！ WebGLで開ける新しい表現

今回一番興味があったWebGLに関する発表でした。
このハンズオンで使用された素材データは下記にアップされています。
【ハンズオン】やってみたら実は簡単！ WebGLで開ける新しい表現 ファイル置き場

【webGL × THREE.js】
面白法人カヤック 比留間 和也さん
HTML5 Conference 2015 WebGLハンズオン資料

・3Dの世界でマウスが指し示す場所は、点ではなく線の当たり判定（魔貫光殺砲？的な）
・今年も webGl TOKYO MEETUP というイベント開催予定

【Blender × THREE.js】
株式会社ピクセルグリッド 小山田 晃浩さん
WebGL + 3D models by using Three.js Blender Exporter

・世の3Dモデルを利用してみる（NASAとかyobi3D[3dモデルデータ検索サイト]）
・blender exporter r69 （THREE.jsへの書き出しアドオン？　最新版はリメイクしたので未完成、r71くらいを待ったほうがいいと）

【GLSLでシェーダグラフィック】
WebGLエンジニア 杉本 雅広さん

・hsv – rgbではなく、色相・彩度・明度で表現する
・2Dのシェーダーを知り、アイディア次第では面白いものができるのでは
・”js4kintro”で検索したらシェーダーの面白例みれる！

スペシャルセッション

・スマホタッチの300ms問題を解決するには、現状下記全部実行！
　- html{touch-action:none;}
　- viewport 指定
　- fastclick.js

・javascriptのsetintervalは、別タブで同時に起動するとおかしい

ラストにあったHTML5クイズは結局1問も正解ならず！
景品にあったフォクすけのぬいぐるみ欲しかった・・・。

まとめ

以上、とても充実した1日を送れました。
html5jスタッフの方々、ボランティアスタッフの方々、登壇者の方々、東京電機大学の方々、ありがとうございました！

2015年はアクティブにいきます。

旧型

MacBook (Early 2008) Core 2 Duo 2.4GHz クロ MB404J/A
・メモリを限界の4Gに増設
・バッテリーが瀕死だったので換装（ロワジャパン Apple MacBook 13インチ 用 A1185 互換バッテリー）
・処理速度が体感遅く感じたのでHDD→SSDに換装（Samsung SSD840 ベーシックキット250GB）

今まで使用していたのは2010年頃に中古で購入した上記で、マットブラックの色も結構気に入ってました。
いろいろ手を加えてだましだまし使ってきましたが、先日の HTML5 Conference に参加するということで急遽買い換える事に。キッカケを探していたっぽいです。

新型

MacBook Airと少し悩みましたが、今回購入したのは初のMacBook Pro。
13インチMacBook Pro Retinaディスプレイモデル

これで、最新版のXcodeがインストできなかったり、Git関連環境構築周りや、エディタでTypescriptをビルドするまでの環境づくりができなかったのが解消されたらいいなという願望。

旧環境はTime Machineでバックアップを取っていたので、新Macへの移行は簡単でした。
・起動して言語選択
・Time Machineバックアップから移行を選択
3、40分の後に問題なく移行が完了しました。

【参考】OS X：Mountain Lion 以前を使って別の Mac からデータを移行する方法

ただカンファレンス中に気づいたんですが、128GBのSSDの残り容量が8GB!?と気づいて帰ってから急いでデータの整理して40GBくらいまで確保出来ました。

【参考】Macの空き容量を増やす

いい加減ほったらかしすぎていたのでこのブログもリニューアル準備中です。

• Sublime Text 2 をインストールして初期設定
• Sublime Text 2 にPackageをインストール
• Sublime Text 2 の見た目を変える Theme と Color Scheme
• Sublime Text 2 を日本語化
• Sublime Text 2 で Haxe を使うまでの手順
• Windows で Sublime Text 2 を使った時のメモ

Sublime Text 2 をインストールして初期設定

【参考】Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ

【1】Sublime Text 2 を公式からダウンロードしてインストール
【2】ユーザ初期設定をする

【参考】Sublime Text 2 のDefault設定ファイルを眺める
Preference > Settings User を開くとPreferences.sublime_settings というタブが開くのでそこに変更箇所を “,” 区切りで記述していきます。以下は、とりあえず自分の設定です。

{
	"detect_indentation": false,
	"draw_white_space": "all",
	"highlight_line": true,
	"line_padding_top": 2,
	"soda_folder_icons": true,
	"tab_size": 4,
	"trim_trailing_white_space_on_save": true,
	"word_separators": "./\\()\"':,.;<>~!@#%^&*|+=[]{}`~?"
}

Sublime Text 2 にPackageをインストール

【参考】Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ
【1】Package Control をインストール
【2】command + Shift + p で Command Palette を開き、Package Control:install Package を選択。
一覧から必要なPackageをインストールしていきます。以下は、自分がインストしたもの。

HTML5
CSS Snippets
jQuery
jQuery Mobile Snippets
SublimeLinter
BracketHighlighter
SFTP

Sublime Text 2 の見た目を変える Theme と Color Scheme

いくつかデフォルトでテーマがインストールされていますが追加するときは、Package Control:install Package から Theme – XXXX を選択でインストできます。

Preferences.sublime_settings を開き、設定を追加します。(“,”の記述に注意)

{
	：
	"theme": "Soda Light.sublime-theme"
}

また、Color Scheme は TextMate というエディタのものを流用できるようなので下記からダウンロードしてきました。
→ TextMate Theme

解凍した中の拡張子が “.tmTheme” のファイルを下記フォルダにコピーします。

[Mac OS X 10.6]
ユーザー/ユーザ名/ライブラリ/Application Support/Sublime Text 2/Packages/Color Scheme – Default
[Windows 7]
C:/ユーザー/ユーザ名/AppData/Roaming/Sublime Text 2/Packages/Color Scheme – Default

Sublime Text 2 の Preferences > Color Scheme > さっきコピーしたスキーマファイルを選択して変更。

Sublime Text 2 を日本語化

【参考】Sublime Text 2 の日本語化ファイルを置く場所はここ Windows8

ダウンロードしてきた下記ファイルを、オリジナルをリネームした後にフォルダにコピー。
Main.sublime-menu
Context.sublime-menu

[Mac OS X 10.6]
ユーザー/ユーザ名/ライブラリ/Application Support/Sublime Text 2/Packages/Default
[Windows 7]
C:/ユーザー/ユーザ名/AppData/Roaming/Sublime Text 2/Packages/Default

Sublime Text 2 で Haxe を使うまでの手順

主に下記サイト様を参考に進めました、のでここではざっくりと。
【参考】Haxe + CreateJs を Sublime Text 2 で開発する準備をしてみたのでメモ

【1】Haxe を公式からダウンロードしてインストール
【2】Haxe のプラグインを複数、ターミナルからインストール
【3】Package Control:install Package から Haxe を選択してインストール

これでHaxeがはじめられます。

Windows で Sublime Text 2 を使った時のメモ

・Shift_JIS、EUC_JPに対応していないので日本語が文字化けしてました。
ConvertToUTF8 というプラグインをインストすると解決できます。
【参考】Sublime Text 2をShift_JISに対応させるプラグインがあると聞いて

・win版だと日本語がインラインで入力できなかったのですがコレもプラグインで解決。
Package Control:install Package から IME Surport を選択してインストール
【参考】Windows版「Sublime text 2」で日本語をインライン入力する方法

・【Error】 Fatal error: exception Failure(“File not found build.hxml”) と言われてビルドできず
下記を参考にsublime-projectファイルを設定するとbuild.hxmlを読み込むようになり、ctrl+Bでビルドできるようになりました。
【参考】Sublime Text 2 の Haxe 用プロジェクトファイルのテンプレ