テーマ；My Yahoo!の代わりのスタート・ポータル・ページをGoogleサイトで作成してみる ポイント；子ども、高齢家族用にわかりやすいスタート・ポータル・ページが実装できた。日本語のガジェットは少なくなったがまだある上に自作も可能。サービスがいつまで続くか不安。 キーワード；My Yahoo!、Googleサイト、スタート・ポータル・ページ
Theme; I tried to use “Google Sites” as a start portal page instead of “My Yahoo!” service. Points; I could implement start portal page for little kids and eldery family. Japanese Google Gudgets are decreacing but still existing. I worry about a service continuity. Keywords: My Yahoo!, Google sites, Start portal page.

GoogleサイトだけでなくProtopageでもポータル・ページを構築しています。そちらも是非ご覧ください。
参考；”Protopage” My Yahoo!の代替サービスを検討

家族のポータルサイトをどうしよう？

”Protopage” My Yahoo!の代替サービスを検討で自分のためのスタート・ポータル・ページをProtopageで作成してみましたが、家族のスタート・ポータル・ページもMy Yahoo!を使っていました。これらもなんとかしなくてはいけません。
結果的に家族分はProtopageを使わずにGoogleサイトを利用して構築することにしました。
結果として作ってみたポータル（実際に使っているものとは異なるサンプルですが）はこれです。
https://sites.google.com/site/itsdiyer/

調査や設置にやはり苦労したので、まとめてみました。

Google サイトとは

Googleが提供しているCMS（Content Management Service）です。サーバなどを立ち上げたり、レンタルすることなく、Googleアカウントさえあれば、ホームページを持ち、運用することができます。サービスとしては需要ありそうなのですが、Googleのポータル・サイト・サービスである”iGoogle”が終了したときに移民があったようですが、iGoogleで利用されていてGoogleサイトでもつかえる”Googleガジェット”の公式運用が終わったり、CMSとしては少し古い使い勝手のままサービス提供されているなど、Googleさんとしてもあまり力をいれてないように感じます。ガジェットは一覧でかなりの量がでてくるのですが、半分以上が現在利用できないようです。
iGoogle – Wikipedia

それでもGoogleサイトを使ってみよう

以下のポイントでGoogleサイトを使ってみることに決めました

• やはりGoogleのサービスである（知らない会社のサービスではない）
• Protoページでは完全日本語化ではないので家族（高齢者、子ども）には向かない
• 伝統的なCMSであるが故に”何でもできる”（体裁はHTMLができれば自由自在）
• 数は少ないが日本向けのガジェットがある

利用したモジュール、ガジェット

家族向けのスタート・ポータル・ページを構築するにあたり利用したGoogleサイトのモジュール、ガジェットは以下です。これらを組み合わせるだけですね。

• ブックマーク
• 検索ボックス（自作ガジェット；Yahoo/Amazon/Google）
• RSSリーダー
• 天気予報
• 駅前探検倶楽部
• Wkipedia検索
• Goo辞書検索
• 株価表示
• プロ野球順位表

これらを組み込んだのが上述のサンプルページです。

Googleサイトを作成する

1. Googleにログインします
2. Googleサイトにアクセスします
3. ”ウェブサイトを作成しましょう”のページで”作成”をクリックします
4. 情報入力の画面になりますので以下のように入力します
   • 使用するテンプレートを選択；”空のテンプレート”
   • サイトの名前；Googleサイトで使用されていないサイト名を入力
   • サイトの場所；Googleサイトで使用されていないURLを入力（6文字以上である必要があります）
   • テーマを選択；選択しません（好みで選択しても良いです）
   • その他のオプション；サイトの説明文などを入力することができます
   • ”私はロボットではありません”にチェックして簡単な質問（画像選択）に答えます
     

     

5. 上部の”作成”をクリック
   これでサイトが立ち上がりました。
6. ”共有と権限”の設定
   アクセスするユーザが限定されているなら権限設定をしておくべきでしょう。
   1. ページ右上にある”共有”ボタンをクリックします
      

      

   2. ”アクセスできるユーザー”の”変更”をクリックします
      

      

   3. ”オフ-特定のユーザー”をチェックして”保存”をクリックします
      

      

   4. 自分以外に参照させたいユーザは”招待”で閲覧者に設定しましょう
      

      

