[WordPress]WordTwit3.0のアップデートとbitlyの設定方法

暑くなって来ましたね、@cappeeです。

WordPressでブログの公開と同時に自動でツイートしてくれる優良プラグイン「WordTwit」が 3.0 にアップデートされました。

6月11日に行われたtwitterのAPIの仕様変更に伴うアップデートになるので、設定を最初からし直さないといけません。

少々厄介だったので「WordTwit3.0」の設定方法と、ついでにURL短縮ツールの「bitly」の設定方法についても一緒にメモしておきます。

WordTwit 3.0 の設定

WordTwit 3.0 の日本語化

まずWordPressの管理画面からWordTwitを3.0にアップデートしてください。

WordTwit 1024x605 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

管理画面の左側に新しくWordTwitのメニューが追加されますので、「WordTwit Settings」をクリックして設定画面を開き、「General」の下のプルダウンから「日本語」を選んでひとまず保存しておきます。

Twitter Developers の設定

日本語化したら、画面上部の青いアラート部分にある「Configure on Twitter Now »」をクリックすると、twitterのDevelopers画面が開くので該当のアカウントでログインします。

「Create a New Application」ボタンを押して、必須項目を入れていきます。

WordTwit1 720x1024 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

Nameに「WordTwit」や「WordTwit3.0」と入力すると「WordTwitは既にNameで使われています」というエラーがでました。
もしかすると全アカウント対象で同じ名前にできないのかもしれません。
「ワードツイート」と入力したところ、ひとつのアカウントでは通りましたが、もうひとつの方はダメでした。。
かぶらないためにも適当なわかりやすい日本語がいいかと思います。

次重要です!

WordTwit2 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

画面上部の「Settings」タブを開いて、「Application Type」にある「Access」を「Read and Write」に変更します。
保存しても元に戻っている時があるので、保存後きちんと設定が変更されているか必ず確認してください。

もし、この設定をしないで、WordPressのWordTwitの設定を進めてしまった場合、WordPressの方を一度リセットしてからやり直すとうまく行きます。

WordTwit3 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

「Details」タブに戻って、さらに「Access level」が「Read and write」になっているか確認します。

その下に書かれてある「Consumer key(コンシューマー・キー)」と「Consumer secret(コンシューマー・シークレット)」は次のWordPressの管理画面で使用するのでこちらも確認してください。

WordTwit 3.0 の設定

WordPress管理画面の左メニューから「WordTwit 設定」を開きます。

WordTwit4 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

「Twitter OAuth Credentials」に先ほどの「コンシューマー・キー」と「コンシューマー・シークレット」を入力します。

投稿の文言などを調整する場合は「Publishing Widget」を変更してください。

「ツイート文字数制限を維持するために、投稿タイトルを短縮してください」にチェックを入れると、タイトルが長かった時に140文字以内であっても短縮されてしまうので、私はチェックを外しています。

投稿の表示を変えたい場合は「カスタム」を選択すると文字を編集することができます。

アカウントの追加

WordPress管理画面の左メニューから「アカウント」を開き、「アカウントを追加」をクリックします。

dfa94227903f4cc97b98b0562c9e7656 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

アカウント許可の画面が開きますので、「連携アプリを認証」を押します。

WordTwit5 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

アカウント一覧に表示されました。

ここは任意ですが、「プライベートにする」に変更すると、投稿時にどのアカウントでツイートするかを選択することができます。
毎回同じアカウントで投稿する場合、そのまま「共有済み」にしておいて大丈夫です。

以上でWordTwit3.0の設定は完了です!

bitly の設定方法

bitly の API Key

 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

bitlyにログインして、右上のアカウント名から「SETTINGS」→「ADVANCES」を開きます。

