後期集中授業
統計・引用資料、API・ツール集

コンテストは、審査員などに制作物を必要だと納得させることが必要です。
説得材料のひとつに、信ぴょう性のあるデータを持ってくるという方法があります。
現状分析や制作物のアイデアのため、活用してください。

統計データ

統計データを探せるサイトが色々あります。自分の知りたいデータにあわせてサイトを使い分けてみましょう。

「総合統計書」は、政府統計を網羅的にまとめた報告書です。
日本の統計データ、世界各国の統計データや都道府県別・市区町村別のデータも探すことができます。

名称 内容
日本統計年鑑 日本の国土、人口、経済、社会、文化などの広範な分野にわたる基本的な統計データを、網羅的かつ体系的に収録したものです。
日本の統計 日本の国土、人口、経済、社会、文化などの広範な分野に関して、基本的な統計を選んで手軽に利用しやすい形に編集したものです。
世界の統計 国際社会の実情や世界における日本の位置付けを、統計データを用いて正確にみることを目的に編集したものです。
Statistical Handbook of Japan 統計を通じて日本の最近の実情を分かりやすく紹介した英文の刊行物です。人口、経済、社会、文化などの各分野について,統計表・グラフ・地図・写真を交えて解説しています。
社会生活統計指標
―都道府県の指標―
人口・世帯、自然環境など13分野で体系化した社会・人口統計体系で整備した統計指標の中から、都道府県別の主要なデータを取りまとめたものです。
統計でみる都道府県のすがた 「社会生活統計指標―都道府県の指標―」の中から、主な指標値を選定して、各都道府県の指標が一覧できるように再編成したものです。
統計でみる市区町村のすがた 人口・世帯、自然環境など13分野で体系化した社会・人口統計体系の中から全国の市区町村を対象としたデータを取りまとめたもので、主な基礎データを掲載しています。

Web API

API にブラウザ API とサードパーティ API のおおよそ 2 つのカテゴリーで分けられます。
Web API | MDN

ブラウザ API

ブラウザー API は Web ブラウザーに組込まれていて、ブラウザーやコンピューターの環境の情報を取得し、これを使って役に立つややこしい事を行えるようにするものです。
例えば Geolocation API は位置情報を取得するための簡単な JavaScript 構造を提供するので、例えばグーグルマップにあなたの居場所を表示するような事ができます。
裏で実際にはブラウザーは低レベル (例えば C++) の複雑なコードをいくつか使ってデバイスの GPS 機器 (あるいは位置情報を得られる他のなんだか) と通信し、位置情報を取得し、コードから利用できるようにブラウザー環境に情報を戻しています。※ここでもこの複雑な事柄は API で抽象化され隠蔽されます。

最も一般的なブラウザー API のカテゴリは

  • ブラウザーで読み込んだ文書を操作するための API。一番目にする例は DOM (Document Object Model) API で、 HTML と CSS を操作できます — HTML を作成したり削除したり書き換えたり、動的に新しいスタイルをページに適用したり、などなど。
  • サーバからデータ取得をする API で Web ページの一部を書き換える事はとてもよく行なわれます。XMLHttpRequest と Fetch API が含まれています。Ajax という言葉を聞いた事があるかもしれませんが、これがこのテクニックの呼び名です
  • グラフィックスを描画したり操作する API は多くのブラウザーがサポートしています。最も知られているものには Canvas と WebGL があり、HTML の <canvas> 要素上にあるピクセルデータを書き換えて 2 次元や 3 次元のシーンを作成するのに使えます。
    WebGL では、Three.jsを利用するのが一般的です。
  • 動画と音声の API HTMLMediaElement や Web Audio API や WebRTC のような API を使うと、 マルチメディアを使ってとても面白い事ができます。
  • デバイス API は基本的に Web アプリで使えるような形で、今時のハードウェアデバイスのデータを操作したり取得する API です。デバイスの位置データにアクセスして地図上にあなたの居場所を書くような位置情報 API についてはすでにお話しました。他の例にはシステム通知を使って Web アプリに役に立つアップデートがあるのを知らせたり(Notifications API を参照)、ハードウェアを振動させたり(Vibration API を参照)などがあります
  • クライアント側でのデータ保持 API は今多くのブラウザーに普及しつつあります。— クライアント側にデータを保存できると、ページを移動しても状態を保存したり、たとえデバイスがオフラインでも動作するようなアプリを作成したいような場合、とても役に立ちます。いくつもの選択肢があり、例えば Web Storage API を使ったキーバリューストアや、 IndexedDB API を使ったもっと複雑なテーブル型データ保存などです

具体的な使い方は、アプリ使用技術(API)に記述しました。

サードパーティ API

サードパーティ API はデフォルトではブラウザーに組込まれておらず、普通はコードと情報を Web のどこから読み込まねばなりません。
例えば Twitter API を使えばあなたの Web サイトにあなたの最新のツイートを表示するような事が可能になります。Twitter API は、Twitter サービスに特定の情報を要求したりするのに使える特別な構造のかたまりを提供します。

  • Twitter API、あなたの最新のツイートをあなたの Web サイトに表示したりするような事に使えます。
  • Mapquest や Google Maps API のような地図の API は、あなたの Web ページ上に地図を使ったあらゆる事を可能にします。
  • Facebook API スイートによって Facebook エコシステムの様々な部品を使ってあなたのアプリを強化できます。例えばアプリへのログインを Facebook のログインで行なったり、アプリ内での支払い、ターゲット広告を出したりなどです。
  • Telegram APIs を使用すると、ボットのサポートに加えて、Telegram チャネルのコンテンツを Web サイトに埋め込むことができます。
  • YouTube API を使ってあなたのサイトに YouTube のビデオを埋め込んだり、YouTube を検索したり、プレイリストを作成したりなどなどできます。
  • Pinterest API は、Pinterest のボードとピンを管理して Web サイトに含めるためのツールを提供します。
  • Twilio API はあなたのアプリで音声・ビデオ電話の機能を作成したり、SMS/MMS を送信したりなどするためのフレームワークを提供します。
  • Mastodon API を使用すると、Mastodon ソーシャルネットワークの機能をプログラムで操作できます。

Web アプリ(ハイブリッドアプリ)制作ツール

Web サイト制作の技術だけでは、利用できない機能があります。NFC とか Bluetooth、バイブレーション、プッシュ機能とか。
https://qiita.com/rana_kualu/items/2e610c78aa8887ca62bb

そこで、そのアプリ用の機能を使うためのフレームワークが数多くあります。最近では、Flutter や React Native が流行のようです。
クロスプラットフォームフレームワーク比較 2022(Flutter, React Native, Xamarin, Unity) - Qiita

挑戦してみたい人は、頑張ってみましょう。

iPhone,Android 実機確認

更新のたびに、データをサーバに上げ、更新するのは大変です。
vs code の Live server の設定をプライベート IP に変更することで iPhone でも確認できるようです。
Visual Studio Code の Live Server を使って実機(iPhone など)でプレビューする方法。(PHP なども可能) - Shibajuku

解説動画制作

企画書と一緒に、解説動画を制作して送付します(場合によっては、Youtube にて限定公開)。
10 月末のコンテストエントリーまでに準備。

動画制作ツール

  • Adobe Premiere Pro
    • 動画の編集といえば Premiere。Rush もあるが、機能が足りなさすぎる。
  • Canva(動画)
    • 手軽にグラフィックが触れるクラウドサービス。動画も扱え、機能も十分。
© 2023, Hideo Kawaguchi in Trident Web Design Department with Gatsby