アーカイブ

‘ウェブサイト構築’ カテゴリーのアーカイブ
スポンサーリンク
スポンサーリンク

iPhoneの写真を地図付きでネットに公開する方法

2011 年 4 月 3 日 コメントはありません

桜が咲き始めました。そこで今回はこんな感じの写真を貼りつけたネット時代の地図を作ってみます(クリックして下さい)。

iPhoneを使い、Googleマップに自分の通ったルートと各場所で撮影した写真を地図上に表示します。
iPhoneと無料のネットサービスだけでこの様な楽しい旅行マップ付き写真集が出来ちゃいますよ!

<必要なもの>
・iPhone(一般のデジカメでも構いませんがその場合は別途GPSロガー等が必要です)
・iPhoneのGPSロガーアプリ(上記と同じ)
・Googleアカウント(Picasaウェブアルバムを使えるようにして下さい)

<手順1>
iPhoneのGPSロガーアプリを入れてログを取るようにします。
私は「TrackRec」を使っていますが、他のKML形式のログが取れるアプリなら何でも構いません(他のファイルでもKMLに変換すればよいでしょう)。
TrackRecは無料で、高機能ではありませんが、シンプルでログを取るには適しています。GPSログはiPhoneからメールで送信出来ます(自分のPC宛てにメールする)。

写真を撮影する間、この種のアプリでずっとログを取り続けるようにして下さい。
ネットにアップしますので、最終的にルートを記録したKMLファイルをパソコンに取り込みます。

<手順2>
iPhoneで写真撮影します。
私はiPhone4を使っていますが、事前に設定として、写真に位置情報(ジオタグ)が埋め込まれるようにします。

「設定」→「一般」→「位置情報サービス」<オン>→「カメラ」<オン>
当たり前ですが、1のGPSロガーアプリも<オン>にして下さいね。
そして、撮影した写真をパソコンに取り込みます。

<手順3>
Picasaウェブアルバムにアクセスし、Googleアカウントでログインします。
「設定」→「写真設定」→「プライバシーと権限」→「場所:すべての新しいアルバムで他のユーザーに写真の場所を表示します。」にチェックを入れます。

続けて、Picasaウェブアルバムに2の写真をアップロードします。アルバム名などは何でも構いませんが、新規で作成して下さい。その際、「ウェブ上で一般公開」を選択して下さい。アップロードが終わったらOKで確定します。
次に、そのアルバムを開いた状態で、右下にある「Google Earthで表示」を右クリックし、メニューの「名前を付けてリンク先を保存」をクリックします。その際、名前は何でもいいですが、ファイル名の最後に「.kml」と付けます。

<手順4>
今度はGoogleマップを開きます。Picasaですでにログインされていると思います。
「マイマップ」→「新しい地図を作成」で新しい地図を作ります。
「タイトル」と「説明」を入れ、公開するので「一般公開」にチェックを入れます。

次に、「インポート」から3で作ったKMLファイルを読み込みます。この作業でPicasa上の写真がGoogleマップに埋め込まれます。
地図上に3で取り込んだ写真が表示されましたか?

<手順5>
再度「インポート」から今度は1のKMLファイルを読み込みます。
この際に「アップロードしたファイルでこの地図の全データを置き換える」となっていますが、この部分にチェックはしないで下さい。

地図上に写真が残り、さらに通ってきたルートが表示されたら完成です。「完了」をクリックして下さい。

<手順6>
地図の右上にある「リンク」をクリックするとこの地図のURLが表示されます。

このURLでこの写真とルート付き地図をネット上に共有出来ます。

<まとめ>
GPSジオタグを埋め込んだ写真をPicasaで公開する。
それをGoogleマップに埋め込む。
さらに自分の通ったルートを埋め込み、一つの画面に表示する。

これで楽しい地図付き写真集の出来上がりです!
ブログで旅行記なんかを作っている方にお勧めです!

<追記>
この方法の弱点を発見しました。
Googleマップのマイマップ機能では、1画面表示では200までのマーカーしか埋め込めないようです。
どういうことかと言いますと、写真点数が増えたり、ルートが長くなり、そのポイントが200を超えると、自動的に画面が分割されてしまいます。これでは見た目と使い勝手がかなり悪くなります。
これはGoogleマップの仕様(サーバーの負担を軽減させる?)のため、どうしようもありません・・
回避方法としては、マーカー数を間引きする(「」というソフトがあります)ということが考えられますが、どうしても・・という方は、上記手順1と3の各KMLファイルをテキストエディタ(メモ帳など)で開き、各<Placemark>から</Placemark>の部分を結合して一つのKMLファイルにします。
そしてそのKMLファイルをネット上にアップ(どこのサーバーでもいいです)し、そのURLをGoogleマップの検索から読み込ませて下さい。
そうすることで、1画面に全てのマーカー(写真やルート)を埋め込むことが出来ます。
しかし、ちょっと面倒ですねえ・・

