UIデザイン、WEB制作に役立つ情報や最新の情報が掲載されているブログのまとめ。
数あるWEBデザイン・製作に役立つブログを調べてみた。

様々な会社が様々な技術ブログやテックブログを運営されているので、一度真面目にリストアップしてみたかっただけ。
順番に意味はない（調べた順）。

事業会社

1. 株式会社ディー・エヌ・エー / DeNA Co., Ltd.
2. クックパッド株式会社 / Cookpad Inc.

制作会社

きっかけ

最近復職された先輩から「みんな今どんなエディタ使っているんですか？」という質問をされ、その場にいたデザイナーの使用エディタは以下。

• Sublime Text（半分くらいはこれ。自分はここに含まれる）
• Atom（2 〜 3 名）
• Coda（1 名）

で、ふと自分はここ数年 Sublime Text に不満があり、毎日多少イライラしながら使っていたのを思い出した。主には以下。

• Mac だと検索が return キーで実行できない。
• CSS 3 のプロパティにちゃんと対応していない。拡張機能入れても駄目なのとか多い（この辺は私の設定に問題があるのかもしれない）。
• SCSS のシンタックスハイライトが微妙。
• Sublime Text とターミナルの行き来が面倒。
• 日本語ファイルの対応がイマイチ。
• デフォルトの状態ではかなりのスッピン状態で、快適に環境するためには色んな拡張機能入れたり設定変更したりせねばならない。
  拡張性があるのはいいことなんだけど、「初期状態からやらねばならないこと」が多すぎる。設定なんか最初の 1 回だけじゃん、とも思うけど、最初の 1 回だけ故に何かあった時に自分でやった設定が思い出せなかったりする。一言で言うと管理が面倒。
• 本体の生き死にが危ぶまれているせいか、拡張機能も生き死にが分からないものが多い（気がする）。

なので、なにかいいエディタがあれば乗り換えたいー、と思っていた。
のを思い出したので。

重い腰を上げて巷でウワサの「Visual Studio Code」を使ってみた、その感想をツラツラと。
（議事録的に操作しながらメモるので、ちゃんとした使い方の説明とかではない）

Visual Studio Code、リリース当初も大盛り上がりだったので、とりあえず PC には入っていた。
クリックされることなく Dock にいたので、立ち上げてみる。

おお‥.久しぶり。
なんか、背景色とかは変えてみたんだな（数年前の私が）。
全然覚えてない。

とりあえず、アップデートしないとな…と思っている内に勝手にアップデートが走っていたようで「最新版にしたよ！」みたいなファイルが開いてアプデ完了。

使ってみて感動したこと

1. 日本語対応が進んでいる

リリース当初は英語版のみで（意識が低いのでこれもあって即離脱した）日本語対応後も色々あったみたいだけど、現在は問題なく日本語表記に対応している模様。

Sublime Text も無理矢理日本語にできなくもなかったけど、自分は途中で英語に戻したので、何かあったんだろうな（理由は忘れた）。

2. ターミナルから code ファイル名 でファイルがオープンできる！

Sublime はこれやろうとした時、少し面倒だった気がする。シンボリックリンク張ったりとか。
Visual Studio Code は、

1. Visual Studio Code で Command + Shift + p
2. コマンドパレットが表示されるので、shell と入力
3. サジェストが出てくるので、シェル コマンド: PATH 内に 'code' コマンドをインストールします を選択

これだけ！！
ターミナル（黒い画面）であれこれやる必要なし！！
アンイストールも同様の手順でできるというユーザー想いのエディタになっておりました。ハラショー。

3. Git 対応がすごい

Sublime でも拡張機能入れて頑張ってみた時期があったけど、結局上手く動かなかったり重かったりで、苦労する割には恩恵を受けられなかったので諦めた Git との連携。

Visual Studio Code は、デフォルトでサラッと Git 連携してくれるので「やだなにこの子怖い…！」って思った。思っただけでなく同僚に報告しに行った（定時後に大迷惑）。

とりあえず、ターミナルからファイルを開く。

開いた状態。

フォルダかぁ。追加するか。と、リポジトリ内のディレクトリを追加。

branch 名出てきた（これは Atom でも出てくる）。
クリックしてみた。

やだなにここから checkout できるの？ マジで？！

しかも、ファイルを変更すると。

diff も status も分かる上に commit もできる。
もうやだ何この子。もうターミナルいらないじゃない。
git コマンドも覚える必要ないじゃない。

しかも！！

ターミナルが開ける！！
アプリを移動することなく、shell コマンドもここから操作できる！
最高かよ！！！

テンション上がって、無駄に vim で同じファイル開いてみたりした。

少し休憩

何が最高って、ここまでの機能がすべてデフォルトなこと。
多分 Atom とかでも（もしかすると Sublime Text でも頑張れば）拡張機能とかで同等の事ができるようになるのかもだけど、面倒だし、それぞれ製作者が違うアプデが走るからバージョンによる相性があったりとかで面倒だし（2回目）とにかく面倒くさい（3回目）。それがないのが最高！！