bitly [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

「Legacy API Key」の「Show legacy API key」をクリックするとWordPressの方の入力で必要なAPI Keyを確認することができます。

bitly の設定

WordPress管理画面の左メニューから「WordTwit 設定」を開きます。

bitly1 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

「短縮方法」で「bit.ly」を選択肢、先ほどの「ユーザーネーム(Login)」と「API キー」を入力すれば完了です。

ツイートを確認する

3260f8469879b7ccc7013d69d4b2e696 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

投稿画面の右側に設定した通りツイートの表記がされているか確認してください。

3260f8469879b7ccc7013d69d4b2e6961 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

アカウントを「プライベート」にした場合は、ユーザーアイコンをクリックして、Twitterアカウントを選択する必要があります。
チェックしないまま公開すると、ステータスは「公開済み」になっているのにツイートされてない状態になるので注意です。

582dbbf5f2974bb8dd0e0c0c579687c7 [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

管理画面の「ツイートログ」では、ツイートされなかった場合「失敗」と表示されますのでもう一度設定など問題ないか見直す必要があります。

問題なければ「公開済み」となるので、あとはtwitterの方でも確認して完了です!

【注意】投稿失敗してしまうと投稿数だけURLの最後に「?wt=5」がついてしまいます。
そのツイートのURLからアクセスすると私の本文の上に設置しているようなPocket数などがゼロに表示されてしまうので、気になる場合は失敗した時だけ手動でツイートするなど対処した方が良さそうです。

Pocket
article clipper [WordPress]WordTwit3.0のアップデートとbitlyの設定方法

デザインファイルのバージョン管理ができる「Pixelapse」!バックアップとして使うと便利

ムシムシしますね、@cappeeです。

デザインの修正があって、「もしかすると前のデザインも使うかもしれないからファイル名変えてとっておこう。」って時結構ありますよね。

あと、大幅にデザインがかわるので念のため新旧で残しておくとか。

そんなことをしているとこんな感じで日付がついたファイルがたーくさんできてしまうのです。

156e21a0ac79a21a3da6d62a4ff6370d デザインファイルのバージョン管理ができる「Pixelapse」!バックアップとして使うと便利

もっとファイルをキレイに管理できないもんか。。

そこで、「Pixelapse」の登場です。

「Pixelapse」でバージョン管理

 デザインファイルのバージョン管理ができる「Pixelapse」!バックアップとして使うと便利

Pixelapse」とはデザイナー版Dropbox+GitHubのようなもので、pngやpsdなどのファイル管理差分があった時のバージョン管理ができます。(以前は招待制だったようです)

Pixelapse 1024x584 デザインファイルのバージョン管理ができる「Pixelapse」!バックアップとして使うと便利

フォルダをつくって公開・非公開の設定も可能です。

Pixelapse1 デザインファイルのバージョン管理ができる「Pixelapse」!バックアップとして使うと便利

ファイル名が違うとキャプチャ付きの一覧で表示されます。

Pixelapse2 デザインファイルのバージョン管理ができる「Pixelapse」!バックアップとして使うと便利

ファイル名をクリックするとどのくらい変更があったか、変更されたファイルのデザインをプレビューで見ることができます。便利!
ただし自動的にファイル同士を比較して差分を表示してはくれませんので、目視での確認が必要になります。

過去のデータをダウンロードできるので、デザインを元に戻すなんてことも簡単です!

Pixelapse3 デザインファイルのバージョン管理ができる「Pixelapse」!バックアップとして使うと便利

アプリケーションをインストールすればローカルフォルダのように保存できるのでとても便利です。
私のWin7の環境だとパソコンを終了するときに、アプリのエラー表示がでるようになったので(なぜ。。)、スタートアップにはせず、使う時だけ起動するようにしてます。

私はバックアップ的な形でキリのいいタイミングで「Pixelapse」に保存して使用していますが、下記でも紹介されているように常に「Pixelapse」でデザインファイルを保存しておけば、万一上書きしてしまった際の救世主にもなります。
ただし、その分リビジョン(履歴)がたくさんできてしまうため容量の問題も発生してしまいますのでご注意ください。現時点では容量制限の記載はないみたいです。
もうPSDは無くさない!デザイナー版GitHubのPixelapseはうっかりデザイナーの救世主!

Dribbleのように作品を公開することもできるので、ポートフォリオのように使うこともできますね。

サーバー大丈夫なのかなって勝手に心配してますが、こういう便利なサービスがあるのは非常にありがたいです。

Pocket
article clipper デザインファイルのバージョン管理ができる「Pixelapse」!バックアップとして使うと便利

[バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

梅雨入りしたのに快晴が続いてますね、@cappeeです。

コーディング中にちょっとしたミスをしてしまったり、クライアントさんにやっぱり元に戻してと言われたり、「ソースコードを前の状態に戻したい…」ってことはWebデザイナーでも少なくないと思います。

バージョン管理はエンジニアさんのためだけではありません:)

バージョン管理導入したいけど、Gitとか難しそうだし」というWebデザイナー(非エンジニア)でも簡単に導入できるツールがあるので、設定方法などをご紹介したいと思います。

バージョン管理とは

ソースコードの差分などファイルの更新履歴を管理してくれるシステムです。

プロジェクト内のファイルをバージョン管理することで、編集日や編集箇所などを記録しておくことができるので、過去のソースコードを容易に探すことができます。

複数人でひとつのプロジェクトに参加している場合は、同じソースコードを複数で編集した場合に変更内容を知らせてくれるなど、重複や巻き戻り防止にもなります。

私は一人の場合でも、バックアップとして活用しています。もう大量のファイルをローカルに保存しておかなくても大丈夫です。

Gitとは

分散型の高機能なバージョン管理システムです。

Gitはオープンソースですので誰でも使用できる手軽さからとても人気があります。

イラスト付きですごーく詳しく説明してくれている記事があるのでこちらをご覧ください!
イラストでわかる!git入門の入門

バージョン管理を導入するのは手間のかかる作業ですが、「Bitbucket」と「SourceTree」を使うことで、ぐっと導入が簡単になります。(私でもできました。)

SourceTree」は、ローカルからリポジトリにPushやコミットをするソフトです。先日「SourceTree」のWindows版がリリースされました。

Bitbucket」は、コミットされたファイルの履歴などを閲覧することができるウェブサービスです。

今回はこの2つを使ってバージョン管理を導入してみたいと思います。

とりあえず何ができるの?

更新したファイルを「SourceTree」でリポジトリにコミットすると、「Bitbucket」でウェブから下記のような更新履歴を見ることができます。

赤枠のように何の修正をしたかなどコメントを残すことができるので、後から探しやすいです。(下記はコメント適当ですがもっと具体的に書いたほうがいいです。)

Bitbucket [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

コメントのところにあるリンクをクリックすると、前回との差分を見ることができるので、ソースコードを元に戻したい場合などにとても便利です。

Bitbucket1 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

画像なんかも前後で比較してくれるので便利!

Bitbucket2 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

気になった方は、下記を参考に便利なバージョン管理Lifeをお楽しみください。

SourceTree をインストール

まずは「SourceTree」をインストールしてください。

インストールを進めるとGitがまだPCにない場合は「Gitないけど入れますか?」と聞かれるので、とりあえず一番上を選択してください。

sourceTree1 300x269 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

さらに進むとアカウント登録画面が表示されるので名前とメルアドを入力し、最後の規約同意をチェックして次へ。

sourceTree2 282x300 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「global ignore file をインストールする?」と聞かれるのですが、これは管理しないファイルリストのことです。
「.exe」や「.dll」など通常コミットしないであろうファイルが書かれてあるデフォルト設定のファイルリストを使う場合は「Yes」を押します。
無視リストに関してはこちらに詳しく注意点など書かれてますのでご覧ください。
SourceTree が Git のグローバルな無視リストを書き換えて困った話

sourceTree3 300x166 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

次にリポジトリを管理するツールについて聞かれるので、「Bitbucket」を開いてサインアップしてください。

sourceTree4 283x300 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

できたら「Finish」でインストールは完了です。

鍵をつくる

」は、Gitとサーバが通信を行う認証情報として必要なファイルで、安全に通信することができます。重要な情報を含んでますのできっちり管理しましょう。

「SourceTree」上部にあるメニューから、「Tools」→「Create or Import SSH Keys」を選択して、PuTTY Key Generator を起動してください。

sourceTree5 300x254 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「Generate」をクリックし、「Key」と書かれた枠内でマウスを動かすと鍵が生成されます。

sourceTree6 300x255 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

下記のように表示されたら、「Key Comment」に自分の名前などわかりやすいもの、「Key passphrase」と「Confirm passphrase」には設定したいパスワードを入力します。

sourceTree7 300x254 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「Save private key」をクリックして「秘密鍵」(.ppkファイル)を保存します。

それとは別に「公開鍵」というものも保存しておきます。「Public key for pasting into OpenSSH authorized_keys file:」のところに書かれてある文字列をコピーしてエディタなどに貼り付けます。「名前.pub」の形式で保存してください。

次に「秘密鍵」を登録します。
Generatorを閉じて、SourceTreeの「Tools」→「Launch SSH Agent(pageant)」を選択。
先ほど保存した.ppkファイルを選び、パスワード(passphrase)を入力して登録完了です!ふぅ

大事だからもう一度言います。秘密鍵と公開鍵はなくさないでくださいね。

Bitbucket で鍵の設定

鍵設定の前に「Bitbucket」を日本語で表示させたいと思います。
右上のプロフィール画像から「Manage Account」を選択し、「Language 」を「Japanese」に変更します。
「Save Settings」をクリックすると、翻訳率は99%で不完全だけどいいですか?というダイヤログがでますがそのまま設定を保存して日本語にしましょう。

Bitbucket3 300x189 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

次に「鍵」を設定します。左のメニューから「SSH キー」を開いてください。

鍵を追加」をクリックして、「Label」 には公開鍵と同じ名前など適当なものを入力し、「Key」にはエディタで保存した「公開鍵」を貼り付けて追加します。

Bitbucket4 300x182 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

これでついにバージョン管理ができるようになります!やた

リポジトリの作成

リポジトリ」とは、更新したファイルのデータなどが蓄積する「場所」のことで、基本はプロジェクト単位で作成します。

ブルーのヘッダーにある「作成」ボタンを押すと新規リポジトリページが表示されます。(100万人突破したらしくキャプチャのロゴは特別バージョンです)

Bitbucket5 300x182 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「名前」には英数字でプロジェクト名を入れます。
非公開にする場合は「プライベートリポジトリ」にチェックしてください。
リポジトリタイプは「Git」です。
プロジェクト管理にチェックすると、「課題追跡」や「Wiki」なども作成することができます。

「リポジトリの作成」をクリックすると、リポジトリ画面になります。
これでリモート上のリポジトリは作成することができました。

Bitbucket6 300x165 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

次に「SourceTree」でコミットした時に蓄積されるローカル上のリポジトリも作成します。
上記画面で「クローン」をクリックし、ブルーのボタンの「SourceTreeにクローン」を押すとダイアログがでるので「アプリケーションの起動」をクリック後、「SourceTree」の設定画面が開きます。

sourceTree8 300x157 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「Destination Path」にローカルでプロジェクトを管理しているフォルダを指定します。
すでに作業していたフォルダを指定する場合は、念のためフォルダ内のファイルをコピーしてからこのリポジトリを作成した方がいいかもしれません。
何回かファイルがすべて消えてしまったことがあるので…。やり方が悪かったのかもしれませんけど。

「Clone」をクリックすると、作成したリポジトリの画面が表示され、ファイルを管理できる状態になりました。

sourceTree9 300x199 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

ローカルリポジトリにコミット

次に設定したフォルダにあるファイルをローカルのリポジトリに「コミット」してみます。

画面上部にあるアイコンメニューから「Commit」を選択してください。

sourceTree10 1024x694 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

下記の画面が表示されるので、どのような更新をしたかなどコミット理由を明記します。
Commit modeを「Selected files」にして、もしコミットの必要がないファイルがあれば下のチェックを外します。
画面右下の「Commit」ボタンを押せばコミット完了です。

リモートリポジトリにプッシュ

リモートのリポジトリにプッシュすると、「Bitbucket」上で更新履歴を閲覧できるようになります。

「SourceTree」のアイコンメニューにある「Push」をクリックしてください。

sourceTree11 300x250 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「master」にチェックし、「OK」を押せばプッシュ完了です。

ただし、ソフトを起動して最初のプッシュの時だけ下記のような認証警告ダイアログが表示されます。

sourceTree12 300x124 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「Yes」をクリックして、先ほど保存したppkファイルの「秘密鍵」を選択してください。

下記のような「Enter Passphrase」画面が表示されるので、設定したパスワードを入力します。

sourceTree13 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「SourceTree」に戻り、「Retry」ボタンを押せばプッシュできます。Pushingの青いバーが右まできたらプッシュ完了です!

Bitbucket で履歴確認

ブラウザで表示していた「Bitbucket」に戻って、プロジェクト画面を更新してみてください。
下記のようにコミットした履歴が表示されれば成功です。おめでとうございます!

Bitbucket7 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

「概要」メニューの右側にある、「ソース」ではファイルの一覧が見れたり、「コミット」ではコミット一覧が表示されていますので色々とリンクをクリックしてみると、こんなことも管理できるんだ!と利便性を実感できるかと思います。

ファイルを更新する(運用方法)

上記でコミットしたファイルを更新すると、「SourceTree」で更新されたファイル数や編集内容が確認できます。
同じファイルに上書きしていても、どのような編集が行われたかを確認することができるなんてステキですよね。

sourceTree14 1024x679 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

上記と同じようにコミット&プッシュをして、「Bitbucket」で確認してみます。更新履歴が追加されました。

Bitbucket8 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

リンクをクリックすると具体的な編集内容を見ることができます。

Bitbucket9 [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

このようにバージョン管理すればいざというときも安心です!

ぜひ導入を検討してみてください。

ちなみにDreamweaverからGitを使える「GITWeaver」という機能拡張もあるようです。色々な管理方法があるので、紹介しておきます。
Gitを使っているWebデザイナー必見。DreamweaverからGitを使える「GITWeaver」

Pocket
article clipper [バージョン管理]Webデザイナーでもできる Bitbucket と SourceTree を使って簡単バージョン管理

Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

本日が決算日の@cappeeです。

Sublime Text 2 + Sass(SCSS) + Compass + Emmet(Zen-Coding) 最強説!

ついにたどり着いてしまったかもしれません。

今話題にもなっている通り上の4つがタッグを組むことでものすごい効率的にコーディングができます。(そこまでまだ使いこなしてないので、正しくは「できそうです」。)

せっかくなので導入するにあたり参考にさせていただいたサイトのまとめとつまづいたところなどをメモしておきたいと思います。

導入のキッカケ

話題すぎるほど人気のツールですので導入を検討するために調べてみたりはみなさんすでにしているかと思います。

私はDreamweaverを使用していてEmmet(Zen-Coding)は今までも活用してきたので、さらなるスピードアップを求めてSass+Compassの導入をしようと思っていました。

Sassの使用にはRubyをパソコンにインストールする必要があったので、まずはそういった煩わしいことをせずに導入できる「Scout」というGUIツールを使ってSassをCSSに変換するコンパイルをしてみます。

ほうほうこれは思いのほか簡単に導入できたしいいぞと。

しかしDreamweaverでコーディングしようと思った時に、SCSSで書いてもアップロードするのはCSSなわけなのでいちいちCSSを選択してPUTするのは結構面倒だな。

ということでSCSSファイルを保存したらCSSが自動でアップロードできないか調べてみると、話題のSublime Text 2はできちゃうんですね。さすが。

DreamweaverのコードカラーもSublime Text 2と同じにしていた私なのでこれは「時が来た」と思ったわけです。(カラーコードかえるくらいならもっと早く乗り換えろよってね)

Sass(サス)とは

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

CSSを生成するためのメタ言語で、シンプルな入れ子構造、Mixinsという複数定義が可能、さらに変数や演算などを使えるので、Sass(SCSS)からCSSを生成することで効率よくコーディングすることができます。

SassにはSASSとSCSS、二種類の記述方法があって一般的にはSCSSが使われています。

SCSSはCSSと記述が似ていますが、SASSは{}や;(セミコロン)をつけないインデントを使った階層になっています。一見シンプルそうですが、CSSへの慣れと見やすさなどからSCSSの方が人気のようです。

こちらに参考記事がまとまっています。
初めてSassとCompassを使った際に参考にした記事まとめ

Compass(コンパス)とは

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

Sassを使ったフレームワークで、接頭辞(ベンダープレフィックスの)ついたCSS3のプロパティなどを簡単に挿入することができます。
CSS Spriteも書き出してくれるので、使うこなせばかなりのスピードアップになりそうです。

SassとCompassについてはこちらに詳しく書かれています。
CSSの常識が変わる!「Compass」、基礎から応用まで!

Emmet(エメット)とは

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

Zen-Codingの次期バージョンの名前です。Emmetにかわると知った時はわりと衝撃でした。
名前が変わるくらい便利になったところは、新しく追加された「Fuzzy search」機能ではないでしょうか。
これにより決まった記述ではなく、クラス名からなんとなく推測される文字で展開しても理解してくれるようになったのです。

Emmetの記述方法や新しい機能などはこちらに詳しく書かれています。
CSSの記述を高速化する、Emmet (Zen-Coding)

Sublime Text 2(サブライムテキスト2)とは

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

非常に高性能なテキストエディタです。テキストエディタなのでDreamweaverのデザインビューを活用してコーディングしている人はちょっとハードルが高いかもしれません。
無償でダウンロードできるので、検討するのにとことん使いたおしてから購入することができるのも魅力の一つです。

こ~いしちゃったんだ~♪
”恋に落ちるエディタ”「Sublime Text」 完全入門ガイド!

Sass+Compassをとりあえず簡単に導入してみたい方は

Scout

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

何も考えずにScoutというSass(SCSS)からCSSをコンパイルできるGUIツールをインストールすればすぐに使うことができます。
通常コマンドなどを使うのですが、GUI(グラフィカルユーザインタフェース)だとデザイナーでも直感的に操作できるのでとっつきやすいです。
ただし、Scoutはディレクトリに日本語があると動作しないなどもあるようなので注意してください。

こちらに設定方法などが書かれていますので参考にしてみてください。
【Sassを覚えよう!Vol.3】一番カンタンな環境構築(Scout編)

Koala

 Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

公式サイト

最近リリースされたばかりのデザインがイケてる上記と同じコンパイラのGUIツールです。
Rubyをインストールする一手間はありますが、とても簡単なのでレッツトライ。
ディレクトリに日本語が使えるなどScoutより柔軟で、インターフェース的にも使いやすいと思います。

設定方法はこちらをご覧ください。
scss (sass) + compassがスーパー便利でびっくりしすぎて今さら環境を作ったり。Koalaで。

最強タッグを導入してみよう!

Sublime Text 2 + Sass + Compassのインストール手順

こちらにわかりやすく記述されていますのでインストール手順を参考にしてみてください。
コーダー必見、SCSS・Compassで開発効率アップ|Sublime Text 2でコンパイル編

プロジェクトの保存ですが、「Project > Save Project As…」で選ぶ場所はconfig.rbが設置されたルートディレクトリを設定しないとうまくコンパイルできませんでした。
また、プロジェクトのルートディレクトリに日本語(全角)があるとコンパイル出来ないのでご注意ください。

エラーがでた時の対処法

もしSCSSをビルドした時にエラーがでたら、エンコードの問題かもしれません。

ConvertToUTF8」というパッケージをインストールしてください。Sublime Text 2はデフォルトだとUTF-8にしか対応してませんので、ShiftJIS、EUC-JPにも対応できるようになります。
また、日本語のインライン入力に対応させる「IMESupport」もインストールしておきましょう。

下記の「その1」と「その3」を参考にしてください。
「Sublime Text 2」(Windows版)でまずやる2つのこと

それでも、もし「Decode error – output not utf-8」というエラーが表示されたら、「Preferences > Browse Packages…」を選択し、「Compass」フォルダの「Compass.sublime-build」を開いて下記を追加してください。(最後の行に追加する場合は「,」は必要ありません)

"encoding": "cp932",

初期設定

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

Zen-Cordingのパッケージは、現在「Emmet」という名前に変更されてますので、新しい名前で検索してください。

ちなみに私はテーマを「Phoenix」にしています!

プロジェクト管理など便利な機能についてはこちら。
Sublime Text 2とEmmetで制作効率アップ!

Windows版のショートカットキーはこちらが参考になります。
Sublime Text 2のショートカットキーで便利なやつ何個か(Windows版)

メニューを日本語化

すべて英語表記なので日本語にしたいという方は下記ブログのコメント欄に最新バージョンが配布されています。
【Windowsアプリケーション】Sublime Text 2 メニュー日本語化

FTPの設定でCSSファイルを自動アップロード

私がDreamweaverからSublime Text 2に移行した一番の理由です。
CSSファイルだけでなく、すべてのファイルが保存と同時にアップロードできるのでとても楽です。
ただし本番環境の場合は手軽さが仇となる時もあると思うので考えてから設定する必要がありますね。

私と同じ壁にぶちあたった方がインストール方法など記事を書いています。
一石三鳥!?SublimeText2とsass/SCSS(compass)+SFTP(FTP)で作業効率化する方法。

これで最強のタッグを手に入れることができました!

Sassの本がでましたよー!読みましたがかなりオススメです!

Pocket
article clipper Sublime Text 2 + Sass + Compass + Emmet 最強説!導入方法と自動アップロードの設定まとめ

Facebookやtwitterなどのソーシャルボタンを高速に読み込む方法まとめ

今朝突然iPhoneから避難訓練の緊急速報がピピピとなってびっくりした、@cappeeです。

以前投稿したこちらの「ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など」がわりと好評なので、高速化についても追記しようと思ったのですが、あまりにも長くなるので別記事で投稿したいと思います。

ソーシャルボタンの高速化に関する方法は色々なブログで見かけるのですが、記述方法などまとまったものがなかったのでメモしておきたいと思います。

ソーシャルボタンのJavaScriptを最後に記述する

ソーシャルボタンに限らず基本的なことですが、JavaScriptは表示が問題なければ</body>の直前に記述するとページの読み込みを早くすることができます。

jQueryなど<head>内で指定しないといけないJSもありますが、ソーシャルボタンのタグであれば最後に記述しても問題ありません。

ソーシャルボタンのJavaScriptに非同期化を指定する

現在のFacebookやtwitterボタンは「同期読み込み」になっており、ソーシャルボタンのJavaScriptの読み込みが完了するまで他の読み込みができない状態です。

これを「非同期読み込み」にすることで、JavaScriptの読み込みが完了していなくても他の部分を読み込むことが可能になります。

FacebookやGoogle+1でもそのような読み込み方法が推奨されているようです。

ちなみにGoogle+1ボタンは最初から非同期の設定になっていますので変更の必要はありません。

Facebookタグの記述方法

js.async = true; を以下のように追加することで非同期化します。

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id; js.async = true;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=110946748983094";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

twitterタグの記述方法

twitterの公式タグは非同期に対応しているらしいのですが、それらしい記述が見当たらないため、疑り深い方は async を記述してみてください。表示は問題ありません。
js.async = true; を以下のように追加することで非同期化します。

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

Twitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプト(+はてな)

よく追加するソーシャルボタンとAnalyticsのJavaScriptをキレイにまとめて非同期にしたスクリプトがあります。

/*
 * Updated to use the function-based method described in http://www.phpied.com/social-button-bffs/
 * Better handling of scripts without supplied ids.
 *
 * N.B. Be sure to include Google Analytics's _gaq and Facebook's fbAsyncInit prior to this function.
 */ (function (doc, script) {
    var js,
    fjs = doc.getElementsByTagName(script)[0],
        add = function (url, id) {
            if (doc.getElementById(id)) {
                return;
            }
            js = doc.createElement(script);
            js.src = url;
            id && (js.id = id);
            fjs.parentNode.insertBefore(js, fjs);
        };
    // Google Analytics
    add(('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js', 'ga');
    // Google+ button
    add('https://apis.google.com/js/plusone.js');
    // Facebook SDK
    add('//connect.facebook.net/en_US/all.js', 'facebook-jssdk');
    // Twitter SDK
    add('//platform.twitter.com/widgets.js', 'twitter-wjs');
}(document, 'script'));

さらにプラス「はてな」を追加してスクリプトもありましたので引用しておきます。

詳しくはこちらをご覧ください。
最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた

<script>
(function (w, d) {
w._gaq = [["_setAccount", "UA-XXXXXXXX-X"],["_trackPageview"]];
w.___gcfg = {lang: "ja"};
var s, e = d.getElementsByTagName("script")[0],
a = function (u, i) {
if (!d.getElementById(i)) {
s = d.createElement("script");
s.src = u;
if (i) {s.id = i;}
e.parentNode.insertBefore(s, e);
}
};
a(("https:" == location.protocol ? "//ssl" : "//www") + ".google-analytics.com/ga.js", "ga");
a("https://apis.google.com/js/plusone.js");
a("//b.st-hatena.com/js/bookmark_button_wo_al.js");
a("//platform.twitter.com/widgets.js", "twitter-wjs");
a("//connect.facebook.net/ja_JP/all.js#xfbml=1", "facebook-jssdk");
})(this, document);
</script>

遅延ロードまたはスクロール位置ロード

非同期読み込みでも遅い!という方はもう一手間追加すればきっと快適になるはずです。

遅延ロード … ページが表示されて数秒した後に指定したJavaScriptを読み込むという方法です。

スクロール位置ロード … ページの高さのとある場所までスクロールしたらJavaScriptを読み込むという方法です。

こちらの読み込みの記述方法に関しては下記を参考にしてください。
Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め!

以上になります。

ちなみにこのブログのソーシャルボタンはプラグインで表示しているため非同期化はまだ未対応です!

Pocket
article clipper Facebookやtwitterなどのソーシャルボタンを高速に読み込む方法まとめ

[意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

こんにちは、@cappeeです。

サイトを3カラムで作る場合は通常floatを使いますよね?

今回は意外と知らないCSS?かもしれない、floatを使わずにレイアウトできる display:box をご紹介します。

display:box とは

displaybox1 300x151 [意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

CSS3の display:box を使えば一瞬にして3カラムのレイアウトをすることが可能です。

もうfloatのclearになんか悩まされることもありません。

display:box のすごいところは、横並びでレイアウトしたい要素の「親要素」にだけ記述すれば勝手に横並びにしてくれます。

プレフィックスを入れてもたった2行でできてしまうのです。

Flexible Box(フレキシブルボックス)とも言います。

display:box の記述方法

#contents の中に横並びにしたい要素を入れたとします。
下記の2行を追加すればもう横並びになっているはずです。ほんと一瞬ですね。

#contents{
display: -webkit-box; /* Safari,Google Chrome用 */
display: -moz-box; /* Firefox用 */
}

box-ordinal-group で順序変更

displaybox2 300x68 [意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

display:box 内にある要素に box-ordinal-group を指定すればHTMLの記述順に関係なく表示を入れ替えることができます。
下記のように記述すればHTML上#innerA→B→Cの順でも、表示はC→A→Bの順番になります。

#contents{
display: -webkit-box; /* Safari,Google Chrome用 */
display: -moz-box; /* Firefox用 */
}
#innerA{
-webkit-box-ordinal-group: 2; /* Safari,Google Chrome用 */
-moz-box-ordinal-group: 2; /* Firefox用 */
}
#innerB{
-webkit-box-ordinal-group: 3; /* Safari,Google Chrome用 */
-moz-box-ordinal-group: 3; /* Firefox用 */
}
#innerC{
-webkit-box-ordinal-group: 1; /* Safari,Google Chrome用 */
-moz-box-ordinal-group: 1; /* Firefox用 */
}

box-flex で可変に

displaybox3 [意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

display:box 内にある要素に box-flex を指定すれば display:box で指定した横幅に合わせて伸縮してくれます。
display:boxを指定した要素にwidthを記述しないとFirefoxで横幅一杯に広がってくれませんのでご注意ください。

#contents{
width: 100%;
display: -webkit-box; /* Safari,Google Chrome用 */
display: -moz-box; /* Firefox用 */
}
#innerA{
width: 350px;
}
#innerB{
-webkit-box-flex: 1; /* Safari,Google Chrome用 */
-moz-box-flex: 1; /* Firefox用 */
}
#innerC{
width: 350px;
}

