久々に買ったTwitterクライアント「Tweetbot」が良い。
久々にTwitterクライアントを買いました。Twitterを始めたての頃は有料・無料問わずいろんなクライアントを試していましたが、ある時からEchofonに落ち着いて、ここ1年ぐらいはずっと使っています。
それなのに、新しいクライアントを買おうと思ったのには訳があって…
Echofonがダメダメ仕様になった。
iOS5に合わせてEchofonもバージョンアップしたのですが、ついでに仕様まで変わった。そしてこれがかなりダメ仕様ｗ
詳細は割愛しますが複数リプができないとか、入力中のゴミ箱が無くなったとか、その他細かい挙動も、なんだか悪い方に変更されてる気がします。
まぁそれを差し引いても良いアプリなんですけどね。
Mac版との未読同期とか、未読同期とかみどｋ
ただ、しばらく探ってないうちに面白そうなクライアントも出てきてて、ちょっと他のも使ってみようかなって思って。その気になるクライアントのひとつがTweetbotでした。
デザインが俺得すぎる！
日々いろんなアプリをDLしているけど、貴重なiPhoneの容量を消費してでも残すかどうかの判断に「見た目がカッコイイか」ってのがあります。
いやいや機能性だろと言われるかもしれませんが、いいえ、見た目は譲れません！カッコイイからつい触りたくなる、カッコイイから細かい不具合も許せる。そんなもんでしょう？僕は間違いなくそうですｗ
で、このTweetbotはデザインがとにかくカッコイイ。アイコンはヘンテコ（でも好きｗ）だけど、中身は黒ベースでソリッドなデザインになってます。グレーが多めで、どことなくLionのデザインにも似ている。アクセントの濃い目のブルーも良いね。ここまで丁寧にデザインしてあるクライアントもなかなか無いと思います。
IMG_3328メニューバーとかいちいちカッコイイ。
機能はもちろん、操作性もイイ。
見た目でグッと心掴まれてしまいますが、とはいえTwitterは毎日使うもの。長年使い続けたEchofonからDockの座を奪うには、使い心地も良くないとね…と思ってたら想像以上に良かったｗ
リスト使いのアナタへ。
リストをメイン見てる人も多いでしょうが、そんな人にピッタリ。メインのタイムラインの上部をタップすると、リストに表示を切り替えることができます。メニュー項目はそのままなので、画面遷移も含めてメインTLと同じように使うことができます。
多彩なジェスチャー操作
公式クライアントではフリックで返信やRTなどのメニューが出ますが、Tweetbotでももちろん可能。シングルタップでメニュー表示。ダブルタップ（アイコン上・テキスト上）にもそれぞれ機能が割り当てられていて、慣れてしまえばワンアクションで目的の画面に遷移できちゃいます。（さらにトリプルタップの設定もできる！）
IMG_3330 慣れたら気持ちいい！
もっと気持いいのが、左右フリック。
ツイートをフリックすると円盤がクルクル回って画面が切り替わります。一応、左にフリックすれば返信、右にフリックすれば会話表示。（微妙な違いはあるんだけど、どっちでも良い気がするｗ）
IMG_3339 ちょー気持ちいい！
ユーザー情報が見やすい！
この動作は他のクライアントで見たことがないのですが、プロフィール表示の操作性がかなり良い！
プロフィール表示にすると下部メニューがこっそり変わり、タップするだけで単独ツイート、関連ツイート、ふぁぼ、リストが見れちゃいます。
「どんな人がリプライしてるんだろう…ﾑﾌﾌ」なんて気になること、ありませんか？僕はあります。ありがとうございます。
IMG_3331 眞鍋さんかわいい（関係ない）
ツイートも快適
「サブアカでつぶやきたいんだけど、メニューまで戻ってアカウント切り替えるのもなぁ〜」なんてときも大丈夫！どのタイムラインからでも、ツイートの時だけアカウントを切り替えることができます。
返信時も、＠に続くID名を入力していくと候補が表示されてきます。アイコン付きなのが嬉しい。
基本機能もぬかりなし！
- 絶対時間
これは地味に嬉しい。相対表示だと「1時間前」て風に表示されて、それって1時間1分前なのか1時間59分前なのかどうなんだー！ってなりませんか？僕はなります。ありがとうございます。
不満点
- アイコンがでかい
テキストサイズは変えられるんだけど、アイコンサイズが固定。1画面に収まるのは4ツイートまでかなぁ…。アイコンは人を認識できる程度で充分なので、もっと小さくして情報量を増やしてほしいところ。
- 複数リプライができない
できないというか、"簡単に"できない。まぁこれはEchofonでも出来なくなったから我慢しよ…。
ブログのデザインを微調整しました。
間延びしないように
読みやすさを考え、少しデザインを修正してみました。
mixiやってるといつも思うんだけど、記事スペースの横幅が長いと文章がすごく読みづらくなる。なのでいつも2行にまたがらないよう、読点を打つポイントで改行してました。
…が、やっぱり本来の文章としてはあんまり美しくないなぁと。
そんな訳で、全体をすこしキュッと詰めてミニマル化してみました。
before
作った時は(・∀・)ｲｲ!!と思ってたものも、時間が経って見なおして(´-｀；)ｳｰﾝってなりますよね。夜作ったデザインカンプを翌朝見るとガッカリすることもよくあります（汗）
記事右側のスペースが広すぎるのと、強制改行のため文末が揃ってなく、なんだかバラバラした印象。
after
左右を100pxほど小さくし、文字のpt数も上げました。サイドバーも気持ち広めに。でも強制改行のせいでバラバラになっちゃいました。
ウインドウ幅を変えた時もこういう状態になっちゃうので、やっぱり読点で改行ってのは良くないね。
finish
無駄な改行を減らし、段落として固まるようにしました。
やっぱ両端揃ってると気持ちがいいですね。詩を載せるならともかく、記事的な文章なら断然こっちのほうが読みやすいと思います。ブログの内容的にもこっちの方が良い。
てことで、これで少しは読みやすくなったかな。
変な改行を意識しなくてよくなったので、書くのも楽になりました。
書籍だと一行の文字数は35文字までが良いなんて言いますが、webも同じで見やすい大きさ・版面・文字設定てのはあるはず。（ユーザー環境で変動するので難しいところだけど）
逆に言えば、いつでも微調整できるのがwebの良いところなので少しずつ改良していこうと思ってます。
DTPしか知らない僕がCSSを書いてみた。2回目
昔は…
僕自身、web初心者とはいえいままで全く触れたことがなかったわけではなく、振り返れば高校生のころ家にPC（win95）が来てネットが繋がってからは自分の"ホームページ"を作って公開したり、無料のCGIをDLしてきてサーバーに設置したりとHTMLやFTPソフトに触れていたこともありました。
当時、CSSに対しては「HTMLでできないことができる記述法」ぐらいの認識で、例えばマウスオーバーで色が変わるのをちょっとした装飾に使うぐらいでした。
思えばもう10年前…なつかしい（笑）
値を変更してアップ、ページをリロードして確認して、また値を変更してアップ…という作業をひたすら繰り返してたのを思い出します。
タグの意味を知る
HTMLにしろCSSにしろ、まぁ他のもそうだと思うんですが最初に難しいと感じる理由は「記述の意味が分からない」からだと思うんです。
「求める結果は思い浮かんでるんだけど、どこの値を変更すればいいのかわからない。」
これが、僕がずっとwebデザインに対して感じていた壁でした。
テキストの大きさを変えたい→font-sizeの値を変えるぐらいは分かるんですけど、パッと読んで意味のわからない値もたくさんあって。
単純に調べればいいんですけど、その努力が億劫でして…（汗）
でも今は、便利なツールがあるもんです。
理解するためのツール、Firebug
web開発者にはお馴染みのFirefoxのアドオン、Firebug。
これがCSSを理解するためにすごく役立ちました。
今までは
この部分はどう記述してるんだろう？
↓
ソース表示
↓
それらしき箇所に目星をつける
↓
タグを調べる
↓
サンプルを作って確認
という手順でやっとタグの意味とか値の調整範囲を把握できてたわけですが、Firebugを使えばこれが一瞬でできる！
はじめはFirebugの使い方もよくわかりませんでしたが、とりあえずInspectでページ内を触ってみたり、styleで値を適当にいじっていくうちにこれはすげー便利なツールだなと実感できるようになりました。
こんなのが無料で手に入って良いんでしょうか…すごいなぁ。
Firebugは名前の通り、Firefoxのアドオンですが、Chrome版もあります。
…ですが、機能が少ないのが難点。
メイン機能は備わってるので簡単に使う分には事足りるんですが、Chromeをメインに使ってる身としては、はやく完全版を出して欲しいなぁと。
無料でこんなのが使えてすげぇと言いつつ、文句言うなんてワガママですね（笑）
とにかく、Firebugを入れること。
そして、綺麗に作ってあるサイトを開き、Firebugでいじりたおす！
とくに、値ごとにoffできるのが便利です。どの値が見た目にどう影響してるのか理解しやすい。
個人的には、いじるサイトはあまり複雑でない方がいいかなーと思います。
CSS以外でいろいろ制御されてるとややこしくなりそうなので…
まずはシンプルにHTMLとCSSでつくってあるサイトを。
ブログならデザイン豊富で、構造も理解しやすいので良いんじゃないかな。
あとは、初心者向けのCSS解説サイトをひととおり読んでおきました。
どんなタグがあって、どんなことができるのかを簡単に把握。
実際の記述方法はその時に調べればいいですしね。
できることとできないことのラインを把握しとくだけで頭の中のイメージがだいぶ整理できます。
あとは書くだけ
あとはひたすら書いていくだけです。
エディタはCSS Editを使いました。自動補完が便利というか必須だなと思ったので。
無料版だと保存時に文字数制限がありますが、とりあえずこれで良し。
CSSを書く
↓
ページ更新
↓
おかしい所はFirebugで適切な値を探す
↓
CSSを修正
の繰り返し。
Firebugがあればバッチリな値を見つけるとこまで作業できるので、
「値を変えてみたものの、ちょっと変だった…」
という無駄なやり直しが無くなりました。これはすげー便利だわ。
分からない所は他のサイトを見ながら（もちろんFirebugで）
参考にし、少しずつ形をつくっていきました。
問題だったのは、最初にラフを書かなかったこと。
あとから「ここの文字を大きくしよう」とか「あっちを変えたらこっちも変えたほうがいいな」とかとか。
よくある話ですが今回は練習なのでそれも良しとしましょう（笑）
そんなわけでこのブログも自分の納得できる形に変更できました。
次は、実際に書いてて理解しづらかったポイントとか、疑問点をまとめたいと思います。
（次で終わりです、たぶん）
