Fusion360で作成したSTLをThree.jsを使ってNetCommons2の内に表示します。なるべく簡単にするために、Three.jsのSTLLoaderを使って表示します。
　まず、https://threejs.org/より、Three.jsをダウンロードします。ダウンロードした、「three.js-master.zip」より、下の3つのファイルをNetCommonsにアップロードし、HTML表示でアップロードIDの数字をメモしておきます。
　three.module.js（./?action=common_download_main&upload_id=416）
　STLLoader.js（./?action=common_download_main&upload_id=420）
　OrbitControls.js（./?action=common_download_main&upload_id=421）
　次に、表示したいSTLをNetCommonsにアップロードしますが、通常では拡張子がSTLのファイルはアップロードできません。NetCommonsのコントロールパネルの「セキュリティ管理」－「一般設定」－「アップロードファイルの許可拡張子」に「stl」を追加すればアップロードできるようになりますが、面倒であれば、STLファイルの拡張子を「.jpg」などに書き換えてアップロードしてもSTLLoaderでちゃんと読み込めます。
　R05 フリクションイレーサー.stl（./?action=common_download_main&upload_id=442）
　下のコード「STLLoader.html」は、Three.jsの「webgl_loader_stl.html」を参考に、と言うか、大部分をコピーして作成しました。コードのimportmap部分をthree.jsのリンクに、STLLoaderの引数をSTLのリンクに変更し、NetCommonsにアップロードします。
　STLLoader.html（./?action=common_download_main&upload_id=472）
　iframeでアップロードしたhtmlファイルを表示したものが、下になります。マウスで向きや大きさを変えることができます。
【R05.02.06追記】iPadで見たところ、表示されていなかったので調べたところ、iOSのブラウザではimportmapをサポートしていないようです。解決策としては、es-module-shims.jsをimportmapの前に読み込んでおくとよいようです。
　es-module-shims.js（./?action=common_download_main&upload_id=467）
【STLLoader.html】

　NetCommonsでサーバにアップロードしたフォントを使用するには，まず，フォントを「ファイルの挿入」でアップロードする。ただし，拡張子が.ttfや.otfのファイルは「アップロード不可のファイル形式です。」とエラーになり，アップロードできない。これは，フォントの拡張子を「.jpg」などに変えてからアップロードすることで回避できる。
　このアップロードしたファイルのURLを「@font-face」で指定することで，フォントを使用することができる。（下のコードの「./?action=common_download_main&upload_id=219」がアップロードしたファイルへのリンク）
　ただし，chromeなどはこれでよいのだが，IE11は.ttfファイルを指定してもフォントが適用されない。.ttfを.eotや.woffに変換してから@font-faceで指定する必要がある。武蔵システムの「WOFFコンバータ」等を使って，.ttfを.eotや.woffに変換し，.ttfと同様に拡張子を.jpgに書き換えてアップロードし，.ttfや.otfと並列で指定する。

　上のhtmlは下のように表示される。

---

参考にしたページ
・IEでwebフォントを表示させる

　NetCommons2の「TEX表記文字の挿入」では，不等号の「≦」や「≧」が表示できない。「≤」は「\leq」，「≥」は「\geq」として定義されているが，「\leqq」や「\geqq」は定義されておらず，例えば「x \leqq y」のように使用すると，

　　

 と表示される。
　しかたがないので，「＜」と「＝」を組み合わせて「≦」のように見えるようにする。

　　x\raisebox{3}{\relstack{<}{=}}y　　→　　　

　　x\raisebox{3}{\relstack{>}{=}}y　　→　　　

　文の途中に数式を挿入すると， のように上に飛び出し，見づらい気がする。そこで，以下のようにスタイルで指定して，文と数式を上下中央揃えにする。


　のように文と数式を上下中央揃えになる。 

　本サイトは，さくらインターネットのレンタルサーバを使用している。サーバーコントロールパネルのサーバ情報によると，このサーバのOSはFreeBSD9.1である。NetCommons2の共通エディタの「TEX表記文字の挿入」は，mimeTeXを使って実現されているが，通常インストールされるバイナリはLinux用とWindows用なので，さくらインターネットのレンタルサーバでは動作せず，「プレビュー」ボタンをクリックしても，表示されず，「決定」ボタンをクリックしても下のようになり，数式が表示されない。

　これを正常に動作させるには，mimeTeXのサイト（http://www.forkosh.com/mimetex.html）より，FreeBSD用のバイナリをダウンロードし，zipの中の「mimetex.cgi」を「/webapp/modules/common/tex/mimetex/」フォルダにアップロードする。アップロードしたら，「mimetex.cgi」のパーミッションを「755」に変更する。
　以上で，さくらインターネットのレンタルサーバにインストールしたNetCommons2の共通エディタの「TEX」ボタンが動作するようになる。

　　

　リンクにマウスをのせたとき，ポップアップでサムネイルを表示させる。

学校だより４月号

左の文字にマウスをのせると，サムネイル画像がポップアップする。 　一見よさそうだが，マウスをのせていないとき，画像は見えないが，opacity 0で文字の右側に「表示されている」ので，右クリックに反応したり，画像の下のリンクがクリックできなかったりする。だからといって，display:none;で非表示にしておき，hover時にdisplay:block;にすると，アニメーションで表示されない。