あと、各所にナビゲーションアイコンがあるんだけど、初見だと「このゴミ箱って押すとどうなるんだ？」ってなるんだけど、全部のナビゲーション、しばらくマウスを hover にしていると、説明（Tip）が出てきてくれる。

しかも、ショートカットがあるものは、ショートカットの表記まで。
マジ最高。 UI 最高。

ここまでのお試し操作、一切なんの解説も読まずにスイスイ操作できているのも感動。
とにかく UI が分かりやすい。
素晴らしい開発者が開発者のために作った、って感じ。

4. 便利なリンク機能

ファイル内のリンク文字列を hover すると Command キーを押しながらクリックしてリンク先を表示 という Tip が表示されたので、クリックしたら ブラウザで URL 先が開いた。
これまで、リンク先の確認にコピペや画面表示をしていたあの苦労とは！！
（まぁ実際の表示画面でのリンク確認はこの機能があろうとなかろうと必要だけれども）

HTML ファイルとかの anchor 要素で、相対指定だと（素直な相対位置にファイルがあれば）そのファイルをエディタ内で開いてくれる。

なんかもう…これ、エディタって呼んでいいんだろうか…（開発ツールでは）。

5. 検索機能

Sublime Text で地味にしんどかったのがこれ。
Windows 版はまだ良かったんだけど、Mac 版だと、return キーで改行が入るのがもうっ…！！（先に Windows ユーザーだったから余計に）

Command + F で普通に Find ツールが立ち上がって、検索できる。
操作感もいいし、検索しやすい。
置換や、大文字小文字のオプションも分かりやすい。

次に、サイドナビの検索アイコンみたいな所から探してみる。

うぉぉ！！分かりやすい！！
しかもこの検索結果をクリックするとファイルが開く！！

検索内容が 1 ファイルに 1 件だと上記のように内容が open された状態ででてくるけど、1 ファイルに複数件ある場合は、折りたたんで出てくる。

この辺のデフォルトの表示方法はもしかするとどこかで変更できるのかもだけど、もうこのデフォルトの仕様で問題ございません。ありがとうございます。デフォルトに不満がないってなんて最高なんだ。

しかも、検索オプションも充実。

これはもう… grep もいらなくなるのでは…

6. 各種設定も楽ちん

メインメニューに「設定」なるものがあったので開いてみると、設定用の json が開いた。
この辺は Sublime Text などの利用者なら「あ、なるほどね〜」とすぐ変更できる。

左側は編集不可で、変更したい場合は右側（ Sublime Text でいうなら User ファイル）で上書きする形式。
そうか、ここで colorTheme だけ試していんだな（数年前の私）。

色んな設定カテゴリがある（分かりやすい！）

SCSS こんな感じ。
Lint が…！！！

これで物足りない人は拡張機能も（大多数の人が欲しがるようなものは）あるだろうし、というかまずはこれだけの設定がデフォルトであれば当面大丈夫な気がします、はい。

7. コーディングしてみる

軽くコーディングしてみた感じ、補完も HTML や SCSS なら問題なさそう。
SCSS が正しくシンタックスハイライトされるようになったよおかーさん！！

しかも、保管されるだけでなく、何か注釈のようなものが…。

( i ) マークをクリックしてみると、プロパティの説明と、対応ブラウザのバージョンが！！

これは…もう、caniuse も開かなくて良くなるのでは…

ここは流石に日本語化されていないけど、CSS のプロパティに関することなので、何となく分かるし、# を打ち込むと、ファイル内で既に使用されているカラーコードがサジェストされる。

欲を言えば、プロパティの CSS バージョン情報あれば最高では！！と一瞬思ったけど、バージョンで仕様変わったプロパティとか面倒だし、対応ブラウザさえ分かればバージョンそのものは実装には関係ないわな‥.と思い直したり。

なんかもう便利すぎて疲れてきた…。

懸念点

EUC-JP 環境で大丈夫なのか

いや、仕事のファイルに EUC-JP が多くてな…。
かなり長い間、UTF-8 オンリーの環境でぬくぬくと開発していたので、最初は地味に苦しくて。
（ターミナルでも、EUC-JP 文字化けしないようにしたら他が動かなくなったりで）

Sublime Text も、拡張機能でなんとか編集はしていたものの、変更戻すと化けたり、何もしていなくても突然化けたり、特定の文字使うとエラー出まくって保存できなかったり、そもそもどうしても開けないファイルがあったり（あれ、なんか目の前がぼやけてきた…）

会社でちょこっとだけ試しに Visual Studio Code を触ってみた時に、ファイルは開けるのを確認したけど、検索とかができるのかなー、とか、Sublime Text で使えなかった文字が使えるのかなー、とかが週明けやってみないと分からない。

まとめ

実務で使うと「あれ？」みたいな事が出てくるかもしれないけど、ここ 1 年（長過ぎる）抱いていた Sublime Text での不満が一気に解消されたので、もう乗り換え決定です大変ありがとうございました。

宿泊

ホテルトラスティ金沢香林坊
https://travel.rakuten.co.jp/HOTEL/141332/141332.html

