Takunojiのプログラミング・プレイグラウンド(遊び場)

Javaプログラミングを基本にして、ゲーム作成に必要なことの調査結果、やったら面白そうなことなどを記載します。プログラミングのススメ的なことも記載します。プログラミングで楽しく遊ぶために色々と記載して行きます。

トップ > Google Map

ウェブサイト 戦略 〜Google Mapでアクセスを稼ぐには？〜

Google Map

現在、Google Mapを使ったサイトを作っている最中です。主な目的は、以下の通り。

  1. 地元情報を発信できる
  2. サイトに登録しているユーザーは、自分の店舗情報を地図上に公開、更新できる
  3. 趣味のコミニティへの入り口を見つけることができる 　※音楽プレイヤーが集まる(ライブ会場など)
  4. 地域で活躍する事業者を応援する

大問題が１つ

地域情報を発信するにも、地域の事業者を応援するにも「アクセス数」がないと、意味がない。。。

結局、ブログ運営と同様に「アクセスを稼ぐには？」を考えることになってきた。。。 マーケティング的なことをやると「開発」をやっている時間がなくなってくるので、基本的にはやりたくないのが本音です。 しかし、現状他に方法がない。。。

じゃーどーするか？

とりあえずは、現状でできることを続けていく中で良い方法を探してみようと思います。 調査して見たところ、自分の作業としてやらなくてはならないことに「動画の撮影」と言うのがあります。

そこで、「Google Map ローカルガイド」と言うのが目につきました。これは、これで面白そうなので、参加してみました。

f:id:Takunoji:20190903121608p:plain
Google Map ローカルガイド

とりあえずは、１件投稿して見たのですが、反映に２４時間かかるらしいので(審査などによる)結果を待つ方向で。。。

動画の撮影など

自分がたまたま購入したTHETAがGoogleMapのストリートビューに使用できると言うので今後いろいろ試したいと思っているのですが、現状は手で撮影しているので。。。 「次元の割れ目」が見えてしまい、格好悪いかな？と思い始めたところです。

ちょっと三脚でも購入して、綺麗な動画を撮影できるようにしてみようかと思います。

ウェブ上での存在感

Googleのヘルプを見ていて気がついたのですが「ウェブ上での存在感」と言うのはちょっと魅力的な言葉だと思いました。 逆に言えば、この存在感があれば「アクセスが稼げそう」と言うふうに思った次第です。これなら「正攻法」でウェブ上にアピールできるし、後ろめたさもない。。。

結局

答えは出ませんでしたが、色々と試してみることが大切なのだと思いました。

でわでわ。。。

関連ページ一覧

Google VR View 〜360°の写真とビデオをHTMLに埋め込む〜

JS Google Maps API 〜オリジナル・データマップを作ろう〜

JS GoogleMap 〜既存ソースの修正〜

JS GoogleMap 〜セレクトボックスの中身をDBから持ってくる〜

Google Maps API 〜地図にオーバーレイを追加する〜

Google Maps API PHP連携 〜マップ情報をDBに登録する〜

PHP Google Map 〜ライブハウス照会サイトを作りたい〜

Google Map

イントロダクション

タイトルの様なウェブページを作成しようとしております。現状ではサンプルとして作成中です。
今回は、地域情報(ライブハウス)を多少登録、表示した後にどーやるか？を考える事にしたいと思います。

ユーザーを喜ばす

せっかく作ったアプリなので「多くの人に使ってもらいたい！」と思うのは自然な話だと思いますが「役に立つ」=「喜ばす」のはとても難しい様で簡単な様で複雑な感じです。

どの様に喜ばすか？

このアプリケーションは位置情報と対象のホームページをリンクさせて表示するシンプルなものです。「普通にグーグル マップじゃん？」と言われると「左様でございます。」となります(笑)
このままでは、通常のグーグルマップなのですが、そこに付加価値をつけるのが我々エンジニアの役目ではなかろうか？と思うこの頃です(笑)
しかし、最近のGoogleは人工知能(TensorFlow)などの技術が実用化されたのもあり、検索jか色々な面で太刀打ちができないのも現状です。。。。
そこで考えました。マップは対象の位置を表示しただけでは「不親切」なアプリとなります。 理由は、人が道順を説明するときは「〜の近く」とか 「〜の向かい」などのように説明することが多いからです。つまり地図上に目印となるような物件(オーバーレイ)を表示してやる方が良いと思うのです。

