ＴＥＳＴLABORATORY

サイト上に配置できるデータの試験設置場です。グーグルサイトはグーグルのアプリサービスと連携して様々なツールを埋め込むことができますが、それぞれがどの様な挙動をするのかは試用してみないとわかりません。ここでは、そうしたツール類の試験設置を通して、今後のサイト運営に役立てています。

プレースホルダはツール類を置く場所を仮置きして予約するためのものです。通常のブラウザでは非表示となりますが、グーグルサイト上では「枠」として認識されます。

メモパッド

Youtubeの動画を埋め込むことができます。埋め込む動画のURLを指定することで、サイト上の任意の場所に設置できます。大きさも「枠」を指定したサイズでリサイズして再生させられますが、Youtubeに飛んで実際の動画データを確認することもできます。

共有活用できるツール類として、グーグルのオフィススートを埋め込むことでグループウェア的な活用ができることを確認していますが、これらは書き込めるという性質上、ホームページ上のコンテンツとして活用するのは未定です。一般にフォームなどはすでに活用されていますが、その他のツール類は試験を進めていく中で使用していくかもしれません。

埋め込みコード（ｈｔｍｌタグ）の適用

左の表示物は埋め込みコードの適用例となります。

　埋め込みコードは左の様に入れることもできますが、これはグーグルサイトの便利な編集機能（基本的な「テキストボックス」「画像」など）の適用範囲外となるため、埋め込みコード内のテキストや画像の変更は、全て「打ち込み」をしないといけません。

　埋め込みコードは外部の派手な機能を導入することが出来る自由度がある代わりに、グーグルが提供する利便性を放棄するという前提の上に成り立っています。

　コードを活用できる程の方はグーグルの便利機能に依存はしていないと思いますが、複数人で管理している場合に、コード管理が出来ない方がいると、こうした埋め込みコードは編集難易度を上げる面倒な存在かもしれません。

※２０２５年６月以降あたりからホームページのタイトル等にこの「埋め込みコード」の適用を始めています。適用されているボックスは角丸になっていますが、これらの指定もスタイルシート上で指示を出しています。透明度や文字の大きさなどの指定を入れることで、細かい編集を画像データに頼らずに行えるのが利点です。（画像データで表示すると容量が大きくなり表示も遅くなりますが、タグで指定する場合は低容量かつ高速に処理できるという利点があります）

そもそもホームページってどうやってできてるの？

歴　史

　管理人の記憶を辿ると、ホームページが作られ始めた黎明期、１９９０年代後半頃、ネットスケープ社の「Navigator（ナビゲーター…現在のFirefoxというブラウザの元）」が出来たころに基本的な表示として「ＨＴＭＬ（エイチティエムエル）」というコードが定義されていきました。その後、マイクロソフト社の「InternetExplorer（インターネットエクスプローラ）」が事実上の標準として普及したことで、他のブラウザで見るとInternetExplorerに依存してデザインが壊れるという問題が出てきてからは、「ＣＳＳ（カスケーディングスタイルシートの略）」というデザインの設計書を定義して、コード依存による崩壊を防ぐ方向にシフトしていきました。

　特定の企業のコードに依存することで表示が崩壊するリスクや、営利企業のコードを使用することで発生する脆弱性を回避するために「ＨＴＭＬ５（エイチティエムエルファイブ」と「ＣＳＳ３（シーエスエススリー）」というコード定義が出てきた頃に、これらを標準的にサポートするブラウザとして、Apple社が「Safari（サファリ）」を開発し、そのSafariのコアを公開した「Webkit（ウェブキット）」ベースで開発されたグーグル社の「Chrome（クローム）」が登場し、スマートフォンの普及が進むことで現在のホームページのスタイルが確立していきました。……という記憶があります。

つくり

　ＨＴＭＬは「＜・＞本文＜／・＞」というタグで挟まれたアイテムにタグの指定する効果を適用するという作りで出来ています。

<html><body>●●のホームページ</body></html>

　上の様な文章でホームページ全体が構成されていて、中身の色々は「●●のホームページ」の所に色々と書き込まれている感じです。基本的にこの構造自体は黎明期から変わりません。ただ、現在はここに<style></style>が追加され、別途どのように表示するかを指定するスタイルシートを作成し、外部から読み込んで共通的に適用させるということが行われているので、ブラウザの右クリックで見られる「ページのソースを表示」では一見しても分からないくらい複雑化しています。

※スタイルシートが出る前のウェブページは、それぞれ＜BODY＞タグの中に個別に書体の大きさと色、背景の色や画像を呼び出すという指定をしていましたが、この指定だと複数のページを同時に一新するといったニーズに応えられないため、別ファイルとしてページの表示情報の指定を作り、そのファイルを更新することで全てのページに反映させるという仕組みが作られたわけです。

　ＨＴＭＬはプログラミング言語とは違うものですが、それに近い形でホームページというものを表示させることが出来る仕組みです。高度な部分は実際にプログラムを利用する「jQuery（ジェイクエリー）」というオラクル社が開発したプログラミング言語「Java」を利用したコードを適用する仕組みも有志が開発しており、それらのコードのライブラリーが無料で公開されていますから、その命令を利用して高度な動きのあるホームページを開発することができます。

