楽しく続けるUnity Gym

「楽しく続ける」を目標に!Unityを勉強している人の支えになるブログを目指しています!(^^)!

【WordPress】Google map の使用 プラグインMaps Builder編

【やりたいこと】Google mapを使用したい

今回の記事は、過去記事の「Google map APIを取得する方法」の続きとなっております。

Google map APIを取得する方法リンク]

今回は、Google map を使用できるようになるプラグイン「Maps Builder」の紹介です(^^)/

【10分でできる!】

※ダウンロード時間は10分の中に含まれていません。

1.使用したもの

ロリポップレンタルサーバー スタンダードプラン

lolipop.jp

WordPress 4.9.8

WordPressロリポップユーザー専用ページからインストールしました。

・テーマ Hueman

ja.wordpress.org

・Maps Builder

ja.wordpress.org

2.手順

①Maps Builderのインストールと有効化

f:id:hk-ryukyu:20181202182341p:plain

プラグインの新規追加をクリックします。

Maps Builderを検索し、Maps Builderをインストールします。

インストール後、有効化にします。

②Maps Builderの設定

f:id:hk-ryukyu:20181202182530p:plain

Google MapsのSettingをクリックします。

Google Maps API Keyを記入します。

Google Maps API Keyの取得はこちらの記事で説明しております。

Google Maps API Keyの取得リンク先]

f:id:hk-ryukyu:20181202182539p:plain

Default Location を設定します。

Latitudeは、緯度

Longitudeは、経度

を表しています。

上記の画像は沖縄の緯度経度になっております。

③Mapの編集

f:id:hk-ryukyu:20181202183153p:plain

Google MapsのAdd Newをクリックします。すると、Google Mapが表示されます。

Google Map上の下側にある「Drop a Marker」をクリックします。

そして、Map上をクリックすると、アイコンが表示されます。


✎一言メモ✎

MapPress Maps for WordPressプラグインでは、自由にアイコンを設置できなかったが、Maps Builderでは、自由にアイコンを設置できる。


f:id:hk-ryukyu:20181202183909p:plain

アイコンをクリックすると、上記の画像が表示されます。

右下のマークをクリックします。

f:id:hk-ryukyu:20181202183155p:plain

上記の画像が表示され、アイコンを変更することができます。

f:id:hk-ryukyu:20181202184133p:plain

アイコンを変更したら、右下のSet Markeyをクリックします。

下記の画像のように、アイコンが変更されてたら成功です。

f:id:hk-ryukyu:20181202184240p:plain

④Mapの確認

f:id:hk-ryukyu:20181202184441p:plain

Map Shortcodeをコピーします。

f:id:hk-ryukyu:20181202184444p:plain

Mapを表示させたいページに移動し、先ほどコピーしたMap Shortcodeをペーストします。

そして、「変更をプレビュー」をクリックします。

下記の画像のように表示されていたら成功です。

f:id:hk-ryukyu:20181202184449p:plain

3.追記

これで、海中映像マップを作るぞ!

【最後に】Showroomとマッハ新書の紹介

ShowroomでUnity配信をしています。リアルタイムの勉強の様子を見てみたい方におすすめです!(^^)!

www.showroom-live.com

以下は、私のUnity学習体験記となっております。

「他人の勉強方法が知りたい」という方におすすめのマッハ新書です!(^^)!

hk-ryukyu.booth.pm

hk-ryukyu.booth.pm

hk-ryukyu.booth.pm

hk-ryukyu.booth.pm

【WordPress】Google map の使用 プラグインMapPress Maps for WordPress編 KML/KMZファイルの使用について

【やりたいこと】KML/KMZファイルを使いたい

今回の記事は、前回の「Google map の使用 プラグインMapPress Maps for WordPress編」の続きになります。

Google map の使用 プラグインMapPress Maps for WordPress編リンク]

KMLファイル???

って感じですよね。

今回使用するKML/KMZファイルの話をすると、

自分でアレンジしたGoogle MyMapをエクスポートするときのデータ形式になります。MyMapを自分のサイトで使用する場合は、このKML/KMZファイルを使用するらしいんですよね。

ということで、今回の記事は、KML/KMZファイルの使用で試行錯誤した話です(^^)/

※結果、KML/KMZファイルを使用するには、お金がかかる(約6000円)というお話です。

【お金かかる!】グレードアップが必要

1.使用したもの

ロリポップレンタルサーバー スタンダードプラン

lolipop.jp

WordPress 4.9.8

WordPressロリポップユーザー専用ページからインストールしました。

