先日某M氏が「全員で簡単に共有できる議事録ファイルがほしい！」という云々をおっしゃった際に「ああーそれ便利ですなー」となったので、ちょいとGoogleアプリを調べてみたところ、まーこれが面白い面白い。
けれどどうにも「Googleアプリって……そもそもなんなん……？」となってしまったので、整理がてらつらつら書いてみようと思います。

そもそも「アプリ」って何？

スマートフォンが一般的に流通してからよく聞くようになりました「アプリ」ですが、もともとは「アプリケーション」とフルで呼ばれていました。PCに慣れ親しんだ人からすると、デスクトップに並んでいたアイコン、あれらがアプリケーションだったわけですね。
アプリケーションはもともとOS（オペレーティングシステム。WindowsやMacOSのこと。後述）で動くソフトウェア（コンピュータで動くプログラム）の一つです。ソフトウェアにはシステムソフトウェアとアプリケーションソフトウェアがあって、もうここらへん面倒になってくる頃合いかと思いますので、つまりアプリというのは「何らかの機械の中で動くプログラム」程度の認識で大丈夫です。

OS(オペレーティングシステム）とは

Windowsはバージョンがいろいろ変化していますが、一般的に理解されるようになった95から98、Millennium、XP、VISTA、7、8ときて現在10となっています。これらすべてがOSです。現在10なので、二世代前のVISTAあたりからかなりのおじいちゃんOSになります。95とかほとんど戦前です。
Macでいうと素敵な名前がついていて、Cheetah、Puma、Jaguar、Panther、Tigar、Leopard、Snow Leopard、Lion、Mountain Lionとネコ科できていたのがいきなり最近MavericksとかYosemiteとかになってきてMacユーザーとしては「？！」な感じになりました。まだネタ切れには早いでしょうネコ科。スナドリネコとかいたでしょう？

アプリの種類には何がある？

最近のアプリにもいろいろあって、とりあえず「何らかの機械の中で動くプログラム」から「何らかの機械の中で動くプログラムで動くプログラム」みたいなものもアプリに分類されています。

デスクトップアプリケーション

コンピュータのデスクトップ上で動くアプリ。スマホより先に普及したPCのほうでの呼び方で、単にアプリケーション、と呼ぶ場合はこちらのデスクトップ上で動くアプリのことを差して言います。若い人だとこのデスクトップアプリケーションもアプリと呼ぶときがありますね。それに合わせて企業がデスクトップアプリケーションをアプリと呼ぶこともあるようで、たまに「？？？」となっています。混合するとやばいことになりかねないので「それどこで動くアプリ？」と聞いてしまう古い人間です。

モバイルアプリケーション

スマートフォンやタブレット、いわゆる携帯端末で動くアプリです。単に「アプリ」というと、一般的にもっぱらこのモバイルアプリケーションが連想されるようです。
androidアプリ、とかiPhoneアプリ、というのもモバイルアプリケーションの一つで、androidで動くからandroidアプリ、iPhoneで動くからiPhoneアプリ、といったような言い方をします。
GooglePlayはグーグルさんがやってるandroidアプリを販売するオンラインソフトウェアショップ、AppStoreはアップルさんがやってるiOS（iPhoneに搭載されているOSのことですね）で動作するアプリを販売するオンラインソフトウェアショップです。
androidとiPhoneではプログラムの書き方が違うので、分けないとだめなんですな。ついにandroid対応！とか言ってるのはつまりそういうことなんです。どこもかしもこ商業戦略。
androidが海の中で自由に泳ぎ回るソフトならiPhoneは空を自由に飛び回るソフト、くらいの違いがあるんです。空ではスキューバダイビングなんてできないのと同じ理屈。

ウェブアプリケーション

ウェブブラウザ上で動くアプリのこと。つまり「ウェブブラウザが開ける環境であればどこでも使える」ことが利点として挙げられます。こちらも主に「アプリ」と呼ばれます。

Chromeアプリは2018年までに終了

Google、Chromeブラウザー向けの「Chromeアプリ」の提供を2018年までに終了｜INTERNET Watch
これで使えなくなるのは「Chromeを起動しなくても使えていたアプリ」にあたります。
Chromeのウェブストアのサイドバーには、「拡張機能」「テーマ」「アプリ」「ゲーム」とありますが、この「アプリ」の項目から「Chromeアプリ」がなくなります。（あいますとかぐらぶるとかのプレイヤーが涙をのみそうだ……）
Chromeブラウザの右上のマークから「その他ツール」→「拡張機能」のものは残りますので確認しておきましょう。

アプリとアドオンって何が違うの？

アプリ＝アプリケーション＝ソフトウェアというものに対して、随所で見られるアドオンとは「追加機能」という意味を持ちます。拡張機能とほぼ同じ意味合いです。
GoogleChromeはアプリケーション、GoogleドキュメントはGoogleChromeのウェブアプリケーション、Googleドキュメントにラベリング機能を追加してくれるのがアドオン、みたいな感じになります。

Googleのアプリサービス

さてわが社が愛用しまくっているGoogleさんですが、最近多岐に広げに広げたホームグラウンドをややシュッとスリムにしようと試みていらっしゃるようです。スリムなパッケージにスリムなアイテム、なんでもスリムが好まれる時代です。
ざっくりとよく知られているGoogleさんのサービスを見てみましょう。

サービスの一覧はコチラ＞＞　サービス｜Google

検索システム

GoogleChromeというウェブブラウザの提供から、ウェブ検索、ブックマーク機能などを一括してポンしてくれています。ちょうべんり。だいたいみんな使ってます。

ビジネス

普通の人にはあんまり興味ないかもしれませんが、ビジネスマンなら知っておけツール満載。広告の配信をはじめとする、「オンラインで収益を上げるための手法」をあれこれ提供してくださっています。

メディア

動画見たり画像検索したり本読んだりニュース見たり。

地理情報

GoogleMapさんには多くのウェブデザイナーがお世話になっております。グーグルアースを旅するのも楽しいですね。

目的別の検索

学術論文なんか検索できたんだ、という新しい発見。すごい…知識の玉手箱…。時間泥棒にもほどがある…。

ホーム&オフィス

おそらくGoogleChromeを使う多くの人が知っているツールが詰まったカテゴリ。

Gmail

フリーメールの一つです。Googleアカウントを取得する際に必ず必要になります。別のメールアドレスとも連携が取れます。

ドキュメント

MicrosoftWordと似たような機能で、Wordファイルへの変換も可能。書類がいろいろ作れます。別ユーザーとの共有も可能で、作成した書類はGoogleドライブに自動的に保存されます。拡張機能を入れることで、Wordファイルを開いて編集することも。アドオンを使用することで、ラベリングや名前タグを付属させることもできるなど、多様性満載。

Google ドキュメントの使い方｜Google Apps

スプレットシート

MicrosoftExcelと似たような機能で、Excelファイルへの変換も可能。こちらもいろいろ書類が作れると同時に、別ユーザーとの共有が可能で、ドライブへの自動保存機能がついています。アドオンの使用もさまざま。

Google スプレッドシートの使い方

スライド

プレゼンテーションに必須のスライドショーを簡単に作れるアプリ。MicrosoftPowerPointと連携が可能で、Chromecast（有料）やハングアウトでも利用可能。テーマや使用可能フォントも豊富で、埋め込み動画やアニメーションも搭載。PowerPointが無料で使えてしまうような心地でスライドを作成できます。

Google スライドの使い方

フォーム

イベント参加の管理やミニ投票、メールアドレスの収集や、小テストの作成、用途は様々。いわゆるアンケート機能、というものにあたります。スプレットシートとも連携が取れ、回答は同じくスプレットシートに記録可能。フォームをメールなどで先方に送るだけで、アンケートがウェブ上で完結する優れもの。簡易なヒアリングならこれだけでいけちゃうかも……？

Google フォームでアンケートを作成する

図形描画

たくさんの図形を組み合わせて、席配置やフローチャートなども作れるドローイングアプリ。ドライブに自動保存すると同時に、PDFやjpeg、pngなどといった形式で画像をダウンロードすることも可能。サイトマップを使うときなんかにすごく助かります。
似たようなツールにCacooがありますが、使い勝手はどっちかというとCacooが上かもしれません。相性もありますが、直観的に使えるのは後者ですかね。

図形描画の作成と編集

Googleサイト

上記サービスを統合してウェブサイトを建てることも可能。凝った作りはできませんが、リンクを張ってそれぞれの所定ファイルに移動することなど造作もない…なんてことができちゃいます。社内やチーム内だけで閲覧するホームページがほしいときは重宝します。

Google サイト ヘルプセンター

カレンダー

登録ユーザーと共有しながらスケジュールを時間単位で記載することができます。あの人今日お休み？　なんてことをおろおろしなくても一発で確認。簡易なタスク管理ならこれ一つで十分かも。

Google カレンダー スタートガイド

翻訳

最近精度が上がっていると聞きましたが、やっぱり「瓜二つ」は「Two gourds」と出てきてしまうので、日本語のめんどくささを感じざるを得ません。が、やはり普通の翻訳に比較すると精度は高いのかも……。

Google翻訳

GoogleKeep

ハイパーメモ帳。ただのメモ帳としても、リスト帳としても優れもの。写真を置いておくことも可能で、音声までメモに直してくれます。検索機能付きだから、メモがごっちゃになってもすぐに引っ張り出せます。
似たような機能にEvernoteがあります。こちらはノートやページで細かく分類して整理できるうえ、WEBリンクすると中のページも見せてくれたりするので、あれこれとメモが膨大になりがちな人にオススメ。

Google純正メモサービス『Google Keep』をさらに活用する4つのコツ｜Life hacker

ハングアウト

インクループの会議でめちゃめちゃ使っているハングアウト。ビデオチャットから画面共有状態でのチャット、簡易な連絡のやり取りなど、リアルタイムでの応答に優れたツール。

ハングアウト

Microsoftofficeが手元になくても、書類や表計算はできる！

これはMacユーザーには非常にありがたいお話で、いちいち購入しなくてもGoogleさんにお力を借りればMacでも普通にドキュメント作成が可能、ということです。
フルで活用するにはあまりにもいろいろできすぎちゃうGoogleさん、いつかは使い倒してみたいものですね。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

Google先生との会話が楽しいです、網干です。

Google先生は私たちの知りたいことに対して「ヒントになりえる情報」を与えてくれる博識でムキムキなナイスガイだと思っていたのですが、最近はもっと男らしくなっているようです。
というのも、検索ワードに関して情報の確度が高いものに関しては断言をするようになってきているのです！

さて、今回はそんなGoogle先生の変化ともいえる「Google先生が検索結果を断言する検索ワード」に関して私が知る範囲でまとめてみました！

「企業名」で住所、電話、営業時間を教えてくれる！

Googleマイビジネスで企業情報が登録されていれば、下図のように企業情報が表示されます。

※Googleマイビジネスに関しては下記記事を参考にしてください
Googleマイビジネスを活用して、検索結果に企業情報を掲載しよう | ホームページ制作 東京
情報が確定しているものに関しては、Google先生は断言してくれます！

ちょっと気になるのは「写真を表示」の欄に大きなスタジアムっぽいのが映っているところですね…。
これはインクループという会社がスタジアム規模の建物が建てられるほどに成長するだろうというGoogle先生からの期待値の高さが表れているのでしょうか…！？
期待に応えねばなりませんね！（目を逸らしながら）

「固有名詞」で概要を教えてくれる！

例えば「鎌倉幕府」と検索すると下図のように表示されます。

まさかwikipedia先生が参照されるとは思いませんでした…。
Google先生はwikipedia先生の引用や出典を参照して、情報の確度が高いものに関しては載せているのでしょうか？
私が大学生の頃は「wikipediaは認めない！」と教授に言われて涙目になる事が何度もあったのですが、Google先生が認めているなら大学の教授も認めるしかありませんね！

「電卓」で電卓機能が使える！

「電卓」と検索すると検索結果に操作可能な電卓のフォームが表示されます。

電卓を表示してから入力をしなくても、検索ワードに足し算や掛け算を入力するだけで計算結果を出してくれます。

計算は方法さえ正しければ確実な情報ですから、Google先生にとっては単純計算はお茶の子さいさいなのでしょう。

「速さ」「重さ」「長さ」などの単位の変換ができる！

「重さ　変換」と検索すると重量の単位変換用の入力フォームを表示してくれます！

重量だけでなく、速さ、長さ、その他いろいろな単位の変換をしてくれます！

もちろん各単位の一覧だけを知りたい場合にも対応しています。

「市町村名」と「天気」で天気予報を教えてくれる！

「市町村名　天気」と検索すると一日の天気と一週間の天気を表示してくれます！

「市町村名　天気　明後日」というワードにも対応しています！

日付を指定して「市町村　天気　1月23日」と検索しても表示してくれます。

ですが、指定日時が一週間を超えると表示してくれません…。

1週間を超える天気予報は情報の確度が下がるということなのでしょうか？

「市町村名」と「お店のジャンル」でお店の場所を教えてくれる！

「市町村名　本屋」と検索するとグーグルマップに印をつけてリストアップしてくれます！

「場所」と「イベント」でイベントの一覧を表示してくれる！

「市町村名　イベント」と検索すると周辺で行われるイベントの一覧を表示してくれます！

「横浜アリーナ　イベント」や「東京ドーム　イベント」等の特定の場所のイベントの一覧も表示してくれます！

「歌手名」と「曲」でyoutubeの曲の一覧を表示してくれる！

「バンプオブチキン　曲」や「radwimps 曲」等で検索するとyoutubeの一覧を表示してくれます！

「曲」のワードで検索する人の大半は曲を聴けるサイトを探しているのため、こういった曲の一覧を表示してくれるのでしょう。

「料理名」と「作り方」で料理の作り方を表示してくれる！

これは一番驚いたことなのですが、なんと「おでん　作り方」でおでんの作り方を表示してくれます！

料理の作り方は「一般的な方法」はあっても「確定した情報」として載せるのはなかなか難しいと思っていたのですが…。
試しに他の料理や「作り方」を「レシピ」に変えて検索しましたがGoogle先生はスルー…。

何故おでんだけは作り方が出たのか…、興味深い謎です…。

Google先生との会話を楽しもう！

いかがでしたか？

Google先生は日々進化していて、いつの間にか私たちに確定した情報を届けてくれるようになっていました。
将来的には、Google先生は最も身近にいて博識でムキムキなナイスガイになっていくのではないかと思っています。

…ちなみに、やたらと「ムキムキなナイスガイ」という言葉を推しているのは「頼りになる」という事を遠回しに表現したかっただけなのですが…、最後まで誰にも伝わらなかった気がします…。

ではまた！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

こまごまとたくさんいろんなことを更新し続けているGoogleMapさんですが、先日ストリートビューを表示していた箇所でちょっとしたバグが見られました。

まあ基本的なところになりますが、GoogleMapさんの簡単な設置方法はこちら

＞GoogleMapのデフォルトの「地図を埋め込む」「場所を共有する」を使う場合

＞もっとカスタマイズして埋め込む場合【「Google マップ」の埋め込み地図をカスタマイズする方法まとめ】

「Google マップ」の埋め込み地図をカスタマイズする方法まとめ

社長のこんな記事も

＞3分でプロット・マッピング！エクセル顧客住所をGoogleマップの地図上に無料表示する

GoogleMapのストリートビュー表示画面が要素の上に回ってしまう場合

スマートフォン表示をするときに、インクループではよくこんな感じに電話番号やメールフォームといったコンタクト系のアイコンや、ライン、フェイスブック、ツイッターといったSNSアイコンを並べて、クリック一つで対象のリンクに飛べるようにしています。

GoogleMapさんの表示タイプは、地図タイプとストリートビューと大きく分けて二つあります。地図タイプを埋め込む場合は問題なかったのですが、ストリートビューで表示したときに、どうもこのアイコンを並べている場所の上を通ってしまうようなんですね。

これはアイコンを並べている場所に〔z-index:1;〕を入れるだけで即解決する問題でした。以下のような感じですね。

.icon-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba( 0, 0, 0, 0.6 );
height: 60px;
z-index: 1;
}