独自ドメインをムームードメインで取得し、ウェブサイトはロリポップ、メールだけはGoogle Appsで管理する方法

2010 年 10 月 7 日 コメント 3 件

独自ドメインをムームードメインで取得し、ウェブサイトはロリポップ、メールだけはGoogle Appsで管理する方法です。
この方法で独自ドメインを運用すると、ウェブサイトは高機能なレンタルサーバ、メールは高機能なGmailと同様の運用が可能になります。

独自ドメインでウェブサイトは開いたが、メールだけはGmailで独自ドメインのメールアドレスを使いたい・・という方にお勧めです。
・・て言うかそれは私なのですが、これはつまり備忘録ですね。

<手順1>
まずドメインをムームードメインで取得します。
現在.comドメインは950円/年です。
取得は案内通りにすれば難しくありません。クレジットカードで決済可能です。
注意点として、ネームサーバの指定で「ムームーDNS」を指定して下さい。
→手続きの最後にロリポップの申し込みを行いますと、以下の手順2から4までを省略出来ます。

<手順2>
次にロリポップでサーバをレンタルします。
これまた難しくありません。10日間は無料お試し期間ですので、試すのもありです。

<手順3>
ロリポップの設定で取得した独自ドメインを設定します。

<手順4>
同じくロリポップの設定で「ムームーDNS」を設定します。

<手順5>
いよいよGoogle Appsに申し込みます。
無料の「Standard Edition」で構いません(現在は「Google Apps」が無料版です)。

<手順6>
Google Appsでドメイン所有の認証をします。
指定された文字列の.htmlファイルを作り、サーバにアップロードし、認証します。
ロリポップはウェブ上からアップロード可能です。
「独自ドメイン/ファイル名」のアドレスでアクセス出来るか事前に確認して認証しましょう。

<手順7>
ムームードメインにてDNSをカスタムセットアップし、GoogleのDNSを設定します(最後に.は不要です)。

<手順8>
Google Appsのメールで認証です。これは若干時間がかかります。

これで完成です。これで独自ドメインを使ったメールをGmailと同じシステムでやり取り出来ます。
あとはGoogle Appsを好きなように設定するだけです。
ウェブサイトの方は、ロリポップの方での設定になります。

色んなサイトを行き来して面倒で時間も少々かかりますが、実は難しくありません。
よりハッピーな独自ドメイン運用をどうぞ。

追記:さらにマルチドメインで・・
ロリポップが、マルチドメインに対応するようになりました!
マルチドメインとは、1つのサーバで複数のドメインを運用すること。
これでレンタルサーバ代金を節約して、複数の独自ドメインがGoogle Appsで使えるようになります。
新しいドメインを取得しても、今すでに使っているロリポップのサーバを使えますので、サーバ代が実質不要になるわけです(容量などは共有になります)。

以下がマルチドメインにおける設定手順です。
(1)まず、普段使っているムームードメインのIDを使って、追加したい独自ドメインを取得します。
(2)そして、その新たに取得したドメインには、「ムームーDNS」を使うように設定します。
(3)次に、同じく普段使っているロリポップの独自ドメイン設定画面で、追加する独自ドメインの設定を行います。新しく取得した独自ドメインを追加し、そのドメインで使うフォルダを指定すると、「ネームサーバー認証」が出ます。ムームードメインのIDとパスワードで認証して下さい。
(4)後は、Google Appsの設定になりますので、上記<手順5>以降を参考に、通常と同じように設定すればよいです。

複数のドメインをマルチドメインで運営する場合でも、Google Appsは使えます。
さらにドメイン活用が手軽にできますね!

追記2(2012.12.08):
Googleより以下のメールが来ました。

無料版をすでに使っている人には影響はないということですが、残念ながら、無料のGoogle Appsはなくなってしまうようです。

Flashでカウントダウン~XXまであと・・

2010 年 6 月 3 日 コメント 1 件

このカウントダウンのFlashについて簡単に説明します。
まず写真をIllustratorで取り込み、ライブトレースして、それをFlashの背景として使いました。ベクター画像ですから拡大してもぼやけません。←簡素化しました。
カウントダウンは、FlashのActionScriptで現在時間を取得し、ターゲットまでの時間との差を表示しています。
色んなサイトを参考にしてコピペしながら書きました。

以下がそのActionScriptです。1フレーム目の一番下のレイヤーに入れるといいでしょう。

あとは、表示フィールドにダイナミックテキストを配置し、それぞれのインスタンス名を「time_days」「time_hrs」「time_mins」「time_secs」「time_msecs」とします。前に「XXまであと・・」、それぞれの後ろに「日」「時間」「分」「秒」と文字を入れます。
これで表示されるかと。
そして、2フレーム目にカウントダウンが終わった後の画面を作ります。例えば、「5周年です。ありがとうございます!」みたいな。

分からない方のために、参考.flaファイルを置いておきます。

以上ご参考にされて下さい。

カテゴリー: ウェブサイト構築 タグ: ,
スポンサーリンク