新Googleサイト

はじめに

Google が提供しているホームページ作成ツール「Google サイト」を利用すると， HTML言語を知らなくても簡単にオリジナルのホームページが無料で開設できる． そのようなことを知人に話したら， 最初の最初が分からないので， そこらあたりを教えてほしいということになった． 以下はそのための説明書である．

Google サイトには，新旧バージョンの２つが存在しているが， Google は「新しいバージョンへの変換ツール」を用意して， 新サイトの利用を薦めている． ここでは，新サイトの利用に焦点を絞り説明した．

Google サイトを利用するには， Google アカウントが必要である． Google アカウントを持っていれば， 15 GB の保存容量のクラウドストレージ （Google ドライブ）を無料で利用できる． Google ドライブには写真， 動画， 音楽， 描画， 文章等のいろいろなデータを保管することができる． Google ドライブはどこからでもアクセスできる上に， Google サイトとの連携がスムースである．

クラウドについては， ユーザーがデータの物理的な保存場所（サーバーの設置場所）を意識することなく, 「雲の中にあるコンピューターから提供されるサービスのひとつを利用する」というイメージで捉えればよい． 元々はパソコンの記憶装置に保存していたものをアップロードして利用するので， 地球上の何処にあるか分からない「クラウド型の Googke ドライブ」という保管場所にデータが移動したと考えればよい． クラウドに存在する Google のホームページ制作ツールである Google サイト （Google Sites） にとっては非常に都合がよいわけである．

クラウド

クラウドコンピューティング（cloud computing）の略名． 従来， パソコン， タブレット端末， スマートフォン等のデバイス毎にメールソフトやデータを置いて処理していたメール送受信の仕事を， 最近はクラウド上に一箇所に集約・管理して処理することが可能になった． そのために， インターネット等のコンピュータネットワークを介して， コンピュータ資源をサービスの形で提供する利用形態が誕生し， クラウドと呼ぶようになった． クラウド上のメールアプリを使用すれば， デバイスに関係なく， 何時でも， 何処からでもメールの送受信が可能になる． メールに限らず， いろいろなアプリが提供されている． ホームページ作成ソフト， 「Googleサイト」もそのひとつである．

Google アカウントの取得（事前準備）

既に Gmail を使っている人はメールアカウントの取得は必要ない．

Google アカウントの作成ページにアクセスし， 画面の手順に沿ってアカウントを設定すれば， 作成したアカウントで Google のフリーメールサービスである Gmail にログインできる． Gmail のほかにも， YouTube， Google Play， Googleドライブなどの すべての Google サービスにユーザー名とパスワードを使用してログインすることができる．

Gmail アカウントの作成 - Gmail ヘルプ - Google Support ← 新規にアカウントを作成するための入り口（クリックする）

Google ドライブにアクセス

Google 検索で「Googleドライブ」と入力して検索すると最初に表示される項目

を選択， クリック表示させると 次図を含む画像が画面一杯に表示される．

「Google ドライブにアクセス」を押すと自分のGoogle ドライブに移行する．

ファイルのアップロード

Google ドライブ管理画面の左上にある「新規」のメニューから， ファイルのアップロードを選択する． パソコンのファイル一覧が表示されるので， アップロードしたいファイルを選択する． フォルダ単位でアップロードすることもできる．

Google サイトの起動

・Google ドライブ管理画面の左上にある「新規」 → 「その他」 → 「Google サイト」から編集画面に入ることができる（次図）．

または， 以下のように操作してもよい．

・新規にサイトを作る場合は， https://sites.google.com/new にアクセスし， ページ右下の○の中に＋が書かれたアイコンをクリックすれば新規サイト編集画面に移行する．

編集開始

新規作成の場合， 編集を開始すると無地のページが表示され， ページ上部には「ページのタイトル」が大きく表示される．

ページ右側のメニューには， 「挿入」モードの内容が表示される． 文章の場合はテキストボックス， 画像の場合は「画像」を選び， 画像をアップロード（あるいは選択）する．

ホームページのタイトルが明確な場合は， ページのタイトルを設定することから始めた方がよい．

ページのタイトル

「ページのタイトル」を実際のタイトルで上書する． ここではタイトル， 見出しのタイプの付け方の基本のみを説明したい． 詳細は後述の関連項目を参考にしてほしい． タイトルのフォントについてはボールドになっている． フォントの変更については後述する項目をみてほしい．