<div class="icon-container">
<div class="icon-container_inner">
<a class="icon-container_inner_btn" href="https://incloop.com/contact/">お問い合わせ（無料）</a>
<div class="icon-container_telbox">
<a class="phone_icon" href="tel:0427748442"><span class="icon-phone"></span></a>
</div>
</div>
</div>

アップデート毎にこまかな注意が必要ですね。

GoogleMapが影響するlightboxなど同一画面上で展開する要素の挙動不審

前にlightboxタイプのスクリプトを使用した可変グリッドレイアウト、タイル状のギャラリーのトップデザインが魅力的な、Wordpressテーマのお話をしました。

＞【Photoshop】複数、多量の画像を一度、一括で処理する方法

このタイプのスクリプトとGoogleMapは、純粋に表示する画面の重さゆえに相性が悪いものが多いです。特にギャラリー量が多ければ多いほど、挙動がふわふわします。

特にスマートフォンでの表示は絶望的で、重さに耐えきれずアプリが強制終了することになるのでご注意ください……気づかないでしばらく苦しんでいました。

Lightboxタイプのギャラリーは、別ページにリンクを飛ばすのではなく、その一ページ上で大量の情報を展開するため、あまり数多く利用すると、PCでは生きていてもスマートフォンで死ぬケースが多いようです。ギャラリー10枚に対しすべてのフォトに詳細をつけて、GoogleMapさんを埋め込む、なんてことになると身動きとれなくなっちゃうようです。