ページの体裁を整える

スタートポータルサイトとして軽くしたいので、私は以下の楊に体裁を整えています

1. サイトのタイトルを非表示にする
   1. ページ右上の歯車アイコン”その他の操作(m)”をクリック
   2. ”サイトを管理”をクリック
   3. ページの上部にある”サイト名を表示する”のチェックを外す
   4. ページ上部の”保存”をクリックして設定を保存

   

2. ヘッダーを非表示にする
   1. ページ右上の鉛筆アイコン”ページを編集(e)”をクリック
   2. ”サイトのレイアウトを編集”をクリック
   3. 画面上部の”ヘッダー”をクリクしてヘッダーを非表示にする
   4. ”閉じる”をクリックして保存する

   

3. ページのタイトルを非表示にする
   1. ページ右上の歯車アイコン”その他の操作(m)”をクリック
   2. ”ページ設定”をクリック
   3. ”ページのタイトルを表示する”のチェックを外す
   4. ボックス下部の”保存”をクリックして設定を保存

   

4. サイドバーにある”ホーム～サイトマップ”の削除
   1. ページ右上の鉛筆アイコン”ページを編集(e)”をクリック
   2. ”サイトのレイアウトを編集”をクリック
   3. デフォルトで”ホーム”というアイテムがあり、マウスを載せると”ナビゲーション”と表示され、右隣に”×”が表示されるので、クリック
      

      

   4. 確認に対して”OK”で削除する
      

      

5. ファビコンの設定
   1. ファビコンにしたいアイコンファイル（.ico）を準備
   2. ページ右上の歯車アイコン”その他の操作(m)”をクリック
   3. ”サイトを管理”をクリック
   4. ”添付ファイル”をクリック
   5. ”アップロードで１のファイルを選択しアップロード

   

これでファビコンが設定されました。

Googleサイトページ編集のやりかた

作成したGoogleアカウントでログインしていれば、Googleサイトを開くと、右上にメニューが表示されているはずです。鉛筆マークの””をクリックすればコンテンツを編集することができます。

最初にレイアウトを決めましょう。私は”２列（シンプル）”を使っています。

モジュール、ガジェットの設定～ブックマーク

ブックマークは”サイドバー”に登録します。

1. ページ右上の鉛筆アイコン”ページを編集(e)”をクリック
2. ”サイトのレイアウトを編集”をクリック
3. ”Sidebar”の右隣にある”+”をクリックし”ナビゲーション”の”追加”をクリック
   

   

4. ”タイトル”にブックマーク”（任意で良いです）と入力する
5. 画面右下にある”URLを追加”をクリック
   

   

6. ”表示するテキスト”／”URLまたはメール”を入力し”OK”で保存する
   ”このリンクを新しいウインドウで開く”はチェックを付けておく方が使い勝手が良いでしょう。

   

7. ５と６を繰り返して、最後に画面下の”OK”をクリックし、ブックマークを保存します
8. 最後に”閉じる”をクリックして閉じましょう

モジュール、ガジェットの設定～検索ボックス（自作ガジェット；Yahoo/Amazon/Google）

検索ボックスを設置するだけならGoogleサイトの機能”HTMLボックス”にHTMLを記述することで、Googleサイト上に実装することができます。
ですが、

• 同じロジックを複数のユーザ（家族）で使う
• ブログパーツなどのJavascriptがHTMLボックスでは動かないケースがある

ということで、検索ボックスは無理矢理、一般的なHTMLやJavascriptをGoogleガジェットとして使ってみます。
但し、ガジェット化しても、やっぱり動かないブログパーツ等もありますので、何でもガジェット化できるわけではありません。
更に、iframeで外部ページを取り込めるガジェットもあるようですが、私の環境や見たいページでは押しなべて表示できませんでした。この辺はProtopageの方が使い勝手が良いですね。

