ＴＥＳＴLABORATORY

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

ＡＩとＩＣＴを追う

　栗山町４校のホームページを管理・運営をしていますサトウジムは、他に近年急速に普及が進みつつあります「ＡＩ」についても取り組んでいます。本町での生成ＡＩの利用については、児童・生徒向けにはまだフルセットの機能の活用という段階に進めておりませんが、ＡＩがどの様なことが出来て、どのような事が出来ないのか等、サトウジムの方で独自に検証を進めております。

　具体的に現状進めているのはＡＩ技術がどの様な方向で進んでいるのか、どのような活用が実際に可能なのか等をＩＣＴの時事情報と共に毎月の学校ホームページのアクセス解析報告として、教育委員会・町内小中学校に向けてメールマガジン的に配信をしています。

　生成ＡＩは２０２５年半ば以降、急速にその機能を高めていて、私の様な素人でもある程度のものやことが出来てしまう程に成長しています。
　近年、小学生からプログラミング学習が始まっていますが、日本国内におけるプログラミング学習、特に小学生向けのものは「概念」的なものを中心にしています。いわばコンピューターはどのように考えて処理をしているのか？　という文法的な解釈の仕方を学び、機械との触れ合い方を学ぶという流れになっていますが、これは国外の教育と比較すると遅いのではないのかという見方もありました。ただ、これは日本語が言語的に文法を半ば無視しても意味が通じるという自由度があるが故に、プログラムを組む際、自由な会話では機械に正しく伝えるプログラムを書く障害になるという面を考慮しての導入編だったと思います。

　ですが、その導入編の配慮もＡＩが歩み寄る形で解消されつつあり、いわゆる「自然言語（自然な会話）」でＡＩに指示を出しても、ある程度意味が通じる意思疎通が可能になりました。このおかげで使用する側は明確なイメージなどコンセプトが有れば、実装はＡＩとのやりとりで形に出来る段階に進んでいます。
　では、現在の導入が無駄になるのかというと、そういうわけでもなく、どちらかというと新たにプログラミング言語を学ぶ手間を省き、機械（ＡＩ）と会話する上でどのように話を考えれば伝わるのかという言語的理解があれば、的確な指示を与える助けになります。

　国外ではＡＩによってプログラマーに求められる能力像が変わると言われ始めています。これまではコーディング（プログラミング言語を用いてプログラムを書くこと）が出来ることが前提となっていましたが、コーディング作業はＡＩに任せ、人間側は企画立案し、的確な指示を出せる采配能力が求められるという話が出てきています。勿論、基礎的なプログラムの知識が無いとエラー発生時に機械の状況が理解できなくてクリアできないというのでは困るので、ある程度の基礎知識は必要ですが、コードを直接人間が構築するという作業は、半ばやらずに済む時代が始まりつつあります。

　日本は言語的な障壁もあり、いわば在野にプログラマーが育たない環境にありました。元々日本語の書体表示は２バイト必要で、１バイトで表現できるアルファベットと比較して、最終的な成果物の容量面で不利な状況があり、さらに欧米で作られたプログラミング言語は欧米の言語を基礎としているために、欧米の文法的解釈に縛られるという面もありました。
　それでも昭和の時代はＩＣＴ技術は最先端の国でした。それは数学的理解が高く、教育も比較的高い水準であり、ある程度の高等教育を修了した人達が主に企業の中で活躍していたというのがあります。しかし、バブル崩壊以降、我が国全体で投資が不足した結果、ＩＣＴ技術では現状はかなり後退した状況にあります。それでもゲーム等は現在でも世界トップの技術力を持つ国として踏みとどまっているとも言えます。
　これは単に投資の量ではなく、企画能力の高さの証明ではないかと思いますが、そうした想像力豊かな人々が多く育つ環境を持つ中で、言語の壁を越えて漫画やアニメや小説など様々なものが世界中に広く影響を与える力として育っています。

　現在の生成ＡＩは自然言語で応答してくれる段階に来ました。これは言語の障壁が取り払われたとも言えます。次は企画する力とＡＩを采配する力さえあれば形に出来ます。その際にこれまで行われてきた機械との「対話」の仕方は大いに役立つと思います。

　さて、そう思うのは、筆者自身でＡＩを使用してソフトウェア開発をしてみた感想というものもあります。現状のＡＩは色々な制約もあります。それでも、その制約のある中でもかなり高度なものを作ることが出来る段階にあることが分かりました。
　学校ではクロームブックの利用が増えていますが、クロームブックはウェブブラウザしか使えません。一応アンドロイドアプリを入れることもできますが、学校現場ではそうしたアプリストア関連はセキュリティ上制限しています。クローム用の有用なものとなるとウェブアプリというウェブサイトの活用が前提になるわけですが、ＡＩはウェブアプリを作成できますので、ＡＩ利用はクロームブックという制限がある環境でも専用ソフトを用意することが可能です。
　専用ソフトというものは高価なものが多いので、それを自前で用意できるということはとても凄いことです。

　今後ＡＩ技術の進展次第で「プログラミング」というもの自体の扱い方が変わっていきそうですが、教育もまたそれに合わせて変わっていくことが予想されます。ですが、現在行われている我が国の教育は無駄にならないと感じました。

フォーム（グーグルフォームを使用）

このような形でフォームを作成することができます。フォームで送信されたデータはスプレッドシートに回答を蓄積する形になります。日付で追うことができますが、他のシステムへの連動は現状ではできません。

予めスプレッドシートを用意しておき、データを反映させるリンクを設定すれば自動で結果を蓄積する一覧表を作成してくれます。スプレッドシートの項目名を変更しても蓄積データとのリンクに変更はありません。

プレースホルダー

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

メモパッド

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

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

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

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

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

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

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

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

おためしボタン１

おためしボタン２

←LABOのトップに飛びます。標準機能のボタンです。特別な機能はありません。
　カーソルを合わせるとドロップシャドウが出る変化があります。

　昔のサイトのサイドボタンメニューみたいな扱いで使ったりできますが、使い勝手は良いのか不明です。使い方次第？　色は１色のみしか選べませんが、一応任意の色を設定できます。（テーマ機能のカスタム設定使用）

　カルーセル機能は通常はサイトのトップメニュー下等のコンテンツ宣伝大型バナーとして設置されるものですが、こちらのカルーセル枠は小さな窓枠のため使い勝手が悪いです。そもそも、通常は各画像に個別のリンクを指定できるのですが、これにはそんな機能もありません。正直何に使えるのか不明です。何のためにあるんだろう……。

　使い道が分からなかったので、校章を色違いに表示するのに使ってみました。本校の校章の指定色はゴールドのものですが、ブロンズのものも存在していますし、シルバー表示で使用することも出来る様にサトウジムがデジタル版を作成しています。通常の使用はゴールドを使用していますが、使用する素材の色に合わせてカラーコーディネイト出来るよう工夫しています。

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

歴　史

　管理人の記憶を辿ると、ホームページが作られ始めた黎明期、１９９０年代後半頃、ネットスケープ社の「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