GoogleMapをフルで利用する際にはAPIキーが必要になっています

2016年6月22日より、新規でサイトを制作してGoogleMapを表示する場合には、APIキーが必要になりました。前はどないやったんやろう（遠い目）

Application Programming Interface (API)

あるプログラムやソフトウェアなどの機能やデータを、外部の他のプログラムから呼び出して利用するための、手順やデータ形式を定めた規約

そもそもAPIキーってなんぞ、といいますと、扉と扉を繋ぐ鍵みたいなものです。ウェブサイトという部屋とGoogleMapという部屋つなげる鍵です。

いちいちAPIキーとか取得しなくてもMap表示できるじゃん「共有」から「地図を埋め込む」を選べばすぐにURL取得できるじゃん、てのもあるかもしれませんが、APIキーを取得してGoogleMapをHPに埋め込むと、結構多彩な仕様変更ができるのですね。

自社サイトのGoogleMapのデフォルトピンのデザインアイコンや、吹き出しを使いたい、となってくると、このAPIアドレスが必須になってきます。

どんなことができるの？　という方は、見た目だけですがこんなことができます、ということでこんなサイトをご案内。

＞EZ Map

こんな機能があります。

Google Map API

GoogleMapの「リンクを共有」「地図を埋め込む」を利用する際に出てくる「この地図は自分専用です」の意味

