ホーム 記事一覧 ブック DH週間トピックス 検索 このサイトについて
English
TimelineJS:スプレッドシートで作るインタラクティブ年表ガイド

TimelineJS:スプレッドシートで作るインタラクティブ年表ガイド

はじめに 歴史的な出来事の流れや、プロジェクトの進行過程を分かりやすく伝えるには、年表(タイムライン)が最も効果的な手段の一つです。しかし、見栄えの良いインタラクティブな年表を作成するには、通常はプログラミングの知識が必要とされます。 TimelineJS は、ノースウェスタン大学の Knight Lab が開発したオープンソースのタイムライン作成ツールです。Google スプレッドシートにデータを入力するだけで、美しいインタラクティブな年表を自動生成できます。ライセンスは MPL-2.0 で、無料で利用可能です。 TimelineJSの特徴 1. プログラミング不要 TimelineJSの最大の魅力は、コードを一切書かずにタイムラインを作成できることです。Knight Labが提供するGoogleスプレッドシートのテンプレートにデータを入力し、公開設定を行うだけで完成します。 2. メディアの統合 各イベントには、画像、動画、音声、ツイート、Wikipedia記事など、さまざまなメディアを埋め込むことができます。URLを指定するだけで自動的にメディアが表示されるため、視覚的にリッチなタイムラインを簡単に作れます。 対応メディアの例: 画像(JPEG、PNG、GIF) YouTube / Vimeo の動画 SoundCloud の音声 Twitter のツイート Wikipedia の記事 Google Map の地図 Flickr の写真 3. 美しいデザイン 生成されるタイムラインは、モダンなデザインで視覚的に洗練されています。レスポンシブ対応のため、PCでもスマートフォンでも快適に閲覧できます。スライド間のアニメーション遷移も滑らかです。 4. 多言語対応 TimelineJSは60以上の言語に対応しており、日本語でのインターフェース表示も可能です。日付フォーマットも各言語に合わせて自動調整されます。 作成手順 ステップ1:テンプレートの準備 TimelineJS公式サイトにアクセス 「Make a Timeline」セクションの「Get the Spreadsheet Template」をクリック Google スプレッドシートのテンプレートが開くので、コピーを作成 ステップ2:データの入力 スプレッドシートの各列にデータを入力します。主要な列は以下の通りです。 列名 説明 例 Year 年 1868 Month 月(任意) 1 Day 日(任意) 3 Headline イベントのタイトル 明治維新 Text 説明文 日本の近代化の始まり… Media メディアURL https://example.com/image.jpg Media Credit メディアのクレジット 国立国会図書館 最初の行(Title slide)はタイムライン全体のタイトルスライドになります。 ...

【Omkea S モジュール紹介】Timelineモジュール

【Omkea S モジュール紹介】Timelineモジュール

概要 Omeka Sでタイムラインを作成するモジュール「Timeline」の紹介です。 https://omeka.org/s/modules/Timeline/ インストール Omeka Sの一般的な方法で、本モジュールをインストールできます。以下、インストール方法の例です。 cd omeka-s/modules wget https://github.com/Daniel-KM/Omeka-s-module-Timeline/releases/download/3.4.16.3/Timeline-3.4.16.3.zip unzip Timeline-3.4.16.3.zip 使い方 本モジュールを使用するには、サイトでページを作成する必要があります。以下の例では、「Timeline」という名前のページを作成しています。 そして画面右部の「新規ブロックを追加」からTimelineを選択します。デフォルトでは、dcterms:dateに格納された値を対象に、年表へのマッピングを行います。 そこで、アイテムのdcterms:dateフィールドに日付の値を入れてみます。 その結果、以下のように、年表を用いたアイテムの検索が可能になります。 まとめ 年表を用いたアイテムの可視化の参考になりましたら幸いです。

Nuxt.jsでvis.jsを使用する方法を紹介するGitHubリポジトリを作成しました。

Nuxt.jsでvis.jsを使用する方法を紹介するGitHubリポジトリを作成しました。

概要 Nuxt.jsでvis.jsを使用する方法を紹介するGitHubリポジトリを作成しました。 github.com 以下のページから、デモサイトをご確認いただけます。 https://nuxt-visjs.netlify.app/ 詳細 Nuxt.jsはVue.jsをより効果的に使えるフレームワークです。 またvis.jsは、ネットワーク図やタイムラインを作成することができる可視化ライブラリです。 visjs.org 今回、Nuxt.jsでvis.jsを使用する方法を紹介するGitHubリポジトリを作成しました。 「Timeline」「Network」「Graph2d」による基本的な可視化例を掲載しています。 Nuxt.jsを用いたvis.jsの利用に際して、お役にたてば幸いです。