Category Archives: iPhone

PCからスマホへ一瞬でファイルを転送!アプリ「PushBullet」

この記事を読むのに必要な時間:01分10秒

例えば、スマホサイト製作時に、ちょっと実機で確認したい… こんなときはいつもパソコン側で作ったQRコードをスマホで読み取って確認していたのですが、これって結構な手間なんですよね。

また、スマホで撮った写真をパソコンに送りたいときはわざわざメールに添付して送ったり… と、こちらもやはり手間がかかっていました。

今日は、そんな手間を見事に解決してくれたアプリ&拡張機能「Pushbullet」をご紹介します。

Pushbulletとは?
Pushbulletは、パソコンやスマホで得た情報やファイルなどを手軽に双方に送ることができるアプリです。

テキスト、URL、ファイル、リスト、住所を一瞬で送れるので本当に便利。

Pushbulletのインストール方法 PC編
Pushbulletは、パソコンとスマホの両者にインストールして使用します。まずは、パソコンから(今回はGoogle Chromeで説明しますが、Firefox版もあります。)
Pushbulletのインストールはこちらから

「+ 無料」ボタンをクリック。(+無料だったり、+FREEだったりします。)

Pushbulletのインストール方法 PC版 その1

「Pushbullet」を追加しますか? → 「追加」をクリック

Pushbulletのインストール方法 PC版 その2
ブラウザの右上にこの画像が表示されたら成功です。

Pushbulletのインストール方法 PC版 その3
Pushbulletのインストール方法 iPhone編
次は、スマホです。(今回はiPhoneで説明しますが、Android版もあります。)
Pushbulletのインストール方法 iPhone版 その1
「Sign up now」からGoogleアカウントでログインします。

Pushbulletのインストール方法 iPhone版 その2
ログインを承諾したら完了です。

Pushbulletのインストール方法 iPhone版 その3
Pushbulletの使い方 PC編
例えば、閲覧中のサイトをスマホに送りたいときは、そのサイトを閲覧している状態でブラウザ右上の「Pushbullet」のアイコンをクリックします。すると…

Pushbulletの使い方 PC版 その1

このように希望のデバイスにページのタイトル、URL、そしてメッセージをつけて送信できます。「Push it!」をクリックで送信。

画像などのファイルを送りたいときは、「クリップマーク」、「Go to Pushbullet.com to push files→」をクリックするとPushbulletのサイトに移動するので、指定の場所にファイルをドラッグ&ドロップして、「Push it!」で送信完了です。

Pushbulletの使い方 PC版 その2

Pushbulletの使い方 PC版 その3

ファイルの容量は25MBまで。

Pushbulletの使い方 スマホ編
アプリを立ち上げたら、左下の「弾丸アイコン」 → 右上の「ノートアイコン」をタップ

Pushbulletの使い方 iPhone版 その1
送信物の種類を下から選択。左からテキスト、URL、ファイル、リストの順で並んでいます。

上部の「Please select」をタップ。

Pushbulletの使い方 iPhone版 その2
送信先のデバイスを選択します。

Pushbulletの使い方 iPhone版 その3
送信したい情報を入力して「Push it!」で送信完了です。

Pushbulletの使い方 iPhone版 その4
ちなみに送信済み一覧から削除したいものを左にスライド → 「Delete」で削除できます。

Pushbulletの使い方 iPhone版 その5
個人的には、冒頭に書いた通り、スマホサイトを実機で確認する作業やiPhoneで撮った写真をパソコンに送るのに重宝してますが、それ以外にもYouTube動画や住所を相互でやりとりするなど使い道がたくさんある便利なアプリですよ。


今日のBGM
AA=(エー・エー・イコール) の The Klock



AA=は、日本のミクスチャー、デジタルロックの先駆的バンド、THE MAD CAPSULE MARKETSのベーシスト・上田剛士さんのソロプロジェクト。

サポートメンバーがまたすごくて、ボーカルがBACK DROP BOMBの白川さん、ドラムはRIZEの金子ノブアキさんと激熱です。

この曲は、剛士節全開の曲で、デジタルハードコアからメロディアスな曲調へと変わる流れがたまりません。

ちなみに沢尻エリカ嬢の話題作「ヘルター・スケルター」のエンディングテーマとしても使われています。前情報なく突然エンドロールで流れたときは意外過ぎてビビリました。

