Qiita Jobsで転職するともらえる、お祝い金30万円プレゼントキャンペーン実施中！詳しくはこちら
AlohaTech@AlohaTech
記事の情報
編集履歴編集リクエスト一覧LGTMしたユーザ一覧Markdown で本文を見る
問題がある記事を報告する

Google Sites を旧型から新型へ移行する際にやったこと＆ついでにやったこと

JavaScriptHTML5GoogleAnalyticsTypeScriptGoogleSite

初めに

ここでは業務で Google Sites を旧型から新型へ移行する際にやったこと、ついでにやったことをまとめています。旧型の Google Sites はいずれ近いうちにサポートが切れるので旧型を使い続けている方々は注意が必要です。

そもそも Google Sites とは何か

その名の通り、Google 社によるウェブサイト作成サービスです。「忘れられたサービス」という異名が一部ではつけられています。

Google Sites の強み

  • ハイパーリンクを張りやすい（いちいち<a>タグを貼らなくていい）
  • 文字フォントの変更がやりやすい
  • ウェブページにファイルを添付しやすい
  • サイトマップを自動で作れる（検索エンジン最適化で必ず必要になります）
  • FTPが不要
  • 自分でサーバーを設定する必要がない
  • 独自ドメインが無料で使えてSSL接続が無料でついてくる
  • （何も設定しなくても）文字化けを心配しなくて大丈夫（試してみたら日本語や英語だけでなく、簡体字なども問題なく使えます）

文字化け対策を心配しなくていいのは助かります。というのも通常のHTMLだと全てのページで head に以下を追加する手間がかかるからです：

text.html
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Type" content="text/html; charset=EUC-JP">
</head>

この手間を省けるのはありがたいです。

弱点

  • 付属しているHTMLエディタが小さくて見えづらい
  • FTPを使いたくても使えない
  • 数式を出力するのに必要なMathJax が使えない（代わりにCodecogsを使えばよい、これを使えば<img>タグで数式を画像として埋め込められる）

作業環境

Google Sites の編集作業は全てブラウザ上で行います。Windows 10 Pro 上で Google Chrome, Mozilla Firefox, Brave などで動作確認してます。また、文法チェックや入力補助系のブラウザ拡張機能は無効にしています（Google Sites の編集を妨げる可能性があるからです）。

新型 Google Sites では何が変わるのか

新型 Google Sites は2016年11月に公開されました。新しい機能がいろいろあるのですが（各種ショートカットキーは一緒です）、以下が特筆すべき点ではないかと思います：

  • 編集画面とプレビューを別々に閲覧できる（旧型では編集中のプレビュー画面はなかった）
  • ウェブサイトや添付ファイルが自動で Google Drive に保存される（各ページにある添付ファイルはそれぞれ別個のフォルダに振り分けられる）
  • HTML/JavaScript などの埋め込みが容易になった（旧型では埋め込みを勝手に差し戻されることが多々あった）
  • 画面横にあるサイトマップが詳細に表示される（旧型では Subsection までしか表示されなかった）
  • ドラッグするだけでテキストボックスの大きさ・位置を調整できる

特に簡単な操作でテキストボックスを操れるのは魅力的ではないかと思います。というのも、テキストボックスをHTMLで設定するのにはひと手間かかるからです：

textbox.html
  <div style="margin:0px;padding:0px;" align="center">
    <div style="margin:0px;padding:0px;line-height:1.3;">
      <div style="margin:0px;padding:10px;line-height:1.3;overflow:auto;text-align:left;height:350px;">
Enter to textbox.
</div></div></div>

この手間を省けるのは助かります。

旧型から新型 Google Sites に移行したら必ずやるべきこと

ここからが本題です。

フォントとレイアウトの確認

旧型から新型に移行した際にはテキスト及びハイパーリンクは保持されるものの、文字のサイズやテキストボックス、プラグインの位置は保持されません。適宜手動で再設定しなくてはいけません。旧型では文字サイズは大体自由に決められたのですが新型では

  • Normal Text
  • Title (<h1>に相当)
  • Heading (<h2>に相当)
  • Subheading (<h3>に相当)
  • Small

しか選択肢がありません。テキストボックスの大きさ、位置はドラッグするだけで十分です。

プラグインの動作確認

旧型で使えていたプラグインが新型でもしっかり動作するという保証はありません。もし動かなくなったら面倒でも再設定しましょう。私が移行作業をした際は連絡フォームが動作しなくなったので新しく作り直しました（123FormBuilder という無料サービスを使っています）

ついでにやったこと（おまけ）

ここからはおまけです（随時追加します）。

旧型で作成したサイトのバックアップ