GoogleMapには場所を保存しておく機能がついています。Googleアカウントに登録していると、ログインすることでこれらが閲覧可能になります。

メニューから「マイプレイス」＞「保存済み」を選ぶと、☆印のついた保存みの場所がでてきます。よく行くところ、行ってみたい場所、これから向かう場所などを保存しておくわけです。旅行の予定なんかにとても便利ですね。

この保存機能はGoogleアカウントに紐づいて動いているので、Googleアカウントにログインしたまま、企業のHPなどに行って地図をみると、自分が保存した場所に☆がついています。

「この地図は自分専用です」の意味はここです。Googleアカウントをログアウトすると当然見られなくなります。

企業HPで訪問者の「自分専用の地図」が表示されてしまう、というのは……まあ、悪くはないですけどどうなんでしょうかね。企業さんによると思うのですが、お気にされる企業さんはAPIキーを取得することをオススメします。普通のWEBサイトなら無料で取得が可能です。

Google Map API

HPを制作する際にがっつりGoogleMapを埋め込みたい、というときは、APIキーを取得したうえでのご依頼をお勧めいたしますー！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

こんにちは！今日は晴れ晴れとした天気でテンションも上がりますねっ(*’▽’)

木曜ブログ担当の吉見です。（初心者度レベル８←記事を一つ書くごとにレベルが上がっていきます笑）
実は最近やっと、やっと家のパソコンを買い替えたのです！
インクループで使っているパソコンは性能がよくて、家で作業をしたいとき家のパソコンだと重いのなんのって…( ;∀;)とほほ

作業中にイラレやフォトショが急に落ちてデータが飛ぶ！なんてことも多々ありまして、
「うっ…また消えた…」と今までやった作業が台無しということも…
買い替えようかな～とついに決断してネットで購入して早3日で家に到着！
一週間もたたずに家に届いてしまう今の時代ってなんてすごいのでしょう(/・ω・)/

パソコン変えたら設定やらデータの移行やら…やることたくさん！

さて、パソコンを買い替えた次にすることは、ブラウザの設定からデータの移行、バックアップまでいろいろありますよね。
これがまためんどくさいですが、めんどうなことはできるだけ省いてちゃっちゃと終わらせたいはず。

米調査会社ネット・アプリケーションズからの調査によると、
「Google Chrome」のブラウザを使っている人の割合は41.7％、「IE」は41.4％らしいです。
まだIEってそんなに多いんだ…と驚きますが、やっぱりchromeは使いやすいです。

chromeは拡張アプリも充実しているし、デペロッパーツールもよく使うし、マップやメール、アクセス解析も、
ブックマークバーも愛用しているし、Googleにはいつもお世話になりっぱなしです。

インクループでのブログもGoogle関連が多いですし、ほんとにいろいろなことができますよ！
（インクループのブログを一部抜粋しました）
Google ChromeのデベロッパーツールでJavaScriptのデバッグを行う方法
Google ChromeのデベロッパーツールでJavaScriptのデバッグを行う方法②

Google AdSenseを始めてみました！2016年6月のアクセス解析

クリック回数を測定したい！たった1行でGoogleアナリティクスでイベントトラッキングを設定する

他にも気になる方はこちらからどうぞ！→（インクループがGoogleについて書いた記事）