f:id:Takunoji:20190711225427p:plain
オーバーレイ

ちょっと話がややこしい

「親切なアプリケーションを作りましょう！」という話はわかったけどそれだけで「お客様」はお金を払ってくれないであろうと思うのは至極当然なことだと思います。 ここからが本題です

付加価値をつける

自分が今までに読んだ、もしくはニュースなどのメディアで聞いた中で「よく聞く話だな」と思うのは「付加価値をつける」という言葉です。近代化した今の時代に「最低限必要なもの」というのはすでに揃っている状態です。つまり手に入れるのが難しくない、もしくはすでに提供するサービスが整っている状態です。
そこで「付加価値」という意言葉が出てきます。「既存のものに何かをプラスαして価値を出す」というテクニックです。これならばほぼ無限にありそうです。

Google Maps +α

前述の通り、このαを考えるのが我々エンジニアの仕事ではなかろうかと思うこの頃、そしてこのプラスαを実現するために以下のようなフローを考えました。
1. Google Mapにライブハウスを表示する
2. 各ライブハウスまでの道程にある物件を表示
3. ライブ告知と同様に近隣の広告情報も表示する

これで、自分の作成したサイトのアクセス数が多いのであればライブハウス近郊の企業体も「広告料」を払ってくれるであろうと思うわけです。

問題

しかし、この作成した自分のサイトにそれだけのアクセスが稼げるだろうか？何もしない状態で(SEOのみ)では売れるほどのアクセスは見込めないでしょう。
ならばどーするのか？これも「どのように喜ばすか？」の時と同じように考えます。
1. 登場人物(法人などの抽象的なものも含む)を洗い出す。
2. ここに登場する人物たちが喜ぶ、想定通りに動いてくれるであろうと期待のできるアイディアを考える
3. 「2」出立てた仮説を実証できるように「アプリケーション」=「仕組み」を考える。

まとめ

こんな感じで、計画〜実行までを繰り返して目標達成まで進んでいく手順を導き出す方法を考えました。
それを「目標ブレーク」と名付けました。
こちらもよければどうぞ参考にしてください。
お互い頑張りましょう。
でわでわ。。。

PHP Ajax 〜プログラム設計〜

Google Map 目標達成APガイド

イントロダクション

今、Google Mapを使ったブラウザアプリを作っています。これの設計を見直すので、確認がてらに記載します。

やりたい事

まちをブラブラしてる時に発見したライブハウスやイベントスペースなどを地図に登録して音楽マップを作るための、ツールを作る

概要設計

  1. 初期表示時(リクエスト受信時)にDB(MySql)より地域情報を取得
  2. 取得した地域情報をHTML(hidden)で出力
  3. 出力したHTML(地域情報div)をonload時に読み込み地図上にオーバーレイを描画する
  4. データ入力ボタンを押すと入力フォームが開く
  5. データ登録ボタン押した時に対象のデータをDB に登録する
  6. 登録したデータを地図に描画する

詳細設計

  1. DB接続情報よりDB接続、地域情報テーブルよりすべてのデータを取得
  2. 取得したデータでdivタグを作成してオーバーレイの情報として出力
  3. 以下の様なかたちでHTML出力する
    div:data-name=地域情報名
    div:data-url=対象のホームページURL
    div:data-img=同様に画像
    div:data-lat=位置情報Lat
    div:data-lng=位置情報Lng

使用する言語

クライアントサイドJavaScript
サーバーサイドPHP

実装に向けて

実装環境としては、PHPとMySqlが使えるワードプレスをインストールできるサーバーを使用(レンタルサーバー)です。
これにHTMLとJavaScriptでクライアントサイドを作りPHPでサーバーサイドを作る。