旧型の Google Sites ではページ全体のHTMLソースを表示するエディタが付属していたので（新型だとないみたいです）、HTMLソースをGitLab/BitBucket などに保存しておきました。ウェブ魚拓や Webpage Archive も使えます。

ウェブ解析

Google Analytics の設定

最近 Google 社から「Google アナリティクス アカウントを適切に設定」というメールをいただいたので、以下の設定を見直してみました：

ボットのフィルタリングを有効にする:
アナリティクスの指標にボットによるトラフィックが含まれていると、ユーザーがサイトで行っている行動を正確に把握できなくなります。

Google シグナルを有効にする:
ユーザーの複数のデバイスにわたる行動を詳しく把握しましょう。 Google シグナルを有効にすると、クロスデバイスのユーザー行動に関する 4 つの新しいレポートを利用できます。

ちなみに最近では Google Analytics の代替として GoatCounter（公式サイト）が人気のようです。

検索エンジン最適化（SEO）

SEO ツールは色々ありますが、無料で使える代表的なものとして次の二つがあります（サイトマップを予め用意する必要があります）：

  • Google Search Console (Google アカウントがあればすぐに始められる、ウェブサイト所有権のために専用のHTMLタグを貼る)
  • Bing Webmaster (Google Search Console をやっていればそこでの設定をインポートできる)

コードの埋め込み

上述の通り、新型ではコードの埋め込みが容易になったので、旧型ではできなかったこと（もしくはやりづらかったこと）を色々やってみました。

JavaScript の埋め込み

最終更新日の自動表示

旧型の Google Sites だと最終更新日を自動で表示してくれましたが、新型ではこれがなくなったみたいなので、JavaScript で埋め込みました。

LastUpdate.js
document.write("Last Update: " + new Date(document.lastModified))

最近はJavaScriptからTypeScriptに乗り換える方が多いそうなのでTypeScript版も載せておきます。myCompilerで試しに実行すことができます。参考にしたのはこちらです。

LastUpdate.ts
const message:string = "Last Update: " + new Date();
console.log(message);

更新時刻まで表示したくない場合は次の書き方もできます：

LastUpdateJPN.js
var day = new Date(document.lastModified);
var y = day.getFullYear();          // Year
var m = day.getMonth() + 1;         // Month
var d = day.getDate();              // Day
document.write("最終更新: " + y + "年" + m + "月" + d + "日");
LastUpdateJPN.ts
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth()+1;
const date = today.getDate();
const message:string = "最終更新: " + year + "年" + month + "月" + date + "日";
console.log(message);

コピーライト年号の自動更新

これも JavaScript 等を使えばできます：

copyright.html
Copyright &copy; 2000<script type="text/javascript">new Date().getFullYear()>2010&&document.write("-"+new Date().getFullYear());</script>, All Rights Reserved.

const today = new Date();
const year = today.getFullYear();
const message:string ="Copyright " + year + ", All Rights Reserved";
console.log(message);

各種プラグインの埋め込み

アクセスカウンターの埋め込み

無料でアクセスカウンターを埋め込む方法は色々ありますが、私はこちらを使ってます。

シェアボタンの埋め込み

ウェブサイトを Facebook 等の各種SNSでシェアしてもらうためのボタンも埋め込みました。以下、私が無料で使っているものの一覧です（海外製のサービスが大半です）:

純正のシェアボタン
複数のシェアボタンを同時に埋め込むサービス

こちらはすべて海外製ですが、これらを使えば日本国内ではなじみのないサービス（例えば WhatsApp, Telegram, Pinterest, Reddit, LinkedIn, Evernote など）にも対応できます。

他に埋め込んだもの

スライド関連
  • SlideShare
  • SpeakerDeck
  • slides.com（日本語でのレビューはこちらにあります）
Google 系のサービス

Google Sites ではもちろん Google 系サービスのプラグインも埋め込められます。

参考資料

関連サイト

JavaScript 関連

組み合わせて使うと便利なウェブツール

  • Pandoc, Online Converter (いろんなファイルをHTML形式に変換します)
  • TAG index (各種ウェブ制作支援ツールが豊富にあります)
編集リクエスト
1
AlohaTech
Daisuke K@AlohaTech
HTML/Javascript/LaTeX 使用歴5年以上 (過去の仕事で使った研修用資料とか社内勉強会向け資料などを同意のもと投稿しています) クロス投稿をすることもあります。
https://daisuke-kanaizumi.github.io/
ユーザー登録して、Qiitaをもっと便利に使ってみませんか。
  1. あなたにマッチした記事をお届けします
    ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
  2. 便利な情報をあとで効率的に読み返せます
    気に入った記事を「ストック」することで、あとからすぐに検索できます
コメント
この記事にコメントはありません。
あなたもコメントしてみませんか :)
すでにアカウントを持っている方は
ユーザーは見つかりませんでした