display:box の活用

display:box は残念ながらIEでは対応していませんIE10からの対応となります。

ただし、仕様変更を繰り返しているようなのでまだPCサイトで使用するには注意が必要です。

[参考サイト]IE8から始めるテーブルレイアウト と IE10からのFlexible Box

活用方法としては、スマートフォンサイトの制作には display:box が大活躍してくれますよ。

横並びのメニューやタブの表示が一瞬でできてしまいます。

[2014.01.24]box-flexを使って可変に対応したい場合の指定に、Firefoxに関する補足を追記しました。

Pocket
article clipper [意外と知らないCSS]一瞬で横並びレイアウトができるdisplay:box

人気の「Pocket」パブリッシャー画面から明らかになる記事の必要性と開封率

こんにちは、@cappeeです。

前回人気の「Pocket」について投稿したものの、あわわあわわと時が立ってしまいました。

 人気の「Pocket」パブリッシャー画面から明らかになる記事の必要性と開封率

今回はパブリッシャー画面が見れるようになったので自分の記事について分析してみようと思います。

Pocket とは

(前回のおさらい)Pocket とは、旧Read It Laterだった「あとで読む」機能に特化したサービスです。

最近「あとで読む」系のサービスがたくさんリリースされていますが、その中でも軍を抜いて人気です。