見出しのタイプ

見出しをタイトルのみにするか， バナー（見出し画像）を付けるか選択する． 見出しは， カバー， バナー （大）， バナーの３種から選択する． カバーはページ全体を専有する．

「タイトルのみ」は次図のような体裁である．

見出し画像の選択

バナーを選択した後， タイトルの背景画像の設定は， 画像左下の「画像を変更」をクリックすると， 「アップロード」と「画像を選択...」が表示される．

今回は準備されている画像から選択する方法（画像の選択）を選んだ．

タイトル， 見出し画像はいつでも変更が可能である． 後述する「テーマ」によって文字のタイプを変えることができるので， ホームページが完成した段階で再検討した方がよい．

テキスト， 画像等の挿入モードの詳細 （編集）

サイトに文章， 画像等のコンテンツを挿入するには， 二種類の方法がある．

○ ページの右側に表示されるメニュー（挿入， ページ， テーマ）の挿入モードを利用する方法

○ レイアウトにとらわれないコンテンツ追加法（後述）の２種類がある．

まずは， メニューの挿入モードを使ったコンテンツの挿入について説明したい．

挿入モードの詳細を以下に示した．テキストボックス， 画像， 埋め込む， ドライブ， 各種レイアウトのほか， 目次． ボタン， 分割線を追加， YouTube， カレンダー， 地図， ドキュメント， スライド， スプレッドシート， フォーム， グラフ等の挿入が可能になっている．

レイアウト （テンプレート利用）

ページの内容に沿ったおおまかなレイアウトが想定できる場合は， ６種類のテンプレートから構想に近いものを選択して， コンテンツを組み入れていけばよい． 後で修正は可能なので， 取り敢えず作ってみることが肝要である．

テンプレートには，以下のようなものが用意されているので， 適したレイアウトテンプレートをクリックすればよい．

・左に画像，右にテキストを配置した構成

・複数の画像の下部にテキストを配置した構成

・画像だけを並べた構成

下図は， 左側に画像を置き， 右側にテキストを書くことができる構成である．

レイアウトを使用せず， 画像の周囲に説明文を配置する方法については， 「コンテンツの追加（別法）」の項で述べる．

以下の例は， ページの左右に画像を配置し， それぞれの画像の右側に説明を書くためのレイアウトの例である （記入位置が薄く印字されている）． 画像は＋をクリックすると選択画面が表示されるので， メニューから目的の画像を挿入し， 説明文を追加する．

テキストの入力

画像の挿入

画像に説明を付ける方法

編集中断・再開

編集を開始したら， 適当なところで中断することを考えておく必要がある． ところが， Google サイトには「保存処理」は存在しない．

ページの最上部に「変更内容をすべてドライブに保存しました」と表示されていることからも分かるように， 編集の途中で保存する必要はない．

https://sites.google.com を入力すると，サイトの一覧が表示される． 該当するサイト名（サイト名を未設定の場合は「無題のサイト」）を選択すると， 直前の編集内容が表示され， 編集が再開できる．

埋め込み（URL, 埋め込みコード）

暗号化されていない場合

URLがhttps://ではなく， http://の場合は, 以下のような赤字の警告が表示される．

https 経由でサイトを読み込むことができいないため， 埋め込みできません． URlはテキストとして表示されます．

そのURLをクリックすれば， ホームページが別ウインドウで立ち上がる．

「埋め込みコード」を使った埋め込み

左図はお天気ウィジェットが提供しているコードをコピー・ペーストして表示させたもの， 右図はCanvasの使い方を参考にしてJavascript-Canvasで作ったプログラムを使用して描いた日の丸．

注） ウィジェットはウィンドウガジェット（Window Gadget）の略称， ホーム画面に設置することのできるアプリのこと．

時刻を文字表示した例

ドライブからの挿入

ドライブに保存されている画像データ等の読み込みができる． Googleドライブのマークをクリックすると，直下にフォルダが表示される． データの入っているフォルダを開いて， 挿入したい画像データを読み込む．

テキストファイルについては， xyx.docやPDF形式のファイルは読み込めるが， X線解析のCIFファイル（VESTA等の画像化アプリと関連付けられている）や分子軌道計算結果は現時点では読み込めない． CIFファイルはテキストエディタで開いて直接コピー， ペーストできるので，内部のデータを使って議論する限りにおいては問題はない．