• 早割で 1 万円以下で予約できる時があるので、そういう時を狙えばおすすめ
• （繁忙期は問答無用で 2 万近くになる）
• 目の前がバス停
• 金沢の繁華街のど真ん中なので観光しやすい
• 新しめで綺麗でラグジュアリー感があるので、リッチな気分になれる

金沢は、観光したり夜飲み歩いたりするなら、駅前じゃなく街中宿泊がおすすめ。
翌日、すぐ金沢駅から帰りたい！という場合は駅前でもOK。
（駅から繁華街まで、歩いて30分位かかる（まぁ、数分に1本バスありますが、行き先がバラバラなので少しややこしいかも））

遊び

• 兼六園
• 21 世紀美術館

は、まぁ、そこそこ楽しいんじゃないかと思います。
が、以下を外してはいけません。

妙立寺（忍者寺）
http://www.myouryuji.or.jp/reservation/

大人（中学生以上）1,000円（昔もう少し安かったのにいつの間にかこんな値段に）
要予約。
繁忙期でなければ、当日いきなり行っても予約可能ですが（20〜30人くらいで、まとめて案内されるシステムなので、●時の回、みたいに案内される）遠くから行く場合は、事前予約したほうが安全。

食事

いいお寿司

鮨処 あいじ
https://tabelog.com/ishikawa/A1701/A170101/17001116/

繁華街から徒歩で行けるので、車のない方には行きやすくておすすめ。
ランチ 5,000 円くらいでいけた記憶があったけど違ったぽい。
カウンター寿司が 10,000円いかないのって安くない？という方にはおすすめ。
2週間くらい前には予約しておいたほうがいい（繁忙期や土日祝日じゃなければ直前でも多分大丈夫）。

気軽にお寿司

近江町市場
http://ohmicho-ichiba.com/

環境客狙いで作り込んである市場なので、多分楽しい（改装してからほぼ行ってないもので…＜改装してそろそろ8年とか（曖昧）経つというのに…）

お寿司屋さんもたくさんあります（お手頃価格だと以下）。
https://tabelog.com/ishikawa/S7/S139482/COND-0-0-0-0-0-0-0-0/?utf8=%E2%9C%93&genre_name=sushi&pal=ishikawa&genre_spot_id=S7&tourist_spot_id=S139482&ChkCampaign=0&yahoo_ppc=0&Srt=D&SrtT=rt&sort_mode=1&LstCatD=RC0102&LstCat=RC01&Cat=RC&LstRange=A&lid=&RdoCosTp=1&LstCos=0&LstCosT=3&LstRev=0&commit=%E7%B5%9E%E3%82%8A%E8%BE%BC%E3%82%80&LstSitu=0&LstSmoking=0

ランチタイムは多分並びますが、どこ行っても大きはハズレはないんじゃないかと思います（適当）

おやつ

つぼみ
https://tabelog.com/ishikawa/A1701/A170101/17000008/

兼六園とか21世紀美術館とかから徒歩圏内（10分位）
閉店早めなので注意（17:00ラストオーダーとかだった気がする）

夜

川端鮮魚店
https://tabelog.com/ishikawa/A1701/A170101/17005272/

肉厚でボリューミーで安くて上手い。
地元民で結構賑わっているので、予約していったほうがいい（じゃないと、並ぶと思う）
絶対に「のどぐろ」は注文する。あれば焼きで。

金沢の海鮮居酒屋だと「いたる」が昔から有名
https://tabelog.com/ishikawa/A1701/A170101/17000009/
だけど、私は川端鮮魚店 の方が美味いと思う。（けど、いたるに行ったのもう何十年も前だから、今はまた違うのかも）

久々に middleman 使おうとして。
どうせなら version 4 を試そうとしてハマったメモ。

Gemfile

source 'https://rubygems.org'
gem "middleman", "~>4.2"

で、 bundle install --path vendor/bundle

すると、以下のエラーが出てコケる。

An error occurred while installing fast_blank (1.0.0), and Bundler cannot continue.
Make sure that `gem install fast_blank -v '1.0.0'` succeeds before bundling.

fast_blank ってナニ？ ＼(^O^)／

最近やったことは OS をやむにやまれず Yosemite から Sierra にアップグレードした。
その辺かな？と Xcode 立ち上げたら、なんか同意画面が出たので Agree して。
再度

bundle install --path vendor/bundle

そうしたら、今度は別のエラー ＼(^O^)／

Gem::InstallError: rack requires Ruby version >= 2.2.2.
An error occurred while installing rack (2.0.3), and Bundler cannot continue.
Make sure that `gem install rack -v '2.0.3'` succeeds before bundling.

ruby -v で Ruby のバージョンを確認。
ruby 2.2.1 だったので rbenv versions でインストール済みのバージョンを確認。
2.3.0 が入っていたので rbenv local 2.3.0 で、現在のプロジェクトだけ切り替え。

3度目の正直で、再度

bundle install --path vendor/bundle

無事インストール完了した。

TEST

読んだ本

IBMの思考とデザイン
山崎 和彦
https://www.amazon.co.jp/dp/4621300636/

感想

ターミナルで

nslookup usersXXX.lolipop.jp

を叩く