好き過ぎるバンドTHE MAD CAPSULE MARKETSは2006年4月活動休止を発表…。音楽性の違いとかで各人がソロで活躍しているのですが、各々の音楽を聴くと、「どれもカッコ良いんだからいいとこ取りしてマッドでやればいいじゃん!ヽ(`Д´)ノキィィィ!」と思ったりします。(バンドマンとは思えない発言)

一応、THE MAD CAPSULE MARKETSのからも1曲…

今日のBGM2
THE MAD CAPSULE MARKETS の Good Girl




今日は以上です。
いつもありがとうございます!


Posted in Google Chrome, iPhone, Webサイト制作, アドオン, 便利ツール | Tagged , , , | Leave a comment

iPhoneやiPadでサイトをホーム画面に追加したときに出すアイコンの作成方法

この記事を読むのに必要な時間:01分38秒

iPhone、iPad、iPod touchのウェブブラウザ「Safari」には、Webクリップと言って、閲覧中のサイトのショートカットのためのアイコンをホーム画面に追加することができます。

iPhoneなどのSafariで表示されるアイコンとはこれ。

iPhone、iPad、iPod touchのSafariで表示されるアイコン
ホームにアイコンを追加する方法
iPhoneでは簡単にホームにアイコンを追加できます。
僕も頻繁に閲覧するサイトでよくやります。

まず、下のメニューの真ん中の「四角から矢印が飛び出ているマーク」をタップします。

「四角から矢印が飛び出ているマーク」をタップ
すると、メール送信、TwitterやFacebookで投稿などができる画面になります。ここの「ホーム画面に追加」を選択します。

ホーム画面に追加
任意でタイトルをつけることができます。(デフォルトでは、そのページのタイトルタグが表示されます。)
タイトルを決めたら「追加」をタップ。

Webくリップは、任意でタイトルをつけることができる。
簡単にアイコンが追加されました。

ホームにアイコンが追加された。
アイコンの作成方法
しかし、このアイコンは何も設定していないと、閲覧中のサイトのスクリーンショットが表示されてしまいます。
そこで、本題のアイコン作成方法です。

デフォルトではアイコンは、閲覧中のサイトのスクリーンショットが表示される。
アイコンのサイズ
アイコンのサイズは、正方形なら勝手にリサイズされます。
サイズの大きいiPadのことも考慮して、150✕150ピクセルくらいで作成しておけばいいかなと思います。

アイコンの保存形式
保存形式は、png、gif、jpg、bmpのいずれも使用可能です。

ちなみにこのWebクリップのアイコン画像は、角丸&つや出し加工が施されています。
僕は、今までこれが面倒そうで手を出さなかったのですが、なんとこれ勝手に処理してくれるんです。ラッキー。

角丸&つや出し加工は勝手に処理してくれる。
Webサイト側の設定
<head>内に、以下の記述を追加するだけです。
<link rel="apple-touch-icon" href="http://www.example.com/アイコン.png"/>
※URL(http://www.example.com/image/アイコン.png)は適切なものに変更してください。

ちなみに、つや出し加工を施したくない場合は、こちらでOK。
つや出しはありなし選べますが、角丸はとれません。
<link rel="apple-touch-icon-precomposed" href="http://www.example.com/アイコン.png"/>
※URL(http://www.example.com/image/アイコン.png)は適切なものに変更してください。

WordPress(ワードプレス)の設定方法
自分のブログでしか試していないので、他にも方法はあるかもしれませんが、ここでは僕の方法を載せておきます。

アイコンは、「メディア」→「新規追加」でアップロードします。

WordPress(ワードプレス)で画像をアップロードする方法 その1
「ファイルのURL」これが画像を表示させるために必要なURLになります。

WordPress(ワードプレス)で画像をアップロードする方法 その2
そして、WordPress(ワードプレス)の管理画面から「外観」→「テーマ編集」→「ヘッダー(header.php)」

WordPress(ワードプレス)でheader.phpに記述を追加する方法 その1
WordPress(ワードプレス)でheader.phpに記述を追加する方法 その2
WordPress(ワードプレス)でheader.phpに記述を追加する方法 その3
ここの<head>内に、以下の記述を追加しました。
<link rel="apple-touch-icon" href="http://www.example.com/image/アイコン.png" />
※URL(http://www.example.com/image/アイコン.png)を先ほどの「ファイルのURL」に変更してください。


SafariでWebクリップされる可能性って結構あると思います。
簡単に設定できるので、お客さまに「おっ」と思ってもらえるだけでもやる価値はあると思います。

今日は以上です。
ありがとうございました!


Posted in iPhone, Webサイト制作 | Tagged , | Leave a comment

iPhoneでページ内検索をする方法

この記事を読むのに必要な時間:00分43秒

GW!連休だ!連休!!
というわけで、今日は、軽くiPhoneネタでも書こうと思います。

パソコンで、ページ内の文言を探す際に、よくページ内検索機能を使うのですが、このページ内検索をiPhoneでも使えたら作業効率が上がるになぁ… と思っていたら方法がありました。


パソコンの場合は、「Ctrl+F」で検索窓が表示されます。

条件
しかし、どのブラウザでも利用できるわけではなく、少しだけ条件があります。

1. ブラウザはSafariに限定
2. iOSのバージョンが4.2.1以降
※iosのバージョンは、「設定」→「一般」→「情報」の項目内で確認できます。)

と言ってもこれだけ。

方法
方法はとても簡単です。

まずは、Webサイトが表示されている状態で、検索窓に検索したいキーワードを入力します。




キーワードを入力すると、予測検索機能が働きますが、気にせず、一番下までスクロールします。



ページの一番下に

このページ(◯件一致)
“◯◯”を検索

という項目があるのでこれをタップします。
すると、ページ内でキーワードと一致した部分が、ハイライト表示されます。また、他にも候補があれば、次から次へと検索できます。



まあ、これは裏ワザでもなんでもなく、機能として普通にあるものですが… こんなのわかんないっすよね?(笑)

でも、とても便利なので是非お試しを!

今回も最後までありがとうございます!
よいGWを!


Posted in iPhone | Leave a comment