2015年2月アーカイブ

もう目の形がさっぱり分からない。

じゃなくて。

(笑)とか(爆)とか(棒)とか(汁)とか、
文末で()の中に漢字が入ってるやつ、
見かけるじゃないですか。

先日ケーキ屋さんかな?かどこかで、
見かけたんですよ。

(白目) を。

ただ、どんなときに使えばいいのか?
よくわからないと。

せっかくなので、華麗に、かつ優雅に、
それでいて繊細に、ついでに小生意気に、
使いこなしてみたいと。(白目)を。

さぁ、一緒に考えてみよう!
一体、どんなシチュエーションに、
「(白目)」 がふさわしいのかを!

Let's think together!

1 視力検査

「上...右...下...わかりません(白目)」

あまりにも完璧なハマり具合。
自分の才能が怖い...

2 愛の告白

「オレ...前からずっと、
オマエのことが好きだったんだ!
好きだ!付き合ってくれ!(白目)」

「うれしい!わたしもよ!(白目)」

あまりにも完璧なハマり具合。
完璧すぎて、本気なんだかふざけてるんだか
さっぱりわからない。
自分の才能が以下略


あ、いっけない!髪の毛洗わなくちゃ!
今日はここまで。さようなら!(白目)

皆さんの拍手が私のモチベーションです。
励ましのコメントも送れるよ!→

久しぶりにアクセス解析見てみたら、
なんとスマホでのアクセスが
半分を超えてるじゃないですか!

で、当サイトをスマホで見てみたら、
PCの画面そのままじゃないですか!
字ちっさ!

WordPressだと、勝手にスマホ対応とか
してくれたりするんだけど、
MovableTypeはそんなことないのね。

で、レスポンシブ化ってどうやるの?
プラグインとかでできるでしょ。

と思って調べたところ、有料だったのでやめて、
以下のサイトの情報を元に、
手作業でレスポンシブ化してみることにした。

1 headerタグ内にviewportを設定する

headerタグに、以下のようなmetaタグを仕込む。

<meta name="viewport" content=";width=device-width,initial-scale=1" />

上のサイトとは変更してある。
「user-scalable=no」とか「maximum-scale=1」とかやると、
ピンチアウトでズームできなくなる
から注意だ。

2 スタイルシート内で、スマホかどうか判別する

めんどくさいので、タブレットはPC扱い。

【その2】CSSファイル内で区別させる方法

一つのCSSファイルで済ます場合はこの方法になります。

@media screen and (min-width: 641px) {
/* ここにPC、タブレット用スタイルを記述 */
}
@media screen and (max-width: 640px) {
/* ここにスマホ用スタイルを記述 */

}

こんな感じで。

当サイトでは、そもそもPC用しかなかったので、
スマホ用に以下の記述を追記。

  • ヘッダーの画像がでかかったので、スマホでは非表示に
  • スマホではサイドバーを一番下に表示

だって、いろいろ変えるのめんどくさいんだもの。


まとめ

ポイントは2つ。

  1. headerタグ内に metaタグで viewport を設定する
  2. CSSファイル内で
    @media screen and (man-width: 640px) {}
    とかやって、スマホ対応のデザインを書き込む

あ、headerタグとスタイルシートは、
再構築を忘れずに!反映されないよ!

というふうにやってみて、
Google先生から見てどうですかね?ということを、
Mobile-Friendly Test
でURLを入れて調べてみよう。

当サイトはもちろんOKもらったぜ!

ということで、未来の私が忘れっぽくても、
これを読めば安心だ。よかったね!未来の私!

皆さんの拍手が私のモチベーションです。
励ましのコメントも送れるよ!→

iOSで撮ったスクリーンショットをMacで素早く使う方法を検討した

理由

アプリについての記事を書くときに、
iOS機器(iPadやiPod touch)で撮った
スクリーンショットの画像をいっぱい使いたい。
Movable TypeやWordPressなどのブログで使う。

現状:画像をiPhotoのライブラリに取り込みFinderに表示する

以下のような手順を踏んでいる。

  1. iOSでスクリーンショットを複数撮る
  2. MacとiOS機器を接続する
  3. iPhotoにiOS機器で撮ったスクリーンショットを取り込む
  4. 使用する写真を選択し「Finderに表示」する
  5. ファイルをコピーし、ファイル名を変更する
  6. ブログ記事編集画面で、1枚ずつ画像をアップロードする

この中でも特に、

  • iOS機器からMacへのファイル転送
  • 一枚ずつブログに画像をアップロードする

ところが手間。
なるべく簡単で、かつ素早い方法はないだろうか?

まず、ファイル転送の手間を減らしてみる。

方法1:フォトストリーム経由で取り出す

  1. iOS機器でスクリーンショットを複数撮る
  2. MacのiPhotoのフォトストリームから
    iOS機器で撮ったスクリーンショットを見つける
  3. 使用する写真を選択し、「Finderに表示」する
  4. ファイルをコピーし、ファイル名を変更する
  5. Movable TypeやWordPressの記事編集画面で画像を
    アップロードする×枚数分

フォトストリームを使うことで、
iOSとMacを接続しなくて済むため、
手順が一つ減る。

しかし、スクリーンショットが、いつも瞬時に
フォトストリームに現れるとは限らないので、
少し早さについては信頼性に欠ける

方法2:Gyazo+CloudClipを使う

iOS用