・テーマ Hueman

ja.wordpress.org

・MapPress Maps for WordPress

wordpress.org

KML Upload Patch

u-tamax.jp

2.手順

※MapPress Maps for WordPressプラグインは、すでに有効化されているものとして、話を進めていきます。

KML Upload Patchのインストール

こちらのリンク先から、KML Upload Patchをダウンロードします。

u-tamax.jp

f:id:hk-ryukyu:20181202153111p:plain

プラグインの新規追加をクリックし、先ほどダウンロードしたファイルを選択し、インストールします。

インストール後は、すぐに有効化にします。

Google MyMapからKML/KMZファイルのダウンロード

f:id:hk-ryukyu:20181202153321p:plain

上記の画像のように、「KML/KMZにエクスポート」をクリックします。

f:id:hk-ryukyu:20181202161345p:plain

ダウンロードをクリックします。

KMLファイル、KMZファイルどちらでダウンロードしても大丈夫です。

KML/KMZファイルの使用

f:id:hk-ryukyu:20181202161543p:plain

メディアの新規追加をクリックし、先ほどダウンロードしたKML/KMZファイルをアップロードします。


✎一言メモ✎

①でKML Upload Patchを有効化しているおかげで、メディアにKML/KMZファイルをアップロードできるようになっている。


f:id:hk-ryukyu:20181202162204p:plain

メディアのライブラリをクリックします。

先ほどアップロードしたファイルをクリックします。

f:id:hk-ryukyu:20181202163246p:plain

ファイルのURLをコピーします。

f:id:hk-ryukyu:20181202163345p:plain

固定ページ一覧(投稿でも可)をクリックし、上記の画像のようにファイルのURLをペーストします。

「No results」と表示されてしまいました。ここからが本題です!!!!

④「No results」の理由

結論ドーン!!! f:id:hk-ryukyu:20181202170652p:plain

MapPress ProにアップグレードしないとKML/KMZファイルは使用できないようです。

⑤悲しいお知らせ

f:id:hk-ryukyu:20181202171051p:plain

KML/KMZファイルの使用は、約6000円かかります。

3.追記

MyMapの表示は、違う方法を考えよう!

(恵んで下さい)

f:id:hk-ryukyu:20181202171523p:plain

hk-ryukyu.booth.pm

【最後に】Showroomとマッハ新書の紹介

ShowroomでUnity配信をしています。リアルタイムの勉強の様子を見てみたい方におすすめです!(^^)!

www.showroom-live.com

以下は、私のUnity学習体験記となっております。

「他人の勉強方法が知りたい」という方におすすめのマッハ新書です!(^^)!

hk-ryukyu.booth.pm

hk-ryukyu.booth.pm

hk-ryukyu.booth.pm

hk-ryukyu.booth.pm

【WordPress】Google map の使用 プラグインMapPress Maps for WordPress編

【やりたいこと】Google mapを使用したい

今回の記事は、過去記事の「Google map APIを取得する方法」の続きとなっております。

Google map APIを取得する方法リンク]

今回は、Google map を使用できるようになるプラグイン「MapPress Maps for WordPressの紹介です(^^)/

【10分でできる!】

※ダウンロード時間は10分の中に含まれていません。

1.使用したもの

ロリポップレンタルサーバー スタンダードプラン

lolipop.jp

WordPress 4.9.8

WordPressロリポップユーザー専用ページからインストールしました。

・テーマ Hueman

ja.wordpress.org

・MapPress Maps for WordPress

wordpress.org

2.手順

①MapPress Maps for WordPressのインストールと有効化

※下記の画像は、すでにインストール済みの表示になります。

f:id:hk-ryukyu:20181202044125p:plain

プラグインの新規追加をクリックします。

MapPress Maps for WordPressを検索し、MapPress Maps for WordPressをインストールします。

インストール完了後、有効化にします。

②MapPress Maps for WordPress

f:id:hk-ryukyu:20181202044421p:plain

MapPressをクリックし、基本設定を変更します。

Mapping EngineのGoogleにチェックをつけます。

Google API keyを記入します。

APIキーの取得はこちらの記事を参考にしてください

Google API Key取得記事リンク]

Google map の使用方法

f:id:hk-ryukyu:20181202044841p:plain

固定ページ(投稿でも可)をクリックし、MapPressの新規マップをクリックします。

f:id:hk-ryukyu:20181202045130p:plain

上記の画像のように、「okinawa」と記入すると、指定の場所にアイコンが表示されます。