Google Chromeブックマークバーについて

パソコンを新しくしたときなどに、新しいパソコンのほうでGoogleのアカウントを同期すると、パスワードやブックマークなどを同期することができるので便利ですが、

家ではパソコンを家族兼用で使用していたり、会社で使っているパスワードを持ち出せないため、家のパソコンを同期させたくないって方も多いですよね。

今回はブックマークだけをバックアップし、新しいパソコンなどにデータ移行をする方法を紹介します。

ちなみにブックマークとはこちら。

何年も前にパソコンを買い替えたときに、このブックマークのデータを移行できるとは知らずに
一つ一つURLを探してまた新たに登録して…ってそんな作業をしていました。(笑)
これがデータで移行できて、ものの1分くらいで新しいパソコンに移し替えれるって知ったの
ここ最近なんですよね…。そのくらいの初心者でした( ;∀;)(笑)

あの努力とは一体…と思いますが、知ってないとほんとに時間を多く使ってしまいますよね。
……えぇ、人生とは勉強でございます(*´ω｀)
今回はGoogle Chromeのブックマークを一瞬でバックアップしてデータ移行する！方法を紹介します♪

一瞬で完了！Google Chromeのブックマークをバックアップする（エクスポート）

まずはChromeのブラウザを開いて右上のメニューを開きます。
そのなかにあるブックマークをクリックします。

ブックマネージャをクリックします。

ブックマークマネージャを開くと、フォルダと管理という項目がでてきます。

管理をクリックするとドロップダウンメニューがでてきますので、
HTMLファイルにブックマークをエクスポートをクリックします。

保存画面がでてきますので、わかりやすいようにここではデスクトップに保存します。
名前や拡張子はそのままで大丈夫です。

デスクトップを見てみると…きちんとファイルが保存ができているのが確認できます！

これでバックアップのエクスポートは完了です。次はインポートをしていきましょう。

一瞬で完了！Google Chromeのブックマークをデータ移行する（インポート）

エクスポートをする手順と同じようにブックマークマネージャを開きます。
管理をクリック、メニューの中からHTMLファイルからブックマークをインポートするを選択します。

先ほどエクスポートしたファイルを選択して、開くをクリックします。

すると、なにもない状態から…

一瞬でブックマークが追加されました！(*’▽’)

私はまだこれを知らない頃、ブックマークを一つ一つ探しては登録していましたよ…( ;∀;)(笑)
こんなに便利なものが世の中にはありふれているんですなぁと実感します。
これからも毎日が勉強ですな(*´ω｀)

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

こんにちわ！前回、ストーリー仕立てでブログを書いていたのですが、
（WordPressをローカル環境からネットワーク環境へ移植するの詳細はこちら）
次回が最終回なのですが、ちょっとその前に…

Web上のサイトの色って知りたくないですか？

#000000（黒）、#ffffff（白）、などの#から始まるカラーで、「カラーコード」と呼ばれています。

これが0だのfだのが何を意味しているのかというと、難しい話になるのですが、それは知らなくても特に問題ないので大丈夫です！

まずはWEB上で表現できる色はカラーコードで表現することができるということを覚えておいてください。

「HPのバナー作って」と依頼があった際にすることは、まずバナーを掲載するサイトの色を参考にしたり、
「このサイトの色いいなぁ、何色なんだろ？」とどんな色を使っているのか知りたいな…
などなど。

何色を使っているのか知りたい！

って場面って結構遭遇するものなんです( ﾟДﾟ)！！

「Google 拡張機能　色」とかで検索すると、WEB上で使っている色を表示してくれるGoogleアプリがたっくさんでてきます。

「これ便利そう！！！」と何個かインストールするも、…うまく起動してくれない。

なんでやねん！

と言いたくなるようなシーンが結構ありました。(笑)

使い方が悪かったのか、はたまたすでに使っているアプリと相性が悪かったのか( ;∀;)

F12を押すだけ！拡張アプリよりも簡単にWEB上の色がわかる

そこでたどり着いた先は、

「Google デベロッパーツール」

はい、Googleさんにはいつも大変お世話になっております…(*´▽｀*)
WEB開発をするにあたって超便利な機能なんです！

とくに拡張アプリをダウンロードしたりする必要はありません！

唯一のデメリットといえば、英語オンリィな部分でしょうか。(笑)
学生時代の英語が５段階評価のうち２だった日本語しかわからない私でさえも使えているので、大丈夫です(/・ω・)/

Googleデベロッパーツールは日本語化はされておらず、メニューやメッセージなどが英語になってしまっていますが、豊富な機能がズラリ。キラリ(*´ω｀)

そんなGoogleデベロッパーツールの使い方ですが、

Chromeのブラウザを開いている状態で、F12キーを押します。
（WindowsとMacの場合はCommand+Option+Iキー）を押すとデベロッパーツールが表示されます。

①スマホ表示やいろんなサイズのデバイスを確認でき、デバイスモードアイコンと呼ばれてます。
②機能を切り替えることができ、「パネル」と呼ばれてます。
③デベロッパーツールを別ウィンドウ、下、右に切り替えることができます。

他にも、デベロッパーツールって機能が盛りだくさん！ですが、
ここでは長くなるので割愛します！他にどんな機能があるのか、「Chrome デベロッパーツール　使い方」などで検索するとでてきますよ(^^)/

WEB上の色を知りたい！実際に見てみよう

実際にどんな色を使っているのか見てみましょう。

焼肉八起のホームページはこちらからどうぞ！もうすぐリニューアル！

この色は何色なんだろう？ということで…

…ポチっ！！！！