※jQueryライブラリの呼び出しは＜script＞タグを指定してライブラリのリンクを張るという形で呼び出します。この辺はスタイルシートを呼び出す時と似ていますね。ウェブサイトの構成情報はHTMLの素の情報以外は外部ファイルとのリンクで成立していることが多いです。

　教育現場では「Scratch」などのプログラム学習用ソフトを利用したプログラミングの指導が行われていますが、プログラムの世界でもタグによる囲み指定等は存在しているので、基本的な構造を学ぶという意味では、シンプルなＨＴＭＬのコードは記述後に視覚的にもすぐに表示されることから、わかりやすいプログラムかもしれません。

最近（？）のホームページ事情

　最近はホームページを作るという人が減りました。理由はＳＮＳの普及による発信手段の多様化があります。黎明期は作らないと発信出来なかったのが、掲示板サイト→ソーシャルネット→スマートフォンアプリという変遷を経ていく中で、自分で土台から作る必要が無くなっていったという経緯です。

　また、昔はインターネット接続をするためのプロバイダーは「ホームページ容量」というホームページを公開するためのデータサーバーのスペースを提供していたのですが、それらの提供も売り文句にならなくなり、サービスとしても提供する必要が無くなっていったことで、その存在を知られなくなってしまいました。

　こうして知られなくなって作るという作業をする人が減っていった一方で、ブログサイトなどの日記を公開するサービスを利用する人も一定数おり、それらが受け皿になっていきました。

　現在でもホームページを運営している人は、過去と違って色々と自由がある一方で、高度なデザインを適用するには技術を勉強しないとできないなど、ハードルも上がっていきました。もちろん、昔ながらを続けることもできますが。

　昔は回線スピードが遅かったので、ホームページも低用量のデータで作る必要がありました。

　回線スピードは１９９０年代は１４．４ｋｂｐｓ～５６．４ｋｂｐｓ（アナログモデム）、２０００～２００５年代は６４ｋｂｐｓ（ＩＳＤＮ）～８Ｍｂｐｓ（ＡＤＳＬ）、２００６年～２０１０年頃は２５Ｍｂｐｓ～５０Ｍｂｐｓ（ｘＤＳＬ・光）、２０１０年代以降は１００Ｍｂｐｓ以上のスピードが出る光回線も登場するという流れです。

　数字を言われても分からないと思いますが、今のスマートフォンの回線スピードが２５Mbps程度は出ると考えて、２５Mは約２５０００ｋｂｐｓなので、初期のＩＳＤＮの６４ｋｂｐｓを考えると約３９００倍高速化したわけです。

　これだけ高速化すれば、初期の頃の足かせは全部消えてしまいました。昔は画像も低用量で作る必要がありましたが、現在は圧縮無しのそのままのデータでも表示できてしまうほどです。動画データ等を使用して動きを演出しても全く問題無い時代になった現代のホームページは、煌びやかで美しいデザインが沢山溢れるようになりました。

　学校現場でのホームページの活用については、普及が進んだＳＮＳを活用した発信の場合もあれば、十年以上前から設置運営されている昔ながらのホームページのところもあります。これは設置した時期の事情によります。公立の小中学校は職員が数年で異動することから、同じ担当者がずっと管理しているわけではありません。そのため「残せる」形での運営が重要なため、だれでも管理できる形で運営が続けられるという流れとなります。そうした事情の中で続けられると判断されたのが現在の学校のホームページの形かもしれません。

以下は新しいレイアウトテスト　画像表示とスクロールの活用　グーグルサイトの機能としては画像のアップロードをしているのみになります。画像内の編集は画像編集ソフトに依存する形になるので、グーグルサイトのみで完結しない点が欠点。画像編集が出来る管理者が引き継いだ場合は自由度を維持できます。

　初期のホームページの編集では、一つの大きな画像データを表示させるのではなく、パズルのように幾つかの画像に分割して表示させる手法がとられることがありました。その手法を「スライス」と呼んでいたと思いますが、小さな画像ファイルは読み込み時間が短いため、それら小さな画像を順に表示させた方が、大きな画像を一つ表示させるより早いためにとられた手法です。

　しかし、スライスは位置をうまく指定しないと崩れるという問題がありました。

　例えば猫の画像を表示させるのに、頭、胴体、足、しっぽという感じに分割した場合、それぞれがズレてしまうとおかしな画像になってしまいます。単純な指定ならズレないのですが、個別のパーツに独自の変化を与えるために複雑に分割していた場合、ズレてしまうと意図した表現が出来なくなってしまうといった問題があったり、ＯＳ（オーエス：WindowsやMacOSなどの基本ソフト）の違いによって画面の解像度が違う（Windowsは９６dpiであったのに対し、Macは７２dpi）ことで画像のサイズに違いが生じていたりと、「画像の位置合わせ」というのはなかなか難しいものでした。

　現在のホームページでは、昔の様な細かいスライスは行わなくても読み込みに困ることはなくなりました。過去の時代の細かい工夫をせずとも誰もが自由に表現することができるという意味で、本当に楽な時代になりました。

Page updated

Report abuse