1. コードを用意する
   例）Yahoo!検索だと以下になります。簡単なHTMLです。組み込むコードはJavascriptでもOKです。
   
   　　Yahoo!検索ボックス HTML

   XHTML

   <form action="http://search.yahoo.co.jp/search" name="y_search_f" target="_blank"> <table border="0" width="100%"> <tbody> <tr> <td><input style="width: 100%;" name="p" type="text" /></td> <td width="100"><input type="submit" value="検索" /></td> </tr> </tbody> </table> </form>

   1 2 3 4 5 6 7 8 9 10

   <form action="http://search.yahoo.co.jp/search" name="y_search_f" target="_blank"> <table border="0" width="100%"> <tbody> <tr> <td><input style="width: 100%;" name="p" type="text" /></td> <td width="100"><input type="submit" value="検索" /></td> </tr> </tbody> </table> </form>

2. xmlでラップします
   ”![CDATA[”から”]]>”の間に任意のHTMLかJavascriptを挿入すればガジェットになります。タイトルはガジェットとして挿入した後でもGoogleサイト上で変更できます。
   
   　　Yahoo!検索ボックス Googleガジェット

   XHTML

   <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Yahoo!検索" /> <Content type="html"> <![CDATA[ <form name="y_search_f" action="http://search.yahoo.co.jp/search" target="_blank"> <table width="100%" border="0"><tr> <td><input type="text" name="p" style="width:100%" /></td> <td width="100"><input type="submit" value="検索" /></form></td> </table> ]]> </Content> </Module>

   1 2 3 4 5 6 7 8 9 10 11 12 13

   <?xml version="1.0" encoding="UTF-8" ?> <Module>   <ModulePrefs title="Yahoo!検索" />   <Content type="html">     <![CDATA[         <form name="y_search_f" action="http://search.yahoo.co.jp/search" target="_blank">         <table width="100%" border="0"><tr>         <td><input type="text" name="p" style="width:100%" /></td>         <td width="100"><input type="submit" value="検索" /></form></td>         </table>     ]]>   </Content> </Module>

3. Googleサイトから参照できるよう、準備したxmlファイルをGoogleドライブにアップロードします
   ※2016-09-23 現在、Googleドライブに配置したガジェットが動かなくなっています。調査中。他のパブリックサイトにXMLを配置して動かすのはOKのようです。
   ”googlesites”などのフォルダを作り”共有”設定で”ウェブ上で一般公開”という設定にしておきましょう
   フォルダを右クリック”共有”→”アクセスできるユーザー”の右隣にある”変更”で設定できます

   

   

4. ガジェットのURLを確認します
   1. Googleドライブで対象のファイルをWebのGoogleドライブ上で”ポップアウト”表示します
   2. URLを確認します
      https://drive.google.com/file/d/<半角英数の文字列>/view
   3. 以下に読み替えて、URLを直接指定してブラウザで開きます
      http://googledrive.com/host/<半角英数の文字列>
   4. リダイレクトされたURLがガジェットとして利用できるURLです

   参考ですが、上記のYahoo!検索ボックスガジェットには以下のURLでアクセスできます
   https://452758d665c1d9c9e96541dec356cdf68861c8e9.googledrive.com/host/0B-SrXIcO-nHcOU85LU5XamRnUnc

5. Googleサイトを開いて上部にある鉛筆アイコンをクリックして編集モードにします
6. ”挿入”から”その他のガジェット”を選択します．
   

   

7. ”URLを指定してガジェットを追加”を選びます
8. 先ほど確認したガジェットのURLを貼り付けて”追加”をクリックします
   

   

9. 貼り付けた後、歯車のアイコンをクリックすれば設定でタイトルや縦幅を調整することができます
   

   

この手順で以下のガジェットを作成しました。サンプルサイトにも組み込んであります。

• Yahoo!検索
  https://452758d665c1d9c9e96541dec356cdf68861c8e9.googledrive.com/host/0B-SrXIcO-nHcOU85LU5XamRnUnc
• Yahoo!画像検索
  https://8c1cad6f0bb53fe57d0f6f5ec164fdbe1a8cb7e0.googledrive.com/host/0B-SrXIcO-nHcZzBkM29lMDVoaXM
• Yahoo!動画検索
  https://358d65d1026c24f1cc09be91b21247fa34954f47.googledrive.com/host/0B-SrXIcO-nHcRWxhb09JS1ZZSWc
