1｜小テスト

前回までの理解度の確認のため、小テストを行います。各自で資料等は見ずに5分程度、各自で取り組んでください。

出席は課題の提出をもって確認します。必ずやっておくようにしてください。

前回の課題の復習

前回は繰り返しの記述として、for文を扱いました。この考え方と書き方はぜひ理解して身につけておきましょう。

今回はオプション課題のみ解答例を紹介します。

function main() {
  let max;
  for (let i=0; i<3; i++) {
    let input = Number(window.prompt(i+"番目の数字を入力してください。",""));
    if(i == 0) {
      max = input;
    } else if(max < input) {
      max = input;
    }
    let child = document.createElement("li");
    child.innerText = input;
    document.getElementById("list").appendChild(child);
  }
  alert("最大値は"+max+"です");
}

2｜サーバサイドプログラミング

前回まではJavaScriptという言語によって、Webブラウザ上で動作してWebページの内容や見た目を変える技術を学びました。このようにWebブラウザ（閲覧するユーザのコンピュータ）で動作するプログラム技術をクライアントサイドの技術といったり、フロントエンド技術といったりします。

一方でWebの様々なシステムを実現するには、Webサーバ側で動作するシステムも必要となります。例えば乗り換え案内の検索システムを想像すると、検索画面でユーザが入力した駅や時刻情報をもとに電車を検索し、その結果を再び結果を表示するWebページとして提示しています。この例のようにデータベースに格納されたデータから検索するなど、ユーザのコンピュータ上で完結しない処理を行う際には、Webサーバで動作するプログラムを作成します。Webサーバ側で動作するプログラム技術を、サーバサイドの技術といったり、バックエンドの技術といったりします。

別の例として、オンラインチャットのようなシステムを想像してみましょう。細かい機能は省略してものすごく雑に考えると、(1) 最初はメッセージを入力するフォームがHTMLとしてユーザに提示されます。 (2) ユーザがこのフォームから書き込みを送信すると、サーバ側のプログラムがデータベースに受け取った投稿内容を保存します。(3) サーバ側のプログラムが、データベースに保存されたそれまでのメッセージを一覧できるようにHTML文書を生成すると、ユーザから見ると書き込みが反映された画面が表示されます。

このようにWebブラウザで表示されるHTML（このHTMLの見た目をCSSで飾ったり、JavaScriptで動かしたりすることもできる）とは別に、サーバ側でメッセージを受け取って保存したり一覧して表示したりするプログラムを作成するのが、サーバサイドでのプログラミングとなります。

サーバサイドでのプログラムは、Webブラウザを通してサーバに送信されてくるユーザからの要求を入力として、それに応じたHTML文書を生成して出力するプログラムとなります。原理上はどのような言語でもHTML文書をprint（に相当する命令）で出力できれば作成可能ですが、実際には文字列の扱いが得意だったりデータベースとの連携がしやすかったりWebシステム開発に向いたプログラミング言語を使うことが多いでしょう。具体的には、rubyやperl、pythonやPHPなどの言語がよく使われます。

この授業の中ではWebサーバ上で実行できるプログラミング言語をさらに新しく学び、サーバサイドでのプログラム開発を行うというところまでは難しいため、実際のプログラミングは今回は行いません。こうした技術は「インターネット情報システム」や「応用演習（ネットワークシステム）」などで扱います。

3｜Webサービス

Webブラウザ側でなくWebサーバ側でシステムを開発する理由として、サーバに蓄えられるデータを活用する場合が挙げられます。電車の時刻表だったり、販売している商品であったり、ユーザからの投稿であったり、そのデータ自体に価値があるような場合、それをWeb上のサービスとしてユーザに提供することがあります。

Web技術を用いて提供されるサービスを広い意味でWebサービスと呼びます。また狭い意味では、そうした情報を定められた技術を用いて提供するシステムをWebサービスということもあります。今やWebの利用目的は単にWebサイトの閲覧のみならず、天気予報や電車の乗り換え検索、他者との交流のためのSNSなど、多種多様なWebサービスの利用も中心的な位置を占めています。

Webサービスの構築にはユーザからどのような情報を得て、他のどのような情報源を参照して、どのような情報をユーザに提示するのかをすべて設計し、Webサーバにおけるプログラミングやデータベースの扱いなど複雑で高度な技術が必要となりますが、設計次第で様々な機能をユーザに提供することができます。

今回は既存のWebサービスを自分のサイト上で利用することによって、外部の情報によって表示される内容に変化があるようなWebページを作ってみましょう。

Webサービスが提供する情報の埋め込み

Webサービスによっては、自らの管理する情報を外部のページに埋め込める機能を提供しているものがあります。その方法については各サービスの案内を参照するのが正確ですが、ふたつの例を示します。

X（旧Twitter）のタイムラインの埋め込み

Tweets by senshu_univ

例えば指定したユーザの最新のツイート（ポスト）を一覧で表示し埋め込むことができます。最新の情報をX（Twitter）で更新し、それをWebサイトの利用者にも見てもらうような利用が想定されます。上記の専修大学 @senshu_univ の公式Xの投稿を埋め込むコードは、以下のようになます。強調部分を適宜変更することで、表示したいユーザを変更したり、埋め込みの表示サイズを変更したりすることができます。さらに高度な設定はX公式の機能を用いることで指定することができます。（公式の記載がまだ「ツイート」となっていますが、適宜読み替えてください。）

<a class="twitter-timeline" data-width="400" data-height="300" href="https://twitter.com/senshu_univ">Tweets by senshu_univ</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

参考サイト

• タイムラインを埋め込む方法

Googleマップの埋め込み