f:id:hk-ryukyu:20181202050654p:plain

上記の画像のように、2つ以上の場所を指定することもできます。

f:id:hk-ryukyu:20181202045415p:plain

また、アイコンをクリックすると、説明文を加えることができます。

f:id:hk-ryukyu:20181202045623p:plain

マップの保存を行い、記事へ挿入をクリックします。

すると、記事にマップが挿入されます。


✎一言メモ✎

記事に挿入後の「6」という数字は、挿入したマップの番号になります。


④マップの確認

「変更をプレビュー」をクリックし、マップが表示されているか確認します。

f:id:hk-ryukyu:20181202050136p:plain

上記の画像のように表示されていれば成功です。

3.追記

このプラグインは、KMLファイルが使用できます!別記事で書きます!

【最後に】Showroomとマッハ新書の紹介

ShowroomでUnity配信をしています。リアルタイムの勉強の様子を見てみたい方におすすめです!(^^)!

www.showroom-live.com

以下は、私のUnity学習体験記となっております。

「他人の勉強方法が知りたい」という方におすすめのマッハ新書です!(^^)!

hk-ryukyu.booth.pm

hk-ryukyu.booth.pm

hk-ryukyu.booth.pm

hk-ryukyu.booth.pm

【WordPress】Google map APIを取得する方法

【やりたいこと】Google map APIを取得したい

Google map APIの取得、めんどくさいですよね~、

ということで、

Google map APIを取得する方法を一番シンプルな記事を目指して書きました!

【10分でできる!】一番シンプルなAPIの取得方法

※ダウンロード時間は10分の中に含まれていません。

1.使用したもの

ロリポップレンタルサーバー スタンダードプラン

lolipop.jp

WordPress 4.9.8

WordPressロリポップユーザー専用ページからインストールしました。

・テーマ Hueman

ja.wordpress.org

2.手順

Googleのアカウントをお持ちでない方は、はじめにGoogleアカウントを作成してください。

Google Maps PlatformでAPIの取得

こちらがGoogle Maps PlatformのURLとなります。

cloud.google.com

f:id:hk-ryukyu:20181202031028p:plain

右上の「使ってみる」をクリックします。

f:id:hk-ryukyu:20181202031558p:plain

Mapsにチェックをつけます。

f:id:hk-ryukyu:20181202031717p:plain

Project名を記入します。どんな名前でもかまいません。

後は、指示通りに進みます。

f:id:hk-ryukyu:20181202031819p:plain

上記のように、APIが表示されていれば成功です。

②キーの制限

取得したAPIを指定のサイトのみで使用できるように、キーの制限を行います。

f:id:hk-ryukyu:20181202032144p:plain

認証情報の保護をクリックします。

f:id:hk-ryukyu:20181202032444p:plain

アプリケーションの制限でHTTPリファラー(ウェブサイト)を選択します。

下の方で、APIを使用するサイトのURLを記入します。


✎一言メモ✎

APIを使用するサイトのURL記入が、ただコピペするだけではうまくいきません。

私のサイトのトップページURLが「http://hk-underwater.club/kakinohana/」になります。これをAPIを使用するサイトに指定する場合は、

