読者です 読者をやめる 読者になる 読者になる

ダダめも

思いついたことをまとめる

TVアニメ公式サイト作ってるうぇっぶでざいなーのサイト制作環境2015年まとめ

実はお仕事はアニメの公式サイトを作っております。
毎年作業環境をメモしておいたら後から見返した時面白いかも、と思ったのでメモしておこうと思います。

テクニカルな情報は何もありません。ただのメモです。

最近作ったサイト

とりあえず10月アニメだけ並べてみます。
1クールごとにだいたい1〜3作品だけど10月作品だけなぜか多いです。ありがたやありがたや。

前置き:サイト制作の規模とか

だいたい一人で作る

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だったのですが、昨今の開発環境はMacLinux)主導なものが多く、ついに乗り換えてしまいました。

PhotoshopCC、IllustratorCC

Photoshopでの画像切り出しは今までスライス機能を使っていたのですが、画像アセットの存在を知ってから切り出し効率が笑ってしまうほど便利になりました。

www.dtp-transit.jp

Brackets

これまで色々なHTMLエディタを試したのですが「へてむるクリエイター」以上の物が見付けられず10年以上使い続けていました。それがAdobe Bracketsに出会ってからあっさりと乗り換えてしまいました。

導入が簡単で、便利なプラグインの存在があり、プラグイン自体も自分で作れることに惚れ込みました。

  • Emmet
  • HTML Wrapper
  • Quick Insert

上記3つは、これがないと作業が出来ないと思える程の便利プラグインです。

ちなみに「Quick Insert」は僕自身が自作したプラグインです。
https://github.com/sygnas/Brackets-quick-insert

しかし僕以外は使ってない気がします。自分のために作ったので問題ありませんがw

SublimeText

CSSJavaScriptPHPの編集に使っています。

Bracketsは便利なのですがマルチウィンドウが出来ないのが難点です。その点SublimeTextはタブの切り離しや結合が簡単に行えるのでサブのエディタとして便利に使っています。

Gulp

SASSコンパイル、画像最適化、JavaScript文法チェック、差分抽出に使っています。

qiita.com

ちなみにWindowsで制作していた頃はSASSコンパイルに「Koala」、画像最適化に「OPTPiX PRO」を使っていました。

SourceTree / Bitbucket

バックアップ・バージョン管理に使っています。無料でプライベートリポジトリが使えるのがいいですね。

webbingstudio.com

Suitcase Fusion 6

作業内容によって使用するフォントを切り替えるのに使っています。 フォントをDropboxに置いておいたり、GoogleFontsから呼び出せるのが便利です。

YummyFTP

ショートカットキーが好みだったので。

Adobe EdgeInspectCC

スマホの動作確認に。

arRsync

作業データのローカルバックアップ。

ライブラリとかフレームワークとか色々

Bourbon

CSSフレームワークというとBootstrapが有名ですが、あれは「便利な設定がたくさん用意されてる」ものなので、逆に言うと「使わないものがたくさんある」わけです。Bourbonは全部自分で組み上げていく必要があるので自分色に染めやすくて好きです。

あとアニメーションに強いです。

qiita.com www.monster-dive.com

Responsify

レスポンシブ対応ページで画像を背景に敷くと「画面を小さくしたら顔が隠れちゃった!」とかいうことがよくあります。このスクリプトを使うと「絶対に表示させておきたいエリア」が指定できるので大変重宝します。

最近久保ユリカ公式サイトで使いました。

ResponsifyJS – A jquery plugin that makes images truly responsive, without sacrificing anyone's face.

jQuery SygResizePos

こちらもレスポンシブ関係。公開されたものではなく自分用に作りました。

「背景画像をリサイズしたらボタンが顔の位置にきちゃった!」という問題を解消するものです。基準サイズとなるエレメントと、それに応じて可変させるプロパティを指定できます。

牙狼〜紅蓮ノ月〜で使ってます。

GoogleFonts

欧文のWebフォントはここがあればだいたいなんとかなります。ワンパンマンでもOswaldとか使ってます。

源真ゴシック

AdobeGoogleが開発したフォント「源ノ角ゴシック」をベースに改良したフォトです。必要な文字だけ取り出したサブセットでWebフォントを作って使っています。

ワンパンマンで超絶重宝しました。

jikasei.me qiita.com

あおぞら明朝

IPA明朝をベースにウェイトのバリエーションを作ったフォントです。機械的に太らせているので実用的なのはRegular〜Boldがギリギリという感じではありますが。