デベロッパーツールを開きます。（F12キーを押すだけです）
※調べたい部分にマウスをあててから右クリック⇒検証からも見れます。

これです、これ！

カラーコードが見つかりましたね？
この部分のカラーコードは、#ff6ということがわかりました(*´▽｀*)

WEB上の色を調べるのに、拡張アプリなんて必要なかったんだ～！♪と喜びました(/・ω・)/

本日も最後までお付き合いいただきありがとうございます(*´▽｀*)

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

先日、学校への提出書類か何かで、自宅周辺地図を描く必要があるのだが、それがとても面倒・・・
という主婦の声を聞きました。しかも2人！きっと皆さんも困っているのかなと思いまして、無料でかつ素早く作れないかを試してみました。
今回の場合はただ地図を作るだけではなく、5cm四方の枠内に印刷する方法もご説明します。
学校の書類などですと、決められた様式の枠内に地図を入れなきゃいけませんので、狙った大きさで地図が印刷できるスキルも必要です。

今回は下図のようにA地点からB地点へのルートを含めた地図を作成してみます。

ステップ１　Google マイマップで新しい地図を作成する

まずは下記のURLにアクセスしてください。

https://www.google.co.jp/maps/d/?hl=ja

マイマップが表示されます。

［新しい地図を作成］をクリックします。

Googleにログインしていない場合、ログイン画面が表示されますので、IDとパスワードを入力してログインしてください。
（Googleアカウントを持っていない場合は新規に取得してください）

ログインが完了すると次の様な画面が表示されます。

［ルートを追加］をクリックします。

「無題のレイヤ」が表示されます。

Aの欄に「相模原駅」、Bの欄に「相模原商工会議所」と入力し、１回余計にEnterキーを押します。
（適宜入力する内容は変更してください）

A地点とB地点を結ぶルートが表示されます。

車のマークをクリックし、徒歩をクリックします。
（徒歩でのルートを表示したいため）

［基本地図］の▼をクリックします。

［シンプルな地図］をクリックします。
（シンプルな地図になり、道がより目立つようになります）

ステップ２　WORD（ワード）を活用して5cm四方の枠内に地図を印刷する

ワードを起動し、［白紙の文書］をクリックします。（今回はワード2013を使っていることを前提にご説明します）

［挿入］タブ→［スクリーンショット］→［指定領域］をクリックします。

下図のように、地図として使用したい部分のみをドラッグして囲みます。

ドラッグして囲んだ部分のみが文書内に画像として配置されます。

［レイアウトオプション］をクリックし、［全面］をクリックします。
（この操作で文書内の地図画像をドラッグして自由に動かせるようになります）

［挿入］→［図形］→［四角形］をクリックします。

文書内の適当なところでクリックをします。
（正方形が描画されます）

5cm四方の大きさにしたいので、［書式］タブをクリックし幅と高さに「50 mm」と入力します。
（Enterを押すと49.99mmになりましたが、あまり気にする必要はありません）

［図形の塗りつぶし］をクリックし、［塗りつぶしなし］をクリックします。

地図の画像をクリックします。

地図の画像の右下隅にある□をドラッグして、画像を小さくします。

地図の画像をドラッグして、5cm四方の四角形の中に納まるように移動させます。

下図のようになればOKです。

あとは、印刷をして四角形の枠に合わせてはさみで地図を切って、所定の様式にノリで貼り付けてください！（2018年2月20日 そのまま貼り付けることは著作権的に問題になるのでは？とのコメントをいただきました。ありがとうございます）

ということで、その地図を参考に手書きでちゃちゃっと書いてしまいましょう！真っ白な状態から書くよりも全然書きやすいですよね。

いかがでしょうか。
パソコンでGoogleマップを利用して地図を作るとしたら、このような手順が良いのではないかと思います。
お試しください^^

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

GoogleのYoutubeアプリがVR（バーチャルリアリティ）に対応したと発表があったのでさっそく試してみよう！ということに。

YoutubeのアプリでVRに対応した動画を再生すると、再生画面にVRゴーグルのようなアイコンが表示されるのでこのボタンをクリックすると、VR用の映像が再生されるようになります。

このVR動画をいい感じで見るためには、Google Cardboardが必要になるのですが、なんと・・・amazonで売り切れ・・・。

こうなったら自分で作るしかない！ということでインクループの技術陣で自作してみました！！

その前にインクループをご紹介

その前にたまにはインクループがどんな会社なのかも紹介したいと思います。

インクループは相模原に事務所があるのですが、商工会議所の本館の4Fが事務所です。商工会議所の中に入っているのでよく商工会議所の組織の一つかと勘違いされる方もいるのですが、何も関係はなかったりします。

入口はこんな感じです。11月22日開催のアートフェスティバルを大々的に宣伝中！飾り付けは既にクリスマスに向けたものに。ついこの間まではハロウィンの飾り付けだったのに、もうクリスマスなんですね。。。

ドアを開けて事務所の中に入ると、またしてもアートフェスティバル！！パソコン教室も運営しているので宣伝しています。事務所の中ももちろんクリスマスに模様替えしています。（Sさん、いつもありがとう！）

さらに事務所の中はこんな感じです。IKEAで買ってきた葉っぱみたいなオブジェが特徴的です。

こんな感じの雰囲気の事務所で仕事をしています。若者ばかりの会社ですが、間違いのない確実な仕事をしつつも、自由で楽しい社風を大切にしています。いつも音楽が流れていて（主にListen Radio、たまにYoutubeとかニコニコ動画も）、音楽によっては妙にテンションが上がる時もあったりしますｗ

Google Cardboardもどきを作ってみた！