hk-underwater.club/*

と記入します。


③編集方法

f:id:hk-ryukyu:20181202033401p:plain

後にキー制限を改めて編集する場合は、

認証情報を選択し、編集するAPIキーの右側にある鉛筆マークをクリックします。

すると、②のキー制限を設定したページに移動します。

3.追記

Google map APIを使用するWordPressプラグインは別記事で紹介します!(^^)!

【最後に】Showroomとマッハ新書の紹介

ShowroomでUnity配信をしています。リアルタイムの勉強の様子を見てみたい方におすすめです!(^^)!

www.showroom-live.com

以下は、私のUnity学習体験記となっております。

「他人の勉強方法が知りたい」という方におすすめのマッハ新書です!(^^)!

hk-ryukyu.booth.pm

hk-ryukyu.booth.pm

hk-ryukyu.booth.pm

hk-ryukyu.booth.pm

【WordPress】「Cocoon」でツイッターカードの表示を変更する方法

【やりたいこと】ツイッターカードの表示を変更したい

本ブログ「楽しく続けるUnityGym」で、ワードプレスについての初記事になります!

こちらのワードプレス記事もどうかよろしくお願いします!(^^)!

ということで、今回の記事についてのお話をします。

自分のブログを作成した後にやることは、なんでしょうか。

もちろん、宣伝でしょう(^^♪

どうやって、宣伝するかって、SNSで決まりでしょう(^^♪

SNSどれ使えばいいかって、Twitterで決まりでしょう(^^♪

ということで、ワードプレスで作成したブログをツイッターでシェアしてみてください。

表示がちっちゃくないですか!

画像をもっと大きく表示されてほしいですよね。

画像を大きく表示する方法を調べてみましょう。試しに「ワードプレス ツイッターカード」で検索してみてください。

色々記事が出てきて、簡単に解決できそうですね(^^♪

と思ったあなた!

必ずこの記事に目を通してください!

あなたがもし、テーマCocoonを使用しているなら、絶対に見るべきです!

ということで、今回は、Cocoon」でツイッターカードの表示を変更する方法です(^^)/

【5分でできる!】Cocoonツイッターカードの設定欄が用意されています。

※ダウンロード時間は5分の中に含まれていません。

1.使用したもの

ロリポップレンタルサーバー スタンダードプラン

lolipop.jp

WordPress 4.9.8

WordPressロリポップユーザー専用ページからインストールしました。

・テーマ Cocoon

wp-cocoon.com

2.手順

Cocoonの設定

f:id:hk-ryukyu:20181202014243p:plain

Cocoon設定を選択し、「OGP」をクリックします。

f:id:hk-ryukyu:20181202014420p:plain

Twitterカード設定のTwitterカードタイプの「大きな画像のサマリー」チェックをつけます。

ツイッターカードの確認

以上のように設定することで、ツイッターで記事をシェアするときに画像が大きく表示されるようになったかと思います。

参考画像

f:id:hk-ryukyu:20181202014911p:plain


✎一言メモ✎

ついでに、トップページの画像も変更しておきましょう。

f:id:hk-ryukyu:20181202015033p:plain

3.追記

テーマ「Cocoon」を使用している場合に、他のプラグインツイッターカードの設定を変更すると、機能が競合して正常に動作してくれません。

私は、「Cocoon」にツイッターカードの設定を変更できる機能があると分からず、ムダに試行錯誤してしまいました。

この記事が、これから「Cocoon」でブログをはじめようとしている人にシェアされることを望んでいます。

【最後に】Showroomとマッハ新書の紹介

ShowroomでUnity配信をしています。リアルタイムの勉強の様子を見てみたい方におすすめです!(^^)!

www.showroom-live.com

以下は、私のUnity学習体験記となっております。

「他人の勉強方法が知りたい」という方におすすめのマッハ新書です!(^^)!

hk-ryukyu.booth.pm

hk-ryukyu.booth.pm

hk-ryukyu.booth.pm

hk-ryukyu.booth.pm

【Unity】GaiaのTerrain Utilitiesを試してみる Apply Mask To Splatmap編

【やりたいこと】Gaiaを使いこなせるようになりたい!

今回の記事は、前回の記事「Gaiaで浸食地形を作る方法(エロージョン効果)」の続きです。

hk-ryukyu.hatenablog.com

今回は、Terrain UtilitiesのApply Mask To Splatmapについてのお話です(^^)/

Apply Mask To Splatmapは、簡単に言うと、浸食部分のTextureを変更できる機能です。

【10分でできる!】水が流れそうなところのTexture変更

※ダウンロード時間は10分の中に含まれていません。

1.使用したもの

・Unity 2018.2.14f1 (64-bit)

・Gaia

assetstore.unity.com

※Gaiaをセットアップするために、他にダウンロードするアセットがあります。こちらの記事で確認してください。

hk-ryukyu.hatenablog.com

2.手順

※今回の記事は、前回の「Gaiaで浸食地形を作る方法(エロージョン効果)」のプロジェクトを引き続き使用します。

hk-ryukyu.hatenablog.com

①Apply Mask To Splatmapの設定

f:id:hk-ryukyu:20181201233602p:plain

Terrain Utilitiesを表示させ、OperationをApply Mask To Splatmapに変更します。

Mask1に「Terrain○○ Flow map」をアタッチします。

②Target Splatの設定

f:id:hk-ryukyu:20181201233856p:plain

Target Splatをクリックし、適当なものを選択し、Perform Operationをクリックします。

浸食部分のTextureが変われば成功です。

Target Splatを変更して、色々試してみましょう(^^)/

Unity GIF - Find & Share on GIPHYgph.is

3.追記

浸食部分のTexture変更より、周りより凹んでいる部分のTexture変更の方が分かりやすいかな。

水が流れそうなところのTexture変更でもいいかも。

【最後に】Showroomとマッハ新書の紹介

ShowroomでUnity配信をしています。リアルタイムの勉強の様子を見てみたい方におすすめです!(^^)!

www.showroom-live.com

以下は、私のUnity学習体験記となっております。

「他人の勉強方法が知りたい」という方におすすめのマッハ新書です!(^^)!

hk-ryukyu.booth.pm

hk-ryukyu.booth.pm

hk-ryukyu.booth.pm

hk-ryukyu.booth.pm

【Unity】Gaia  Terrain Resourcesの作り方  

【やりたいこと】Gaiaを使いこなせるようになりたい!

Gaiaで地形作成するときに、自動で草や木を生やすことができますよね。

実は、自動で発生させる草や木などの種類を変更させることができます!

ということで、今回は、Terrain Resourcesの作り方です(^^)/

【10分でできる!】Resourcesの作り方も簡単です!

※ダウンロード時間は10分の中に含まれていません。

1.使用したもの

・Unity 2018.2.14f1 (64-bit)

・Gaia

assetstore.unity.com

※Gaiaをセットアップするために、他にダウンロードするアセットがあります。こちらの記事で確認してください。

hk-ryukyu.hatenablog.com

2.手順

①Gaiaの準備

Gaiaの準備は、こちらの記事を参考にしてください。

hk-ryukyu.hatenablog.com

②Terrainの作成

f:id:hk-ryukyu:20181201172720p:plain

hierarchy上で右クリックし、

3D Object > Terrain

をクリックします。

③Terrainの設定

f:id:hk-ryukyu:20181201173025p:plain

TerrainコンポーネントのPaint Textureを選択します。

Edit Textures…を選択し、上記の画像のように、適当なTextureを選択します。

f:id:hk-ryukyu:20181201173416p:plain

今回は、4つのTextureを追加します。

④Terrain Resourcesの作成と設定

f:id:hk-ryukyu:20181201173541p:plain

Gaia ManagerからTerrain Resourcesの右側にある「New」ボタンをクリックします。

すると、自動的に新しく作成したTerrain Resourcesがアタッチされます。

f:id:hk-ryukyu:20181201174213p:plain

新しく作成したTerrain Resourcesを選択し、inspectorビューを表示させます。

inspectorビュー下側にある「Get Resources From Terrain」をクリックします。

「Get Resources from Terrain ?」という表示が出てきます。

これは、「現在開かれているシーン内のTerrainからResourcesを取得しますが、よろしいですか?」

という意味です。「Yes」をクリックしましょう。

※一度取得してしまうと、今までのResourcesに戻ることはできません。


✎一言メモ✎

f:id:hk-ryukyu:20181201174920p:plain

Resourcesを取得した後に、inspectorビューを見てみると、Terrainで設定したTextureが反映されていることを確認できる。

設定していない項目は「Size」が0になっていた。


⑥地形の作成

f:id:hk-ryukyu:20181201175320p:plain

Gaia Managerから「1.Create Terrain & Show Stamper」をクリックします。

f:id:hk-ryukyu:20181201175559p:plain

作成した地形のTerrainを確認すると、

TerrainコンポーネントのTextureが、最初に作成したTerrainの設定と同じになっていることが分かります。

f:id:hk-ryukyu:20181201175815p:plain

適当なスタンプをStamp Previewにアタッチして、Stampをクリックします。

f:id:hk-ryukyu:20181201180110p:plain

Gaia Managerから「2.Create Spawners」をクリックします。

そして、Coverage Texture SpawnerをSpawnさせます。

下記の画像のように、設定したTextureが地形に反映されていたら成功です。

f:id:hk-ryukyu:20181201175942p:plain

⑥TerrainのTextureを変更

TerrainのTextureを変更させると、シーン内に表示されているTerrainのTextureも自動的に変更されます。

Textureがどの部分に使用されているか分かるので、ぜひやってみてください!(^^)!

Animated GIF - Find & Share on GIPHYgph.is

3.追記

Resourcesは、木や草、建物の変更もできるのでやってみてね(#^^#)

【最後に】Showroomとマッハ新書の紹介

ShowroomでUnity配信をしています。リアルタイムの勉強の様子を見てみたい方におすすめです!(^^)!

www.showroom-live.com

以下は、私のUnity学習体験記となっております。

「他人の勉強方法が知りたい」という方におすすめのマッハ新書です!(^^)!

hk-ryukyu.booth.pm

hk-ryukyu.booth.pm

hk-ryukyu.booth.pm

hk-ryukyu.booth.pm