まずは、ぜひ試してみてください。アプリのデザインもキレイで参考になります。

パブリッシャーアカウント

前回は「Pocket」ボタンの設置とPocketユーザーの傾向を数字で見れるパブリッシャー登録を行いました。

まだパブリッシャー登録を行なっていない場合は、こちらを参考にパブリッシャーアカウントを作成してください。
あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

アカウントを作成して数日待つと「Your Pocket for Publishers Account Is Ready!」という件名のメールが届きます。

pocket 300x210 人気の「Pocket」パブリッシャー画面から明らかになる記事の必要性と開封率

メール本文の「Go to your dashboard and publisher tools.」か左のリンクでパブリッシャーのダッシュボードを開いてください。

Pocketの統計

Pocket for Publishers Dashboard2 人気の「Pocket」パブリッシャー画面から明らかになる記事の必要性と開封率

ダッシュボードのトップページはこのように全体の統計を見ることができます。
一番上の「Recent Snapshot」には全体の平均の数字が表示されています。

SAVED ITEMS OPENED(保存された記事の開封率) … 20%
AVERAGE LIFESPAN(記事の平均寿命) … 25日

これにより記事の平均寿命が結構長いことがわかりました。

開封率を見るとそこまで高くありません。

「後で必要になりそうだからPocketしておこう」的な記事が多いということでしょう。