Gyazo Shuriken 2.1.2(無料)
カテゴリ: 仕事効率化, 写真/ビデオ
販売元: Nota Inc. - Nota Inc.(サイズ: 4.6 MB)

CloudClip 1.2.1(無料)
カテゴリ: ユーティリティ
販売元: Thinkbitz Software Studio - Thinkbitz Software Studio(サイズ: 4.1 MB)

 

Mac用

Gyazo: スクリーンショットの瞬間共有 1.0.2(無料)
カテゴリ: 仕事効率化, グラフィック&デザイン
販売元: Nota Inc. - Nota Inc.(サイズ: 1.1 MB)

 

  1. iOS機器でスクリーンショットを複数撮る
  2. iOS機器でGyazo Shurikenを立ち上げ、スクリーンショット画像を
    Gyazoにアップロードすると、
    同時に画像のURLがクリップボードにコピーされる
  3. iOSのCloudClipを立ち上げると、URLがCloudClipに送られる
  4. MacのCloudClipに、画像のURLが出てくるので、Openを選択して画像をブラウザで開く
  5. 画像を右クリックし、「画像のURLをコピー」する
  6. Movable TypeやWordPressの記事編集画面で以下のように整形する
    <img src="コピーしたURL" />

この場合、Gyazoのサーバに
画像がアップロードされているので、
Movable TypeやWordPressに画像をアップロードしなくて済む

デメリットは以下の通り。

  • Movable TypeやWordPressのシステムには画像が登録されない
  • Gyazoには画像が半永久的に保存されるそうだが、
    ファイルを手元に置いておきたい人は、
    Gyazoからダウンロードしておく必要がある
  • Gyazoにアップロードするにはネット接続が必要なので、
    接続環境がない場合は、あとでネットに繋がったときに
    Gyazoを立ち上げることになる。
  • CloudClilpにURLが送られてから、
    MacのCloudClipにURLが現れるまで、
    10〜20秒ほど間が空くこと。ちょっとヒマ。
  • GyazoとCloudClipの往復が、
    画像の枚数だけ発生する

結構弱点あるな。
スクリーンショットの枚数が多い場合は、
iPhoto経由の方が早いかも。

方法3:MacのQuickTime Playerを使う

なんと、MacのQuickTime Playerは、
Macに接続したiOS機器の画面を表示することができる

知らなかった!

ちなみにこれができるのは、
アイコンが新しくなったver10以降(たぶん)。

このQuickTime Playerのスクリーンショットを撮れば、
画像がMacに保存されるので、そもそも転送する必要がない!

  1. iOS機器をMacに接続する
  2. QuickTime Playerを立ち上げ、「ファイル」→「新規ムービーを撮る」
  3. 録画開始ボタンの横で、撮影元にiOS機器を指定する
  4. 好きなタイミングでQuickTime Playerの画面のスクリーンショットを撮る

これだ!明らかに早い!

また、「 カッシャ!」という音がしないところが、
隠れたメリット。

デメリットは、MacとiOSを接続していることが必要なので、
接続できない環境では作業できないこと。
そういう場合は、方法1 か 方法2 を使う。

ちなみに、この方法で撮ったスクリーンショットは、
ホンモノの画面と微妙に違う。
上下の写真の違い、わかるだろうか?
(角丸と影の有無は除く)

答え:「iPod」 の文字と 時刻

 

これで、ファイル転送は楽になった。次は、
「一枚ずつブログに画像をアップロードする」
のがめんどくさい。簡単にしよう。

方法4:メディアファイルインポートプラグインを使う

Movable TypeやWordPressで、
一個ずつファイルをアップロードするのは大変なので、
「FTPでファイルはアップロードして、あとでシステムに取り込む」
ということができるプラグインがある。(ことを最近知った)

MovableType用:
複数ファイルを一括でアップロードできるMovable Typeプラグイン:MultiFileUploader - Movable Type技術ブログ

最新版ダウンロードはこちらから
複数ファイルを一括でアップロードできるMovable Typeプラグイン:MultiFileUploader - Movable Type技術ブログ

WordPress用:
WordPress Flash Uploader

  1. FTPで画像をサーバにアップロードする
  2. Movable TypeやWordPressのメディアファイルインポートプラグインを使い、ファイルをシステムに登録する

    ↑は Movable Type の MultiUploader
  3. 記事に画像を挿入する際に、アップロードが不要

    ↑アップロードしなくても、既にアイテムに表示されている

メディアファイルインポートプラグインを使うと、
何回も「ファイルを選択」してアップロードしなくて済むので、
ちょっと楽になる。


まとめ

  • iOSで撮ったスクリーンショットをMacで素早く使うコツを調べて、会得した
  • 個人的には、QuickTime Player が、Macに iOS の画面を表示できるのが驚きだった
  • 今回の記事も、この方法を活用してキャプチャを使ってみた
  • いいことを知って、満足した

かといって、今後キャプチャを活用した記事が増えるかというと、
それは謎である。

おしまい。

皆さんの拍手が私のモチベーションです。
励ましのコメントも送れるよ!→

ガッツゴリラ

この最も大事な位置にガッツポーズをするゴリラが表示されていることに何の意味があるのだろうか?答え:何もありません。こんなところまでお読みいただきありがとうございました。

Macオンラインウエア情報検索

Loading
Macオンラインウエア情報検索についてはこちらを参照ください。 →「Macオンラインウエア情報検索」をアップデートしました2012

このアーカイブについて

このページには、2015年2月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2015年1月です。

次のアーカイブは2015年3月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

広告

アーカイブ