というわけで、Google Cardboardを参考にしながら”もどき”を作ってみてしまいました！

そろそろ機種変しようかな・・って思っているXperia Z1がスポッと収まる枠をダンボールで制作。（※再生しているのがVR動画です。）

これを折りたたんでさらに外枠に収まるような構造になっており・・（Google Cardboardとは異なる構造）

真ん中の仕切りをつけて、Google Cardboardを真似て作ってみたメガネっぽいもの（レンズ無し）を装着すると完成！（なんだかナウシカの巨神兵に似てるし）

かなりそれっぽい仕上がりです！！完成度高くないですか？！

ちなみに本物はコレ。

さっそく試してみた

最初は焦点を合わせるのに慣れが必要だったのですが、慣れてきて焦点が合うと

「これすごすぎっす！！」

と周りの目を気にすること無く、怪しいダンボールを装着してあたりを見回すN氏（象の耳フランチャイズ本部事務局担当）。
あぁ～・・バランスボールがあんなところに・・・。

実際ためしてみると顔の向きに応じて映像も動くので、まるで自分がそこにいるかのように感じることができます。顔の向きに対して遅延なく映像が動くのでついつい歩いてしまうのですが、歩きに追従するまでは未対応です。

これで歩いた方向に映像が動くようになったら、本当にバーチャルリアリティそのものです。Youtubeで用意されている動画にはボートを漕いだりするものがあるのですが、まるで自分が船に乗っているかのような錯覚すら感じてしまうほどです。

このVR動画を体験した感想としては・・・

完全に未来の体験！！

です。この技術がゲームなどに応用されるような時が来るのが楽しみすぎです。

ぜひ皆さんもYoutubeアプリのVRを体験してみてください（自作でもなんとかなるｗ）。本当にスゴイ体験ができます。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

WN891を購入して、即座にWindows10にアップグレードしてみたという投稿が非常に好評です。

この投稿については、投稿直後から狙っていたキーワードで10位以内に表示されるなど好調なスタートダッシュを決めていました。

何かのご参考になるかもしれませんので、ちょっと紹介いたします。

公開時間から40分後には検索結果で9位に表示

下の図はWordPressの投稿の編集画面ですが、公開日時は「2015年9月4日　21時6分」となっています。

これまでインデックス（検索エンジンに登録されることです）されるまでに早くても3時間くらいかかっていたのですが、何気なく同日21時45分にSEOチェキさんで検索順位をチェックしてみると・・・。

「WN891　Windows10　アップグレード」

でいきなり9位になっていることにビックリ！！

2時間後には他のキーワードで4位にランクイン！

投稿から40分後の時にも調べておけば良かったのですが、チェックしてなかったので仕方ありません。

2時間後に他のキーワードでもチェックしてみたところ・・・

「WN891　Windows10　インストール」

ではGoogleで4位を獲得です！！

検索エンジンから注目されるサイトになるということ

Googleなどの検索エンジンにとって価値のあるコンテンツを発信しているサイトであるほど、検索エンジンが更新状況をチェックしに来る回数（=クロール回数）が増加すると言われています。

Search Consoleでクロールの統計情報を確認することができます。

弊社の統計情報だと、直近では1日に1,200ページほどがクロールされているようです。

クロールされたページ数＝サイトの価値

と断定できるものではありませんが、判断基準の目安にすることができるのは間違いありません。

クロールとインデックスの仕組みについてはGoogleのページで詳しく書かれています。

Google 検索の仕組み

何かをすればうまくいくといった裏ワザはありません（あったとしても日々の検索エンジンのバージョンアップでいずれ失われる裏ワザです）。

検索で上位を獲得するための方法は、検索をしているユーザーにとって価値があるコンテンツを提供していくことです。

インクループにご相談ください

インクループでは50社を超えるお客様のデータを基にお客様ごとに最適なWebの活用方法について提案させていただいております。

• アクセス数を伸ばしたい！
• お問い合わせを増やしたい！
• 活用できていないWEBサイトをなんとかしたい！

などのようなようなお悩みがありましたら、お気軽にお問い合わせください！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

GoogleからGmailで培ったノウハウを基に開発した新しい受信トレイとして「Inbox」がリリースされました。

Inbox by Gmail – あなたに役立つ受信トレイ

さっそく使ってみたのでレポートしたいと思います。

Gmailの受信トレイに「Inbox」へのお誘いが・・・

今日、ブラウザでGmailを開いてみたところ、右下に「Inboxに移動」という表示がありました。Inboxはこれまでは招待制でテストを実施していたのですが、この度、一般公開となったため、このような通知がでるようになりました。

というわけで、「Inboxに移動」をクリックしてみます。

クリックするとすぐにInboxの受信トレイが開きます

クリックするとInboxの受信トレイが開きます。Googleのアカウントでログインしていれば、これまでのGmailの受信トレイの内容がそのままInboxの受信トレイへと移行されます。（下記画面）

GmailのUIよりもスッキリしており、受信した日時で今日、昨日とメールが分類されています。これは他のメーラーでも採用されている機能ですが、分かりやすくて便利ですよね。

また、添付ファイルの有無と種類が分かりやすく表現されています。クリックすれば添付ファイルを開くこともできます。

「完了」のチェックを使えばタスク管理もできる

個人的には今回のInboxで最も便利だと感じているのが「完了マーク」が付けられることです。

これまでGmailでは処理が完了したメールは完了というラベルを付けて管理していたのですが、この機能があればもう不要です。処理が終わったメールから完了マークをポチポチつけていくだけです。

完了マークを付けたメール一覧も左側のメニューの「完了」から簡単に確認することができます。赤枠で囲んだチェックマークを外すと未完了になり、受信トレイにメールを戻すこともできます。直感的に操作することができるUIですね。