記事のランキング

「Top Content」を見ると記事のランキングを見ることができます。

Pocket for Publishers Dashboard1 人気の「Pocket」パブリッシャー画面から明らかになる記事の必要性と開封率

「See More…」リンクからより多くのランキングを見てみると、SAVED RANK 1位 の記事が IMPACT RANK は 16位 でした。

どうやら下記のような基準になっているようです。

SAVED RANK … 保存された回数のランキング
IMPACT RANK … 開封率や開封までの期間を加味したランキング

Pocket for Publishers Article Detail 人気の「Pocket」パブリッシャー画面から明らかになる記事の必要性と開封率

SAVED RANK 1位の記事「ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など」の詳細を見てみると、開封率は高くないが記事の寿命が非常に長いです。

“あとで読む”というよりもブックマーク的に保存された方が多いということになりますね。

Pocket for Publishers Article Detail1 人気の「Pocket」パブリッシャー画面から明らかになる記事の必要性と開封率

SAVED RANK 2位の「[Dreamweaver]CS6でオススメの拡張まとめ」は、開封率はそこそこで記事の寿命が長いです。

こちらは記事の内容的にもすぐに実行する必要があるためIMPACT RANKも上位だったというわけですかね。

すぐに読む必要があるか、ブックマークのように必要になった時に読むのか、記事の内容でもIMPACT RANKは大きくかわりそうです。