地図やカレンダーの挿入

画像カルーセル

カルーセル（直訳は回転木馬， 回転棚）はコンピュータの操作画面を構成する要素の一つで， 複数の情報をスライドショー的に項目を入れ換えてループ状に表示させたい時に用いられる． 次の例は分子の回転の様子である （次図は自動再生に設定）．

レイアウトにとらわれないコンテンツの追加

編集ページ右側の「挿入モード」とは異なる「ダブルクリック方式」

マウスの左ボタンをダブルクリックすると， 右下のメニューが表示されるので， 画像やテキストを選択する． アップロード， ドライブ， 埋め込む等も選択できる．

この方法を使用すると， 次図のように， 図の上下左右にテキストや画像を配置することができるので， 自分なりのレイアウトが設定できるようである． ただし，画像の上下の文字幅は画像の幅で決まってしまう． テキストの列に画像を追加する際もこの関係は同じである．

画像， 画像． 画像． テキストのような構成も可能である． 画像の上下にテキストを配置することができるので， 既成のレイアウトにはない配置が可能である．

次図のようなレイアウトも可能である．

サイト名の入力

ウエブ公開する前に， 内容を反映した適当なサイト名を入力する．

テーマの選択

テーマの選択で，ページの印象が変わる． 実例を以下に示した． 参考にしてほしい．

プレビュー等の操作

編集画面上部のメニュー（次図）のプレビューボタンを押せば公開後の画面を見ることができる． 編集画面へ戻すには⬅ (URL欄) を押せばよい． プレビューボタンの左側の曲がった２個の矢印の機能は説明の通りである．

ウエブ公開

サイト名を参考にしてウエブアドレスが決められるが， 修正することができる．

「タイトルのみ」見出しタイプに画像を追加

タイトルだけでは， 何となくさびしいので画像（カットイラスト）を追加したいと思うことがある． 実際， 画像を追加することは可能である． 「レイアウトにとらわれないコンテンツの追加」を利用して挿入する．

タイトルの右側に図を入れたい場合， タイトル枠を左によせて図を入れる場所を確保する．

図領域の中心部分でマウスの左ボタンをダブルクリックするとメニューが現れるので， 画像あるいはアップロードを使って図を挿入する．

次図が完成した図．

この手法では， テキスト領域以外に適当な大きさの画像領域を確保することが必須である．

別の場所に貼り付けた画像を移動させてもよい．

見出し画像の変更

背景画像をアップロードあるいは画像一覧から選択する．

「画像を選択」を選択すると， 用意された４０数種類の画像からバナーを選択できるようになっている． 以下に例を示した．

次図は，パソコンに保存していたツツジの写真をアップロードして見出し画像を替えてみた例である． ホームページの内容と合致しているか疑問ではあるが，ページの雰囲気が変わるのは確実である．

参考資料

サイトを新しい Google サイトに変換する - サイト ヘルプ

新しいGoogle Sitesを使い倒してみた officeの杜

とほほのJavaScriptリファレンス

Canvasの使い方

コピペで使える JavaScript逆引きリファレンス

追加資料 （レンタルサーバの利用）

HTML言語が使えれば， もっと細かいプログラミングが可能である． そのような人にとっては， レンタルサーバを利用したホームページも一考の価値がある．

HTML言語を知っていれば，オフラインでパソコンでホームページ作成は可能である． しかし，自宅パソコンをホームページサーバとして運用することは至難の業である． その理由の詳細は省略 （終夜運転． 無停電対応． 定期的バックアップ等）

クラウドの利用方式ではなく， ホームページを運営するためにはレンタルサーバを借りる必要がある． レンタルサーバに， ホームページのデータをアップすることで， 世界中の人がそのホームページを見れるようになる．

もうひとつ必要なのは， ドメインである． インターネット上でコンピュータを特定しているのは， 「201.127.182.125」のような「IPアドレス」である．ドメインを使うことで， 「201.127.182.125」=「otemoyan.com」といった関係ができるので， IPアドレスを覚えなくても特定のコンピュータにアクセスし， Webサイトを閲覧することができる． ドメイン名をIPアドレスに変換するシステムをDNSという．

結論として， レンタルサーバとドメインの安価な費用だけでホームページによる情報発信は可能である．

(2019.9.4)