実装時に気をつける事

PHPでは、HTMLを(なるべく)出力しない、クライアントとサーバーを分断し、それぞれに依存関係を作らない様に作成する。→クライアントサイドを修正したら、サーバーサイドを修正しなくてはならない様な実装をしない。

具体的に

PHPでは画面(HTMLの表示コンポーネント)を出力しない。非表示のdivタグのみを出力する
クライアントサイドは、全てPHPが出力したHTML をJSで読み込みオーバーレイを描画する。

まとめ

今回のマップは、ライブハウス照会サイトの機能です。この機能が土台となり画面上に表示したオーバーレイの吹き出しから各店舗の情報を表示します。
今回のパージョンでは、対象の入り口などの目印になる様な画像とホームページのURLを表示します。
実装後運用して多少のデータを追加した後、登録するべきデータはひとりで登録し切れないので、自分のレンタルサーバにユーザー登録している人が地図情報を追加できる様にしていこうと考えてます。
登録ユーザーはワードプレスを使用してプログ記事を書くことが可能で、記載した内容(文字数制限あり)がオーバーレイの吹き出しに表示されます。

現状のプログラム設計でした。
でわでわ。。。

PHP PDO 〜Ajax + PHPでDBに入力したデータを登録する〜

Google Map

ブラウザアプリを作る

今回はGoogle Mapで指定したポジションにマーカーを追加するブラウザアプリを作成しています。

<大雑把な仕様＞

  • マップで表示しているところをタップするとピン(Overlay)が降ってくる
  • 登録していない「選択」した状態は下のようなイメージ
    f:id:Takunoji:20190711225427p:plain
  • ＜データ入力＞ボタンを押下すると入力フォームが開く
  • ＜データ送信＞ボタンを押すとAjaxでサーバー側のPHPにアクセスしてDBへ入力データを登録する

作成したものは以下にあります。

Simple Map

f:id:Takunoji:20190711230525p:plain              f:id:Takunoji:20190711230528p:plain

とりあえずはこんな感じで作成中です。

色々とつまづきながらやってます。

でわでわ。。。

 

関連ページ

 

  1. JS GoogleMaps API 〜オリジナル・データマップを作ろう〜
  2. Github page 〜Github pageでリポジトリの情報を公開しよう〜
  3. 夢を形にする① 目標ブレーク〜じゃんけんゲームの場合〜
  4. プログラム 習得 順序1 概要
  5. PHP PDO 〜MySQLにアクセスする〜
  6. エラー：invalid data source name
  7. Github page 〜Github pageでリポジトリの情報を公開しよう〜
  8. Github 使い方〜リポジトリにライセンスを設定する〜
  9. Github 使い方〜Issueでやることを整理〜
 

Google クロールエラーが出る 〜WordPressを使っているときの対処法〜

Google Map

イントロダクション

Google Consoleで自作のPHPを登録したらエラーが出ました。 f:id:Takunoji:20190706174018p:plain こんな感じです。

これに対処すべく調査したところ以下のサイトを見つけました。

unskilled.site

これを参考に修正します。

自分の場合を考える

＜参考サイトの場合＞ WordPressを使用して表示する→WordPressのディレクトリ以下にあるページの問題でした。

＜自分の場合＞ WordPress用のディレクトリを切っているので、ルートにあるファイルはWPの影響下にありません。強いて言えば関係ない状態です。 しかし、WordPressの機能を使用したいのでWordPressの関数などをロードしているのでGoogleクロールエラーが出ました。(多分。。。)

対処

WordPress外のphpで使用したい機能は「ユーザー情報の取得」なのでユーザー情報を取得するための部品(PHP)をロードする方法に切り替え、エラー解消に臨むことにします。 本当は、wp-load.phpなど全部まとめて読み込むようにすると実装は楽なのですが、以下の問題があります。 1. 画面表示などでLogin画面が出てくる 2. 不要なもの(機能)がたくさん読み込まれる 3. 結果、余計なリソースを使用することになり、処理が遅くなったり思わぬ不具合が発生するかも？→その危険性が増えます