インターネットが普及した現在において、メールが仕事の起点になっていることが多いので、この機能はかなり使えるのではないでしょうか？

インターネットショップからのメールも自動的に振り分け

amazonなどからのメールであれば、自動的にショッピングに分類してくれます。

何を買ったのかをサムネイルで表示してくれるので、商品を購入した時のメールを探す時も簡単に探すことができます。

最近、ドラクエ10の時間があまり取れないのが残念。。。。

Inbox、便利で使える受信トレイです

全体的にGmailのUIをシンプルで使いやすく改善し、誰でも直感的に使えるUIへと進化させたものになっています。

メーラーを変更するのは結構面倒なので経験的にネガティブなイメージがあるのですが、Inboxへの移行ほど簡単で移行して良かったと思えたのは初めての経験です。

さすがGoogle先生です。

ブラウザ版が良かったのでスマホのGmailもInboxのアプリにしてしまいました。Gmailさん、サヨウナラ～^^

Inboxのサイトへ

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

Googleウェブマスター向けガイドラインを見たことはありますか？

次のガイドラインに沿ってサイトを作成すると、Google がサイトを認識し、インデックスに登録し、ランク付けをするプロセスをスムーズにおこなう手助けとなります。

ガイドラインの始めの文章です。つまり、検索結果で見つけてもらえるようなコンテンツを作るためのGoogleの公式ガイドラインということです。

「WEBコンテンツを作る」時には一番最初に読んで理解しなければならないマニュアルのようなものです。

ガイドラインは以下の3つの内容から構成されています。

• デザインとコンテンツに関するガイドライン
• 技術に関するガイドライン
• 品質に関するガイドライン

このガイドラインをしっかりと守ることで良いコンテンツを作ることができる上、Googleの検索エンジンからも評価が高くなる可能性があります。間違ってはいけないのがあくまでユーザーにとって良いコンテンツを作るという視点が重要であり、Googleのためにコンテンツを作ってはいけないということです。

このガイドラインですが、一つ一つの内容が深いので、分けて1つずつ説明していきたいと思います。

今回は「デザインとコンテンツに関するガイドライン」についてです。

デザインとコンテンツに関するガイドライン

オリジナルの文章はGoogleのガイドライン本家を見て頂くとして、ここでは分かりやすく噛み砕いて書いていきたいと思います。

①階層構造をシンプルに！

コンテンツの整理整頓をして、ユーザーが直感的に操作していけば目的のコンテンツに到達することができるようにしましょう。階層は深くし過ぎると何がなんだか分からなくなるので、カテゴリ分けをしっかりして、浅めの階層となるようにしましょう。

②サイトマップを作ろう！

ページ内のどこにどのページがあるのかを分かりやすく表したページ(=サイトマップ）を作りましょう。どこに何があるのか一覧で表したページがあるとホームページ全体の構造が理解しやすくなりますよね。

本で例えるならサイトマップは目次のような役割を持つものです。

③リンクを張る数はほどほどに

一つのページから大量にリンクが張られているとユーザーは混乱していまいます。動線はシンプルに。

④コンテンツの情報は正確に

様々な情報を発信することは良いことなのですが、正しくない情報では困ります。発信する情報の正確性には十分注意しましょう。

⑤キーワードもしっかり考える

検索をする時にユーザーはどのようなキーワードを使用するのかを考えて、文章中にそのキーワードを含めましょう。

⑥重要なリンクは画像リンクではなく、テキストリンクを使う

Googleのクローラー（=サイトが更新されていないかを巡回するロボット）は画像の中の文字を読み取ることはしていないので、テキストリンクを使いましょう。

その次がなぜか英語で書かれていますが、「If you must use images for textual content, consider using the ALT attribute to include a few words of descriptive text.」(=ここまでゆっても画像リンクを使いたいゆーなら、ALT属性にいくつかキーワードを入れときなはれ。）とのこと。

⑦タイトルとALT属性はよく考えること

タイトルを見れば内容がすぐに理解できるようにしましょう。画像のALT属性には画像と関係ないキーワードを入れることなく、画像の意味を正確に表したキーワードを入れましょう。

⑧無効なリンクは削除する

ページ内にリンク切れがないようにしましょう。

⑨GETパラメータは短くしましょう

ちょっとこれは難しいのでパスしてください。分かる人はGETのパラメータは短くしましょうで理解できるので説明不要ですね。

⑩画像、動画、リッチスニペットに関する注意

リンク先が英語だったので、簡単にまとめて書きますと、

• 画像の中に重要な文字を入れないように。入れた時はALT属性にちゃんと書きましょう。
• 動画はとても有用なコンテンツなので、マークアップして、サイトマップで通知しましょう。
• 構造化データのマークアップをしましょう

画像の中に文字を入れるのは良いのですが、最近はスマホで閲覧した時に画像が横幅に応じて縮小され、文字が小さくなってしまうケースがあります。画像内の文字はできるだけ大きな文字にすることが望ましいでしょう。

ガイドラインを守った良質なコンテンツを発信していきましょう！

分かりやすく書いてみましたが、Googleのガイドラインは理解できましたでしょうか？

分からない箇所がありましたら、お気軽にご質問ください。

• 技術に関するガイドライン
• 品質に関するガイドライン

に関しては次の機会に説明したいと思います。

Google先生との約束を守って、楽しいコンテンツ制作を行い、多くのユーザーの役に立つ情報を発信していきましょう！！

でした！

今回の記事のアイキャッチはPAKUTASO様のフリー写真を使わせて頂きました！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。