TVアニメ公式サイト作ってるうぇっぶでざいなーのサイト制作環境2015年まとめ
実はお仕事はアニメの公式サイトを作っております。
毎年作業環境をメモしておいたら後から見返した時面白いかも、と思ったのでメモしておこうと思います。
テクニカルな情報は何もありません。ただのメモです。
最近作ったサイト
とりあえず10月アニメだけ並べてみます。
1クールごとにだいたい1〜3作品だけど10月作品だけなぜか多いです。ありがたやありがたや。
- TVアニメ「進撃！巨人中学校」公式サイト
- TVアニメ『俺がお嬢様学校に「庶民サンプル」としてゲッツされた件』公式サイト
- TVアニメ「ワンパンマン」公式サイト
- 「牙狼-紅蓮ノ月-」GAROアニメシリーズ第2弾！
- アニメ「ゆるゆり」スペシャルサイト
前置き：サイト制作の規模とか
だいたい一人で作る
TVアニメの公式サイトは実際に稼働している期間が短く（放送前〜パッケージ販売開始までで9ヶ月〜12ヶ月くらいが多い）、規模も小さいことから少人数で作ることが多いです。弊社も基本的には一人で作りますが、スケジュールや用途に応じてデザインを他の方にお願いすることもあります。
環境やライブラリは気に入ったら変更しちゃう
一人で作り、長期間維持することもほとんどないので、環境は結構気軽に変更してしまいます。
CSSなら今までCompassを使っていたのをBourbonに変えたり、Lightbox系ならColorboxを使っていたのをMagnificPopupにころっと変えたりします。
世間の流行にはあんまり左右されない
ぶっちゃけ普通にHTML書くだけなので、世間で流行の Node.jsや React、AngularJSを使うことはまずありません。個人的趣味で FuelPHP使ってアイカツカード管理作ったり、GoogleAppsScriptでAPI作って Ingressのポータル申請管理システム作ったりしますが、仕事でそういうことは一切やりません。
そんなわけでこの記事にテクニカルな情報を求めても何も得られないと思います。
制作環境：アプリケーション
OSX El Capitan
10月頃からMacに乗り換えました。
MS-DOS3.3cからずっとMicrosoftだったのですが、昨今の開発環境はMac（Linux）主導なものが多く、ついに乗り換えてしまいました。
PhotoshopCC、IllustratorCC
Photoshopでの画像切り出しは今までスライス機能を使っていたのですが、画像アセットの存在を知ってから切り出し効率が笑ってしまうほど便利になりました。
Brackets
これまで色々なHTMLエディタを試したのですが「へてむるクリエイター」以上の物が見付けられず10年以上使い続けていました。それがAdobe Bracketsに出会ってからあっさりと乗り換えてしまいました。
導入が簡単で、便利なプラグインの存在があり、プラグイン自体も自分で作れることに惚れ込みました。
- Emmet
- HTML Wrapper
- Quick Insert
上記3つは、これがないと作業が出来ないと思える程の便利プラグインです。
ちなみに「Quick Insert」は僕自身が自作したプラグインです。
https://github.com/sygnas/Brackets-quick-insert
しかし僕以外は使ってない気がします。自分のために作ったので問題ありませんがｗ
SublimeText
CSS、JavaScript、PHPの編集に使っています。
Bracketsは便利なのですがマルチウィンドウが出来ないのが難点です。その点SublimeTextはタブの切り離しや結合が簡単に行えるのでサブのエディタとして便利に使っています。
Gulp
SASSコンパイル、画像最適化、JavaScript文法チェック、差分抽出に使っています。
ちなみにWindowsで制作していた頃はSASSコンパイルに「Koala」、画像最適化に「OPTPiX PRO」を使っていました。
SourceTree / Bitbucket
バックアップ・バージョン管理に使っています。無料でプライベートリポジトリが使えるのがいいですね。
Suitcase Fusion 6
作業内容によって使用するフォントを切り替えるのに使っています。 フォントをDropboxに置いておいたり、GoogleFontsから呼び出せるのが便利です。
YummyFTP
ショートカットキーが好みだったので。
Adobe EdgeInspectCC
スマホの動作確認に。
arRsync
作業データのローカルバックアップ。
ライブラリとかフレームワークとか色々
Bourbon
CSSフレームワークというとBootstrapが有名ですが、あれは「便利な設定がたくさん用意されてる」ものなので、逆に言うと「使わないものがたくさんある」わけです。Bourbonは全部自分で組み上げていく必要があるので自分色に染めやすくて好きです。
あとアニメーションに強いです。
qiita.com www.monster-dive.com
Responsify
レスポンシブ対応ページで画像を背景に敷くと「画面を小さくしたら顔が隠れちゃった！」とかいうことがよくあります。このスクリプトを使うと「絶対に表示させておきたいエリア」が指定できるので大変重宝します。
最近久保ユリカ公式サイトで使いました。
jQuery SygResizePos
こちらもレスポンシブ関係。公開されたものではなく自分用に作りました。
「背景画像をリサイズしたらボタンが顔の位置にきちゃった！」という問題を解消するものです。基準サイズとなるエレメントと、それに応じて可変させるプロパティを指定できます。
牙狼〜紅蓮ノ月〜で使ってます。
GoogleFonts
欧文のWebフォントはここがあればだいたいなんとかなります。ワンパンマンでもOswaldとか使ってます。
源真ゴシック
AdobeとGoogleが開発したフォント「源ノ角ゴシック」をベースに改良したフォトです。必要な文字だけ取り出したサブセットでWebフォントを作って使っています。
ワンパンマンで超絶重宝しました。
あおぞら明朝
IPA明朝をベースにウェイトのバリエーションを作ったフォントです。機械的に太らせているので実用的なのはRegular〜Boldがギリギリという感じではありますが。
牙狼〜紅蓮ノ月〜で大変重宝しています。
あんまり難しいことはやってない
というわけで特にひねりもなく有名なものを使ってる感じです。
iCloudフォトライブラリを使う人はMacの写真アプリで写真を管理しないほうが良い理由
iCloudフォトライブラリは便利なサービス
2015年4月、iOS 8.1から搭載された新機能「iCloudフォトライブラリ」ですが、これは一見とても便利なサービスです。
特徴としては下記のようなものです。
iCloudフォトライブラリのメリット
- 撮影した写真をiCloudサーバーに自動でアップロードしてくれる
- iPhone端末内にはメタデータだけが保存されるので大幅な容量削減になる
- iPad / Mac など他の端末からも閲覧できるようになる
- 保存期間は半永久
- 保存枚数無制限
- 動画もアップできる
iCloudフォトライブラリのデメリット
- iCloudの空き容量が足りなくなるとアップロードできない
- 飛行機の中などネットワーク環境が無い状態ではサムネイルしか見れない
飛行機の中で写真を見たいと思っても高解像度のものは見れません。
これは結構困ります。
iCloudフォトライブラリは課金ユーザーしか相手にしていないサービス
上に書いたようにとても便利に見えるサービスですが、全ては容量次第です。
2015年12月現在、iCloudの価格は下記のようになっています。
| 5GB | 無料 |
|---|---|
| 50GB | 130円 |
| 200GB | 400円 |
| 1TB | 1,300円 |
写真だけでも5GBなんてあっという間。動画をよく撮る人なら2年もあれば200GBも一杯になるのではないでしょうか。
実際に容量が足りなくなるとどうなるのかはこちらの記事が詳しいです。
≫iCloudフォトライブラリの落とし穴と写真管理 | CopyTrans Blog
Macの写真アプリとiCloudフォトライブラリ
OSX Yosemiteから iPhotoに代わり新たに「写真」というアプリが標準搭載されました。
これはiOSの写真アプリとほぼ同じ操作系と、上位互換の機能を持っており、もちろんiCloudフォトライブラリにも対応しています。
そしてiCloudフォトライブラリに対応しているということは、
Macから追加した写真もiCloudフォトライブラリにアップロードされる
ということです。
Macで管理する写真はiPhoneで撮影したものだけじゃない
僕の母親がそうなのですが、旅行の時はコンパクトデジタルカメラ（コンデジ）も持ち歩きます。
iPhoneよりも撮りやすいのでかなりの枚数を撮っています。
コンデジで撮影したものは写真アプリで管理しているので、当然iCloudフォトライブラリに集約されます。
「iCloudが一杯ってエラーが表示されるんだけど」と質問される未来
これは仮定ですが、僕の母親にiCloudフォトライブラリを使わせたとします。
そうすると下記のような質問が即座に来るでしょう。
解決策として一番簡単なのは「課金して容量増やすこと」なのですが、ごく一般的な主婦なら削れる金は削りたいものです。
iPhoneから全部の写真を削除するハメになる
お金が払えないなら iCloudフォトライブラリを停止することになります。
停止するとiCloudフォトライブラリから全データをiPhoneにダウンロードするか、端末から削除するかを選べます。
出典：
iCloudフォトライブラリの落とし穴と写真管理 | CopyTrans Blog
しかしiPhoneにそんな容量はないので、泣く泣く削除するハメになります。
そしてMacから改めて写真をiPhoneに転送することになるのです。
結論① iCloudフォトライブラリを最初から使わない
一番簡単なのはこれです。
iPhoneからMacへの写真転送はUSB接続で行い、従来通りに写真アプリで管理をさせます。
結論② 別のアプリで写真管理させる
iCloudフォトライブラリはiPhoneの写真を自動的に取り込むサービスと割り切って使います。
時間の経った写真や、iPhone内に残しておきたい写真はそのままに。
それ以外の写真は別の場所にコピーし、iCloudフォトライブラリからは削除をします。
コピーした写真の管理は何か別のアプリを使います。
僕が選んだ結論
今回書いたような理由から、
僕の母親にはiCloudフォトライブラリは使わせず、
自分自身はiCloudフォトライブラリは新着のみ残し、写真管理は別アプリ（Lightroom）という方法で行きたいと思います。
俺のMacのFTPクライアントがこんなに使いにくいわけがない
MacのFTPクライアントは定番がない
Windowsなら無料のffftp、有料のNextFTP、SFTPならWinSCPみたいなのがあるけど、Macは定番がない。
検索してみると Transmit最高なんて記事を見るけど、逆に Transmit使いにくいなんてのもよく見る。記事で多いのは Transmit、Filezilla、Cyberduckだろうか。
分散してるってことはつまり、これが一番使いやすい！のが無いという証拠。
ちょっとMacのFTPクライアントについて考えてみたいと思います。
追記：YummyFTP試し中。今のところは致命的な不満がなくていいかも。ペイン切り替えのショートカットだけ何とかして欲しいかなー。
続きを読むオンラインバックアップを考える
データが消えたぞ……どうしよう
うっかりミスで過去に撮影した写真フォルダ 480GBほどがすっかりさっぱり綺麗に消えてしまいました。 原因は一週間ほど前にデータの整理をしていた時で、おそらく別のフォルダと一緒に誤操作で消してしまったのではないかと思います。 消して数日経ってる上、その後もいろいろ書き込みを行っているので復旧はかなり難しいと判断しました。
幸い一年前（！）のバックアップがあったのと、過去一年はほとんど写真を追加してなかったので最終的な被害は軽微に留まりました。
メジャーどころしか試していませんが、自分が実際に触ってみたもののメモです。
続きを読む