私のブログはまだ記事数も少なくPVも高くありませんので、こちらのブログもぜひ参考にしてみてください。

[参考サイト]Pocketボタンが可視化する「見えないバズ」とウェブコンテンツの新しい指標

まとめ

今回の解析から私のブログは寿命が長く、ブックマーク的にPocketしているユーザーが多いことがわかりました。

「Pocket」はソーシャルのつぶやきやいいね、はてなブックマークよりもボタンを押すハードルが低い分、今まで見えて来なかったユーザーの動向がわかるのが魅力なんだと思います。

ブログ書いてる方は試してみる価値アリです。

Pocket
article clipper 人気の「Pocket」パブリッシャー画面から明らかになる記事の必要性と開封率

あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

こんにちは、@cappeeです。

 あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

今「Pocket」が話題ですね。

私も「Pocket」ボタンを設置してみました。 上にも追加している「あとで読みたい人は…」のボタンです。現状人気のためか表示が少々重たい。。

Pocket とは

Pocket とは、旧Read It Laterだった「あとで読む」機能に特化したサービスです。

最近「あとで読む」系のサービスがたくさんリリースされていますが、その中でも軍を抜いて人気です。

まずは、ぜひ試してみてください。アプリのデザインもキレイで参考になります。

Chrome Extension なども用意されているのでサイトを登録しやすいのも魅力ですね。