安全面とパフォーマンスを考慮に入れて必要なファイルを読み込むように処理を変更しようと思います。 現状では以下のようなコードでWordPress関数をロードしています。

require( dirname( __FILE__ ) . '/ワードプレス用ディレクトリ/wp-blog-header.php' );

WordPressをロード

以下のように修正しました。

require( dirname( __FILE__ ) . '/ワードプレス用ディレクトリ/wp-includes/pluggable.php' );

そして、改めてGoogle Search Consoleでテストしてみたところ以下のように表示されました。「インデックス登録をリクエスト済み」にチェックが入っています。 f:id:Takunoji:20190706180411p:plain

多分解消できたと思いますが、結果は待つしかなさそうです(笑)

でわでわ。。。

Google Maps API〜オリジナルのグーグルマップを作る〜

Google Map

イントロダクション

前回に引き続きグーグルマップに関して記載します。表示する地図は札幌を中心にライブハウスの照会をやります。

事の経緯

以前前から、地方の情報を発信したいと思っていたのですが、良い仕組みが思い付かず…保留にしてました。 しかし…最近思いつき…「ぢゃ！やるか！」となった次第です。

ライブハウス照会サイト

札幌にあるライブハウスの照会を地図でやります。 サンプルマップを作成して、これをベースにして使えるモノを作ろうとしています。 細かい仕様などはこちらに記載しています。

目標ブレーク

これも、目標ブレークの結果を元に実行しています。

クライアント作成

実際に登録対象の場所に行って写真などを撮って地図データを登録して行きますので、情報を登録するための入力画面を作成します。それがサンプル画面なのですが、ちょっと問題が起きました。 入力フォームを表示した後にフォームが閉じない現象が起きました。 現在調査中です。

そんなわけで、最終目標がここからは見えないのですが、まずは目の前のものを作りましょう…という事で(笑)

でわでわ…

Google Maps API 〜オリジナルマップを作る〜

Google Map

イントロダクション

ライブハウス照会サイトを作る事にしました。 札幌を拠点にして活動しているので札幌を中心にマップを作成します。

GoogleMapを使う

ひと昔前は、申請の類なしで使えたのですが、今は違うようです。 GoogleMapsAPIの申請が必要で、ちょっと手間でした。 しかし、そんな小さな事よりも、やりたい事をやる方が大切なので、やりました。

準備完了後

作成するアプリの設計を行います。 前回設計をやらないで失敗したので今回はちゃんとやります。

設計を行う

まずはやりたい事を整理します。

やりたい事

  1. 札幌にあるライブハウス(音楽できる場所)を地図に表示する。
  2. 対象の連絡先や、そこがどんな感じかわかる様にする
  3. ログインユーザのみマップに情報を追加できる

実装イメージ

  1. HTMLからJSでGoogleMapを生成(HTML内に実装)
  2. 主要部分は、JSファイルに実装
  3. 初期表示時に登録したライブハウス情報を取得、表示する吹き出しをhiddenタグ内に作成
  4. hiddenタグ情報をMapにオーバーレイに登録
  5. 画面下部にある、ボタンからログインができる
  6. ログイン後にタップでオーバーレイを追加、編集できる。
  7. 編集できるのは、自分で追加したオーバーレイのみ

実装計画

単純に作成したサンプルをベースにして上の実装イメージの通り作成 結果的に、実装イメージ=実装計画=仕様になりました(笑)

まとめ

今回の実装は、データの作成が必須ですのでデータを登録する為の機能が無いとデータ登録出来ない…という問題がありました。それを解決するために実装イメージの6があります。

実際には、自分の使用しているレンタルサーバーで使っているワードプレスとの連携を行います。 具体的には、ワードプレスのログインユーザにタップでの情報追加、編集の権限を付与する想定です。 ログインユーザは記事を書いてそれをマップから閲覧者がみる事が可能な様にします。ちょっと工夫が入りそうです。