• Amazon検索
  https://dc2ea10795b6249a5abf767c51485ca405a0c85b.googledrive.com/host/0B-SrXIcO-nHcbzRPSUpnblFJQ0k
• Googleマップ検索
  https://2d3305436cf7f1e6a064c250698d1993d08cd5b5.googledrive.com/host/0B-SrXIcO-nHcZFdwX3EtNy1MNTA

また、子ども向けに検索ボタンなどの表示をひらがなにしたバージョンも一部作りました。

• ヤフーけんさく
  https://d6e949d8ac128d7ada6b62a41b4b7a4620db732e.googledrive.com/host/0B-SrXIcO-nHcOW9zYUF4Z3dZelk
• ヤフーがぞうけんさく
  https://ef5db81832a2945b510373126d8851c87e1deb62.googledrive.com/host/0B-SrXIcO-nHcVUFYa2ZQYUZyUVU
• ヤフーどうがけんさく
  https://9d289baf918d5f074984dc6c149f637f27519d5b.googledrive.com/host/0B-SrXIcO-nHcbVo1Y2xGbFFKOWM
• ちずけんさく
  https://d8f0ab288861fe6b0259e391d2a0e80d45a1211f.googledrive.com/host/0B-SrXIcO-nHcVHN4c3U3NzdkRFk

モジュール、ガジェットの設定～RSSリーダー

RSSフィードとして公開されているものはRSSリーダーで表示することができます。

1. Googleサイトを開いて上部にある鉛筆アイコンをクリックして編集モードにします
2. ”挿入”から”その他のガジェット”を選択します．
   

   

3. ”一般公開”をクリックして”RSS Reader+”で検索し”RSS Reader+”をクリックで選択します。
   

   

   ※URLを指定して選択することもできます
   http://www.ajaxgaier.com/iGoogle/rss-reader.xml

4. ”選択”をクリック
   

   

5. 設定画面が表示されますので必要な情報を入力します
   • Title；管理上の名前で画面に表示はされません、一番下の”ガジェットにタイトルを表示”が画面に表示されるタイトルです
   • RSS feed；RSSのURLを指定します（2～4.RSS feedで複数指定できます）
   • Number of Items；ガジェットに何個の記事を載せるかの指定です
   • Font Size (pt)；フォントサイズです
   • Relative Line Height (%)；行間です
   • Show bullet before items ；記事の行頭に”・”を表示するかどうか
   • Reload feed every time gadget is initialized; otherwise cached information will be used for some time (might slow down feed display) ；一定間隔で記事をリロードするかどうか
   • Reload Frequency (minutes)；リロードする間隔
   • あとは幅、高さ、タイトルを指定すれば良いでしょう

   

   

6. ”OK”をクリックして保存します

あとからガジェットの歯車ボタンで設定を変更したり、”×”ボタンでガジェットを削除したりすることもできます

ヘッダ部分がRSS参照元へのリンクだったりすると便利なのですが、現存するRSSリーダーではそういったガジェットは無いみたいですね。

モジュール、ガジェットの設定～天気予報

横浜や東京などはGoogleガジェットがありましたので、利用しました。
横浜の天気
http://bellks.com/google/yokohama01.xml
以前はピンポイント天気予報などがあったようですが、今はありません。なので、対応するとしが無い場合はRSSで表示することにします。
Livedoor天気予報RSS
サンプルページでは横浜の天気をRSSでも表示しています。
なお、横浜の天気フィードは以下です。
http://weather.livedoor.com/forecast/rss/area/140010.xml

モジュール、ガジェットの設定～その他ガジェット

以下はGoogleガジェットとして公開されているものを利用しました。
いつ無効になるかと心配な反面、日本語のモジュールがこれだけあるのはProtopageより良いポイントです。とはいえ、動かなくなっているガジェット（サーバ上からxmlファイルが削除さているガジェット）や、ブラウザによって動かなかったり挙動が異なるガジェットが多々ありました。以下は2016/07/27時点で動くもので、実際にサンプルページにも組み込んであります。動作確認はInternet Explorer 11とFirefox 47で行っています。

