趣味で計算流砂水理

Computational Sediment Hydraulics for Fun

はてブロにインタラクティブなグラフを埋め込む:外部htmlのとりこみ CDNとかiframeとか

今まで,javascriptを直で書いたりとかしてましたが,よく考えたら,htmlをそのままiframeで埋め込むのが楽じゃないかという話です.

結果簡単にできました.

基本的な流れは,

  1. Holoviewsでグラフを作成し,htmlにエクスポート
  2. githubに公開
  3. github上のhtmlをCDN
  4. ブログ上にiframeで取り込み

1.2.は常識なので,3.4.をメモしておきます.

その前に

CDNサーバrawgitが終了

愛用していたRawGitが終了するとのことです.新たなアップロードは不可でこれまで上げたものは,2019/2までは参照可能とのことです.これまでブログに上げたものにも影響がでますね...

rawgit.com

github上のhtmlの公開方法:github pagesの活用

以下を参照.簡単です.

[setting] - [GitHub Pages] - [source] : master branch に変更でsave

www.tam-tam.co.jp

変更が10分くらい反映されません.

いろんなサイトにindex.htmlを作らないと駄目だよと書いてますが,無くても全然大丈夫でした.

  • index.htmlありの場合 : https://[username].github.io/[repositoryname]
  • index.htmlなしの場合 : https://[username].github.io/[repositoryname]/[htmlfilename]

前回の記事の内容をリンクすると,以下の感じです.

https://computational-sediment-hyd.github.io/1DBedVariationMixed/case01.html

iframeとして埋め込む方法

以下を参照.

mmorley.hatenablog.com

上記サイトのとおりですが,普通に埋め込むと,

<iframe src="https://computational-sediment-hyd.github.io/1DBedVariationMixed/case01.html" width="600" height="300" ></iframe>

なので,下のようにスケールを調整.大きめのサイズで取り込んで0.6倍してます.

<div style="width:600px;height:200px;"><div style="width:1000px;"><iframe src="https://computational-sediment-hyd.github.io/1DBedVariationMixed/case01.html" frameborder="0" width="1000" height="333" style="transform:scale(0.6); transform-origin: left top;"></iframe></div></div>

もっと複雑なグラフを作ろうと思うとサーバが必要ですね.

githubの新機能GitHub Actionsがベータ版ですが公開されたようで,自動でデプロイまでやってくれるらしいので,サーバを立てるのもいいですね.

www.atmarkit.co.jp