googleサイトでポータルページを作ってみよう
今日はPHPの勉強から離れ、Googleサイトを使って簡単なホームページを作ってみようと思います。
Googleサイトとは、Googleが提供している「専門知識なしでホームページを制作できるサービス」のこと。しかもあのGoogleが提供しているので、Googleカレンダーやドライブとの連携も簡単！デザインもドラッグ&ドロップでできる、すべてのテーマがレスポンシブルデザインで構成されているのでスマホでの閲覧でも問題がないなどなど、いいことづくめなサービスです。
なぜ私がこのサービスに注目したかというと、「特定のGoogleのアカウントでしか閲覧できない」「招待URLを持っている人のみ閲覧できる」という制限をかけられるからです。簡易的なポータルサイトの作成にはピッタリ。そういうのを作りたいなーと思っていた時にTwitterでGoogleサイトはいいぞという呟きを見かけ、俄然興味が湧いたのでやってみました。
しかし、デメリットというか作る上での制限として「特定の条件を満たさないと独自ドメインが使えない」「フッターにGoogleサイトで作りました、というような内容のメッセージが固定される」という欠点もあります。これらは課金すれば解除可能となるらしいですが、今回はまったくそのつもりがないので割愛します。
前置きはこれくらいで、簡単ですが作ってみました。
※諸事情によりURLは公開しません。スクショのみとなります。
Googleサイトのトップページにアクセスし、画面の「＋」を押せば新規ページの作成が始まります。
こちらがGoogleサイトを編集している実際の画面です。
超シンプルですが、「ヘッダー」「テキストボックスによるお知らせ欄」「Googleカレンダーを貼り付け」という3つの要素だけを作りました。これらについて簡単ですが説明していきます。
1.ヘッダー
ヘッダーには好きな画像を設定することができます。今回はフリー素材のものを拝借し、Googleサイト側で見やすいようにうっすら白くしてもらっています。タイトルは「ポータルサイト(サンプル)」としてみました。
2.お知らせ
これはテキストボックスで作っています。
べた書きしているテキストなので、これを編集する際はいちいちこの編集ページを開いて書き換えないといけません。Googleスプレッドシートを使えば、そのスプレッドを編集するだけでこのページに表示される内容も変更されます。テストとしてスプレッドシートを貼り付けてみたのが以下の画像です。
スプレッドにした方が編集は楽だろうけど、見栄えとしてはうーん…。
スプレッドもテキストも、Googleドキュメントへのリンクを貼ることができます。ドキュメント側で共有ボタンを押し、リンクを発行して使いましょう。
03.カレンダー
浅はかですが、僕が考えるポータルサイトとしての一番の肝だと思っています。これでアクセスしてくるメンバーの予定を管理・共有ができるのがいいなあと思ったのが今回Googleサイトに手を出した一因なので…。
これは自分のGoogleカレンダーとリンクしています。先ほどのスプレッドと同じく、Googleカレンダー側で編集した内容がそのまま反映される仕組みです。他にメンバーがいる状態で試していないので何とも言えないところがありますが、ここからたぶん編集もできるはず…。
自分が作った要素としては今のところこれだけです。
完成したら画面右上の「公開」ボタンをクリックし、初回だけURLを決めてあげればネットの海に公開されます。検索エンジンに出さないようにする設定もできます。
公開前のプレビューもできます。「公開」ボタンの左にある目のマークのボタンをクリックすることで、「PCで見た時」「タブレットで見た時」「スマホで見た時」をPCのブラウザ上で確認することができます。
PCプレビューモード
タブレットプレビューモード
スマホプレビューモード
スマホプレビューの際、スプレッドシートが見切れて表示されてしまうところがありました。Webサイトでよくあるお知らせ欄にはテキストボックスを使うのが無難かも。
注意点としては、このGoogleサイトのデータはGoogleドライブに保存されます。バックアップなどを取るときは注意してください。
今回は自分で詳しい仕様を考えず、これが必要かなー…というノリで作ってみました。今PHPやHTMLを触るための勉強をしているので特に思うのですが、このサービスは革新的すぎる…。難しいコードも触らず、必要な要素を並べるだけでページができてしまう…！
Googleサイト、自分でページを持ちたいけどコードを書くのは難しそう…と悩んでいる方にこそおすすめしたいです。簡単に自分のページが持てるので！ぜひ！
今夜は変化球でしたが、以上を今日の勉強とします。明日からもPHP頑張るぞ。
参考＝＝＝＝＝