　display:noneで非表示にしておき，マウスホバー時にdisplay:blockにすると，display:blockのときにDOMが生成されるようで，opacityやtopがアニメーション後の設定になってしまい，結果としてアニメーションで表示されない。transitionプロパティではなく，animationプロパティを使えば，アニメーションで表示されるが，animationプロパティは戻るときに一瞬で戻ってしまい，今ひとつかっこ悪い。
　そこで，height:0pxとoverflow:hiddenで非表示にしておき，マウスホバー時にheightを画像の高さに設定すると，思った通りの動作をするが，heightをautoにするとアニメーションされないので，数値で設定する必要がある。heightが変わるところをアニメーションで表示したくないので，heightのtransition-delayにマイナス値を設定して，heightの変化がアニメーションで表示されないようにする。　

学校だより４月号

他にも，少しかっこよくするため，戻るときのtransition-durationを1sにしてみた。

　上のコードは，heightを数値で指定するので，複数のサイズの異なる画像には共用できない。そこで，max-height:100vhを使えば画像の高さを指定する必要がなく，複数サイズの画像でコードを共用できる。ただし，max-heightはdiv要素には効かず，img要素に直接指定する必要がある。画像にキャプションをつける場合などには使えないので，上のコードを使うことになる。

---

参考にしたページ
・cssだけでホバー時にバルーンポップアップを表示させる
・display: noneはtransitionできないので
・width、heightがautoの要素にtransitionを適用する

　NetCommonsでmp4動画を再生する場合，ファイルの挿入でmp4動画をアップロードした後，table要素の中にHTML編集画面で下のようなコードを挿入すればよい。

上のコードで挿入した左の動画は，IE11，GoogleChromeでは再生されるが，iPadのSafari，iPhoneのSafariでは再生されない。

　しかし，これではiOSのSafariでは再生されないことがわかった。srcを"http://www.yas-s.com/test.mp4"のようなダイレクトリンクにするとSafariでも動画が再生される。また，Youtubeにアップロードしたファイルのダイレクトリンクであれば再生されるようである。しかし，GoogleDrive，OneDrive，NetCommonsにアップロードしたファイルは再生されない。JavaScriptでvideo要素を操作しても再生できなかった。
　１週間ほどいろいろ試行錯誤した結果，JavaScriptでBlobでダウンロードしてから，URL.createObjectURLでsrcに渡せば動作することが分かった。下がそのコードだが，fetch関数にIE11が対応しておらず，実行できない。全体を<script></script>で囲むとIE11で止まってしまう。対応していない関数を無視させる方法が分からなかったので，<script>で小分けに囲んで，IE11が未対応の関数で止まらないようにしてみた。
　iPhoneでは，さらに，videoタグにplaysinline="true"を挿入する必要がある。（コードでvideoElement.playsinline=true;としても動作しなかった。）
　スマートフォンのモバイル表示でも動画を再生するためには，ヘッダー領域ではなく，各記事にBlobダウンロード・src設定部分のscriptを配置する必要がある。PCのみを対象とするなら，scriptはヘッダー領域に１つあればよい。
　なお，このコードはX-UA-CompatibleでIE9互換モードにしていても動作する。

左の動画は，IE11，GoogleChrome，iPadのSafari，iPhoneのSafariのいずれでも自動的に再生され，ループするはずである。

---

参考にしたページ
・モバイルブラウザのビデオ再生がいろいろ変わるので確かめてみた
・使用してるブラウザを判定したい

　iframeの大きさをwidthとheightで指定し，スクロールバーを表示するようにすると，iPadなど，iosのsafariで表示させたとき，width，heightが無視され，iframeの中身の大きさで表示されてしまいます。


　いろいろ試行錯誤し，NetCommons上でこの症状を回避しつつ，もともとの見栄えに近いものにするには，iframeをdivで囲み，下のようなコードにするとよいことが分かりました。
　例によって，NetCommonsの共通エディタでは，<style>は小分けにする必要があります。また，<div style="～">のように記述すると，共通エディタによって自動修正され，"-webkit-overflow-scrolling:touch;"などが消えてしまいますので，<style></style>の形で記述する必要があります。
　Haederエリアの「お知らせ」に仕込んでおけば，すべての記事で有効になるので便利だと思います。

　InfoWindowの中のimgにアニメーションを設定したら動くかな？
　試してみたら，見事，クルクル回りました。
　下のInfoWindowの中の校章にマウスをのせてみてください。

　下のHTMLを別ファイルで作成し，NetCommonsの共通エディタの「ファイルの挿入」でアップロードして，iframeで表示します。（GoogleMapsAPIのKeyはご自分のKeyに置き換えてください。）
　IE11では，img要素のアニメーション中にスクロールバーが出てきてちらつきます。（chromeやiosのsafariではスクロールバーは出ない。）InfoWindowのdiv要素にoverflow:hidden;を指定するとIE11でもちらつかなくなりました。

　GoogleMapsのデフォルトの色は淡い色遣いで，少々見にくいと感じます。そこで，StyledMapTypeを定義して，道路の色のコントラストを強めてみました。


　下のHTMLを別ファイルで作成し，NetCommonsの共通エディタの「ファイルの挿入」でアップロードして，iframeで表示します。