牙狼〜紅蓮ノ月〜で大変重宝しています。

blueskis.wktk.so

あんまり難しいことはやってない

というわけで特にひねりもなく有名なものを使ってる感じです。

iCloudフォトライブラリを使う人はMacの写真アプリで写真を管理しないほうが良い理由

iCloudフォトライブラリは便利なサービス

2015年4月、iOS 8.1から搭載された新機能「iCloudフォトライブラリ」ですが、これは一見とても便利なサービスです。
特徴としては下記のようなものです。

iCloudフォトライブラリのメリット

  • 撮影した写真をiCloudサーバーに自動でアップロードしてくれる
  • iPhone端末内にはメタデータだけが保存されるので大幅な容量削減になる
  • iPad / Mac など他の端末からも閲覧できるようになる
  • 保存期間は半永久
  • 保存枚数無制限
  • 動画もアップできる

iCloudフォトライブラリのデメリット

  • iCloudの空き容量が足りなくなるとアップロードできない
  • 飛行機の中などネットワーク環境が無い状態ではサムネイルしか見れない

飛行機の中で写真を見たいと思っても高解像度のものは見れません。
これは結構困ります。

itstrike.biz

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フォトライブラリを使わせたとします。
そうすると下記のような質問が即座に来るでしょう。

  • iCloudが一杯というエラーがMaciPhoneiPad全部で出る
  • iPhoneで撮影した新しい写真がMacから見れなくなった
  • よくわからないけどどうすればいい

解決策として一番簡単なのは「課金して容量増やすこと」なのですが、ごく一般的な主婦なら削れる金は削りたいものです。

iPhoneから全部の写真を削除するハメになる

お金が払えないなら iCloudフォトライブラリを停止することになります。
停止するとiCloudフォトライブラリから全データをiPhoneにダウンロードするか、端末から削除するかを選べます。

f:id:dada:20151230223040p:plain
出典: iCloudフォトライブラリの落とし穴と写真管理 | CopyTrans Blog

しかしiPhoneにそんな容量はないので、泣く泣く削除するハメになります。
そしてMacから改めて写真をiPhoneに転送することになるのです。

結論① iCloudフォトライブラリを最初から使わない

一番簡単なのはこれです。
iPhoneからMacへの写真転送はUSB接続で行い、従来通りに写真アプリで管理をさせます。

結論② 別のアプリで写真管理させる

iCloudフォトライブラリはiPhoneの写真を自動的に取り込むサービスと割り切って使います。

時間の経った写真や、iPhone内に残しておきたい写真はそのままに。
それ以外の写真は別の場所にコピーし、iCloudフォトライブラリからは削除をします。

コピーした写真の管理は何か別のアプリを使います。

僕が選んだ結論

今回書いたような理由から、
僕の母親にはiCloudフォトライブラリは使わせず、
自分自身はiCloudフォトライブラリは新着のみ残し、写真管理は別アプリLightroom)という方法で行きたいと思います。

俺のMacのFTPクライアントがこんなに使いにくいわけがない

MacFTPクライアントは定番がない

Windowsなら無料のffftp、有料のNextFTP、SFTPならWinSCPみたいなのがあるけど、Macは定番がない。

検索してみると Transmit最高なんて記事を見るけど、逆に Transmit使いにくいなんてのもよく見る。記事で多いのは Transmit、FilezillaCyberduckだろうか。

分散してるってことはつまり、これが一番使いやすい!のが無いという証拠。

ちょっとMacFTPクライアントについて考えてみたいと思います。

追記:YummyFTP試し中。今のところは致命的な不満がなくていいかも。ペイン切り替えのショートカットだけ何とかして欲しいかなー。

続きを読む

オンラインバックアップを考える

データが消えたぞ……どうしよう

うっかりミスで過去に撮影した写真フォルダ 480GBほどがすっかりさっぱり綺麗に消えてしまいました。 原因は一週間ほど前にデータの整理をしていた時で、おそらく別のフォルダと一緒に誤操作で消してしまったのではないかと思います。 消して数日経ってる上、その後もいろいろ書き込みを行っているので復旧はかなり難しいと判断しました。

幸い一年前(!)のバックアップがあったのと、過去一年はほとんど写真を追加してなかったので最終的な被害は軽微に留まりました。

メジャーどころしか試していませんが、自分が実際に触ってみたもののメモです。

続きを読む