Pocket : How to Save

PocketについてはGigazineの記事が一番参考になるので、気になる方はこちらをどうぞ。

気になるページを保存してあとで別のスマホなどからオフライン時にも読めるようにできる「Pocket」の使い方

Pocketボタンを設置してみて

他の方の記事を見るとPocket数が意外に多いという反響で、でもこのブログにはないだろうと思っていましたが…

下記の記事では7Pocket(2013.4.26時点)ありました。このブログを立ち上げて半年あまりですし、個人的には以外と多いなという印象です。それだけPocketユーザーも多いんですね。

f9db2933fe121e04a64b3f7cf4cbfa4b 300x121 あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

ちなみに同じ記事のソーシャルボタンの数字はこんな感じです。

2339382de5eb97b6bf5f3129e3ff2895 300x34 あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

Pocketボタンの設置方法

Pocket for Publishers Pocket Button2 300x222 あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

こちらからコードを取得できるので、簡単に設置することができます。

Pocket for Publishers: Pocket Button

ちなみにソーシャルボタンの設置方法をまとめている記事にも追加していますので、ぜひブクマしてくださいな。

ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など

パブリッシャー登録

パブリッシャー登録をするとPocketユーザーの傾向を数字で見れるようです。

実際使えるようになるまでにはもう少し時間がかかるようですが、とりあえず登録はおいた方が良さそうですね。

パブリッシャーの登録方法は、下記の画面にアクセスしてください。

Pocket for Publishers

Pocket for Publishers Dashboard 300x291 あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

このような画面が表示されるかと思うので、赤いボタンの「Request Access」を押して次へ。

まだログインしていない場合は、ログイン画面が表示されるのでログインしてください。

Pocket for Publishers Request Access For Your Site 234x300 あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

登録フォームにサイトの情報を記載します。

Pocket for Publishers Verify Your Site 300x215 あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

HTMLファイルをアップロードするか、ページにMetaタグを追加するかを選べます。今回はHTMLファイルで進めます。

Pocket for Publishers Verify Your Site2 300x293 あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

(1)の「Download」リンクからHTMLファイルをダウンロードして、サイトにアップロードしたら、(3)の「Verify Site」リンクをクリック。

Pocket for Publishers 300x275 あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

これでパブリッシャー登録は完了です!

正式に公開されるまであとは待ちましょう。楽しみですね。

公開されたらまたこちらに追加したいと思います。

[追加しました]
人気の「Pocket」パブリッシャー画面から明らかになる記事の必要性と開封率

[参考サイト]
「Pocket」ボタンをブログに追加したら、ソーシャルメディアの情報地下水脈を発見してしまったよ
「Pocket」(旧Read It Later)に追加するボタンをブログに付けよう