• 駅前探検倶楽部
  http://hosting.gmodules.com/ig/gadgets/file/102256356706623128005/ekitan.xml
• Wkipedia検索
  http://plom.be/gadgetfactory.de/wikipedia/gadget_de.xml
• Goo辞書検索
  http://hosting.gmodules.com/ig/gadgets/file/115337142283864712270/gooDictionaryGadget_renew.xml
• 日本 日経平均株価指数
  http://hosting.gmodules.com/ig/gadgets/file/117287365115354084959/n-j-n225.xml
• 株価(日本)
  http://hosting.gmodules.com/ig/gadgets/file/106380451608350742450/g_finance.xml
• プロ野球順位表
  http://hosting.gmodules.com/ig/gadgets/file/110464075759219817912/yakyurank.xml
• Scientific Calculator(関数電卓)
  http://hosting.gmodules.com/ig/gadgets/file/110220971631329159313

/scientificcalculator.xml

• Google Calculator（式を手入力するタイプの電卓）
  http://hosting.gmodules.com/ig/gadgets/file/102649172265876125485/calculator2.xml
• Advanced Calcultor(普通の電卓)
  http://hosting.gmodules.com/ig/gadgets/file/114952782815530905661/advanced-calculator.xml
• Custom Calculator(見た目やスキンをページ上でカスタマイズできる電卓)
  http://prymak.net/ig/custom_calc.xml
• Calculator, Calculadora, Calculateur, Rechner(見た目良いが広告が多い電卓)
  http://hosting.gmodules.com/ig/gadgets/file/111259497102996937704/FrCalcul.xml
• Luna Phases(詳細な情報が表示される月齢表示)
  http://www.rareworksllc.com/moonphases/LunarPhaseGadget.xml
  ※英語です。場所も日本ではないので、月齢が少しずれます
• Moon Phases(狼男になる確率が表示される月齢表示)
  http://hosting.gmodules.com/ig/gadgets/file/111429734459057744602/full-moon-werewolves.xml
  ※英語です。場所も日本ではないので、月齢が少しずれます
• RubikTime – Rubik’s Cube Timer(ストップウォッチ)
  http://hosting.gmodules.com/ig/gadgets/file/110655672111715498263/rubiktime.xml
• Countdown Timer(カウントダウンタイマー)
  http://hosting.gmodules.com/ig/gadgets/file/115268907771762046735/countdown-timer-widget.xml
• Exchange Rate and Currency Converter(為替レート表示、計算)
  http://hosting.gmodules.com/ig/gadgets/file/112317346116090513935/curs-si-convertor.xml

その他のガジェット～Google製ガジェット

Googoleのサービスだけに、その他のGoogleサービスとの連携は大丈夫ですね。私は使っていませんが、活用できる（している）人は多そうです。

• Googleカレンダー
• Google+（写真含む）
• Googleマップ
• Googleドライブ
• ハングアウト

その他のガジェット～自作公開ガジェット

ガジェットを公開しているサイトもあります。これらを利用するという手段もあります。
AAOh inc. | ガジェット一覧
iGoogle のタイマーガジェット作ったよ。 (でぃべろっぱーず・さいど)
iGoogleのススメ | お薦めガジェット50選
天気予報や乗り換え案内などサーバサイドのAPIが必要なガジェットは利用できなくなっているものが多いですね．．．。

まとめ

My Yahoo!が廃止になるのでGoogleサイトでスタート・ポータル・ページを作ってみました。
サンプルはこれです。
https://sites.google.com/site/itsdiyer/

よかったところ

• ”見た目”はHTMLで好きなように加工可能
• 少なくなってきているものの、日本語のガジェットがある
• Google製

不満なところ

• CMSが使いにくい、設定は面倒
• 外部Webページの取り込み（iframeなど）がうまくいかないケースが多い
• iGoogleのサービス停止以降、Googleサイトも現状維持でサービスがいつ終わるかという不安がある

子どもや高齢の家族には、表記をひらがなにしたり、注釈をいれたりできるので、うまくスタート・ポータル・ページを作ることができました。


– 26th July, 2016 / the 1st edition