Googleマップ上の指定した地図を自らのサイトに埋め込むことができます。Googleマップを開き目的の地図を表示した後、メニューから地図の埋め込みを選択すると、埋め込み用のコードが生成されます。これを自らのページにコピー＆ペーストします。

参考サイト

• 他のユーザーとマップやルートを共有する

Webサービスを組み合わせて利用する

ここまでの例は、特定のWebサービスが提供する機能を直接利用して情報を表示していました。しかし複数のWebサービスの情報を組み合わせることで、より目的に沿った情報提示ができるようになるかもしれません。

IFTTTという複数のWebサービスを組み合わせるためのWebサービスを紹介します。IFTTT（イフト）とはIf this, then thatから名前をとっており、「もしあるWebサービスでこうならあるWebサービスでこうする」というルール形式でWebサービスを組み合わせることができるWebサービスです。

IFTTTで利用できるサービスはIFTTTのチャンネル一覧に記載されている通り、多くのWebサービス、そしてWebサービス以外にもスマートフォンやスマートスピーカーの機能なども含まれており、アイディア次第で高度なWebプログラミングをすることなく便利なサービスを自ら作成することができます。サイトの記述はすべて英語ですが、日本語での参考情報も見つかるので適宜参照するとよいでしょう。

以下の内容は紹介として記載していますが、課題としてはオプションの出題とします。興味のある人は試してみてください。

参考サイト

• 【初心者のイフト入門】IFTTTの使い方とレシピの作り方を徹底解説！WEB作業を効率化しよう！！

IFTTTを利用するには、まずIFTTTのユーザ登録を行う必要があります。上記参考サイトを参考に登録しましょう。IFTTTへのユーザ登録後は、利用する外部のサービスごとにも設定や、場合によっては登録が必要となります。やりたい内容によってはいくつものWebサービスに登録する必要がありますが、各自確認してそれぞれの判断で登録してください。

例題として、明日の天気が雨だったら、明日はポイント2倍という内容をツイートするような連携（IFTTTではレシピと呼ぶ）を作ってみることにしましょう。

現在IFTTTの無料ユーザではXへのポストはできなくなっているようです。以下を実際に行う必要はありません。

IFTTTにアクセスし、「Sign up」からユーザ登録をします。登録のメールアドレスは何でも構いませんが、専修大学のGoogleアカウントでも登録できます。

実際にレシピを作成する際には上部のメニューからCreateを選択します。

表示された画面で、まず「If This」をクリックしてまず条件となるWebサービスを設定します。

表示された画面で「Weather」と入力し、天気に関連するサービスを探します。今回は「Weather Underground」というサービスを使います。

すると天気予報の情報を用いる条件（トリガー）がたくさん表示されます。英語を読むと実にいろいろなことができることがわかると思いますが、今回はこの中から「Tomorrow's forecast calls for」というものを選びます。これは「明日の天気が〜だったら」というような意味です。

選ぶと、条件となる天候と、天気を確認する場所を設定する画面に進みます。雨が降ったらを作りたいので「Rain」を選択します。（※実際に明日の予報が雨でないと今は動かないので、実験としては各自で予報を確認して別の条件を設定してもよいと思います。明日「晴れ」ならば「Clear」、「曇り」ならば「Cloudy」です。）

トリガーを作成後は、「Then That」を選びます。再びサービスの選択画面へ進みますので、「Twitter」を検索してみましょう。（「X」でなく「Twitter」で見つけられます。Xアカウントがない場合は、Emailを検索し、自分にメールするようにしてみてもよいでしょう。）

Twitterを選び、トリガーは「Post a tweet」を選びます。

実際に投稿したいテキストを設定して、完了へ進みます。（ Xの規約上、毎回同一の文章が投稿されるようなプログラムは作れないため、この例では天気予報のURLを載せるようにしています。）

適当にタイトルをつけて保存してください。

出来上がったレシピを開き、右上の「Settings」へ進むと、再編集ができます。「Check now」というボタンをクリックすれば天気を確認してくれるので、うまく動かない場合、明日の天気を確認して設定を変更し、改めてクリックするなどしてみてください。

これで翌日が雨の予報の時に自動的に指定した内容がツイートされるようになったので、適宜このアカウントのタイムラインをページに埋め込むなどすれば閲覧者に天気に応じた情報提供を行うことができるようになります。

IFTTTで扱えるチャンネルごとに、利用できる機能はさまざまです。興味を持った人は適宜遊んでみると楽しいでしょう。IFTTTの無料アカウントでは、レシピは3つまでの制限があります。またIFTTTに類似したWebサービス連携を行うためのWebサービスは他にもあり、連携できるサービスなどに違いがあります。

4｜課題

課題1

X（Twitter）の埋め込み、Googleマップの埋め込みを、教材に示したアカウントや場所以外でやってみましょう。

記述したHTMLとそのスクリーンショットをレポートにまとめてください。

課題2（オプション）

興味と余力があれば、IFTTTをいろいろ見て周り、何か適当に遊んでみてください。作ってみたレシピとその実行結果を、いくつでもやっただけレポートにまとめてください。

ただし新たに登録が必要になったり、よくわからないサービスやうまく動かないサービスもあるかもしれません。余力に応じてできる範囲で構いません。

課題3

今回扱ったようにユーザの操作と外部の情報源を活用することで、あらかじめ自分で記述した静的なWebページでは提供できない細やかな情報を閲覧者に提供することができるようになります。このことを参考に、自分なりに「便利なWebサイト」を考えてみましょう。今日の演習で扱った技術にとらわれずに、どのような情報源を用い、どのようにユーザが操作するかを自由に考えてみてください。

考えたアイディアをレポートにまとめてください。必要に応じて絵を加えても構いません。絵はPCで描いたものでもよいですが、綺麗でなくても手描きしたものを写真に撮って貼る程度で構いません。