Pocket
article clipper あとで読む!ポチッ。人気の「Pocket」ボタンを導入してユーザーの傾向を数字で見る

[意外と知らないCSS]スマホ制作に便利!display:table-cellを使った横並びのレイアウト

スマホコーディングただいまガシガシ中の@cappeeです。

今回は「意外と知らない」というか、「便利だけどなかなか使えないCSS」かもしれませんね。

今回は、display:table-cell をご紹介します。

なかなか使えないと言った理由はIE8以降からの対応になるからです。

ただし、display:table-cell はスマートフォンサイトの制作にかなり便利なので覚えておくことは必須ですね。

display:table-cell で要素が簡単に横並び

table cell [意外と知らないCSS]スマホ制作に便利!display:table cellを使った横並びのレイアウト

display:table-cell とは、要素をテーブルのように表現することができるプロパティです。
親の要素に display:table を指定することでテーブルと同じような構造で指定することができます。

display:table-cell を指定した要素はテーブルのように高さが同じになります。

また、floatを使っていないためclearすることを考えなくてもすみます。

縦中央の指定が可能に

テーブルのセルと同じく vertical-align:middle を指定してセル内の要素を縦中央に配置することが可能です。

ul{
display:table;
}
li{
display:table-cell;
vertical-align:middle;
}

リキッドレイアウトにも最適

table cell2 [意外と知らないCSS]スマホ制作に便利!display:table cellを使った横並びのレイアウト

セルに当たる要素のliの幅を固定しても、それ以外のliが可変になります。
特にスマートフォンサイトの制作では、画面を縦に見た場合と横に見た場合でリキッドレイアウトを考慮することが必要なので、とても相性が良く私も頻繁に使います。

table-layout:fixed で均等配置

table-layout:fixed を使えばセルの横幅を指定しなくても均等に配置することができます。
display:table を指定している親要素に記述してください。横幅の指定も必要です。

ul{
display:table;
table-layout: fixed;
width:100%;
}
li{
display:table-cell;
}

テーブル系のdisplayプロパティ

  • table … テーブルの表示スタイル
  • inline-table  … インラインテーブルの表示スタイル
  • table-row-group  … <tbody>要素のような表示スタイル
  • table-header-group  … <thead>要素のような表示スタイル
  • table-footer-group …  <tfoot>要素のような表示スタイル
  • table-row … <tr>要素のスタイル
  • table-column-group … <colgroup>要素のスタイル
  • table-column … <col>要素のスタイル
  • table-cell … <th>要素及び<td>要素のスタイル
  • table-caption … <caption>要素のスタイル

display:table-cell を使うメリットまとめ

  • テーブルのように要素を簡単に横並びできる
  • 縦の中央揃えができる
  • スマートフォンサイトのような横幅が可変なリキッドレイアウトに最適
  • table-layout:fixed を使えばセルの横幅を指定しなくても均等に配置できる

IE8以降からの対応で、IE6やIE7には対応していませんので注意が必要です。

スマホサイトでの使用例

すべてがモダンブラウザであるスマートフォンサイトでの制作には display:table-cell が大活躍です。

横幅100%のナビゲーションやタブ
table cell1 [意外と知らないCSS]スマホ制作に便利!display:table cellを使った横並びのレイアウト
画像など横幅が固定の要素とテキストなど可変の要素をリスト表示する
table cell3 [意外と知らないCSS]スマホ制作に便利!display:table cellを使った横並びのレイアウト

いずれはスマホサイトだけでなく、PCサイトも色んなCSSが使えるようになるといいですよね!

[参考サイト]
CSS「display: table」と「display: table-cell」で出来ること
スマートフォンサイト制作にdisplay:tableとdisplay:table-cellが便利!

Pocket
article clipper [意外と知らないCSS]スマホ制作に便利!display:table cellを使った横並びのレイアウト

[Google Analytics]集計期間を初期値の直近1ヶ月に戻す方法

こんにちは、@cappeeです。

アクセス解析と言えば「Google Analytics」ですよね。いつもお世話になっております。

便利な機能が盛り沢山なのですが、地味にわかりづらいなと思った集計期間についてのメモです。

Google Analyticsの集計期間

一番最初に画面を開くと、直近1ヶ月の集計期間でレポートが表示されているかと思います。

Analytics画面右上に表示されている下記のようなプルダウンが集計期間です。

1month [Google Analytics]集計期間を初期値の直近1ヶ月に戻す方法

しかし一度別の期間を設定してしまうと、簡単に直近1ヶ月に戻す選択がどこにもありません。

GoogleAnalyticsDate 300x86 [Google Analytics]集計期間を初期値の直近1ヶ月に戻す方法

手動で選択してもいいですが、私なんかはいつもブラウザのタブに「Google Analytics」を開きっぱなもので、1度手動で設定すると翌日にまた再設定をしなければいけないという手間がかかります。

ので、非常に地味ではありますが、集計期間を初期値の直近1ヶ月に戻す方法をご紹介します。

集計期間を初期値の直近1ヶ月に戻す方法

GoogleAnalyticsURL 300x21 [Google Analytics]集計期間を初期値の直近1ヶ月に戻す方法

URLの最後をみると期間が設定されていますので、まずは上記の背景が青くなっている部分を削除してエンターを押します。

もう一度リロードしてみてください。

初期値の直近1ヶ月に戻りました。

別の方法としては、下記のAnalytics初期画面よりアクセスし直すという方法もありますが、URLの期間部分を削除するのが一番簡単だと思います。

https://www.google.com/analytics/

便利なレポート設定の共有

Google Analytics に関する記事を2連続でポストしましたが、前回ご紹介したレポート設定の共有も便利ですのでぜひご覧ください。

[Google Analytics]レポート設定の共有が便利すぎる!

Pocket
article clipper [Google Analytics]集計期間を初期値の直近1ヶ月に戻す方法