YAS's VB.NET Tips
 
NetCommons Tips
NetCommons Tips
123
2019/02/04

NetCommonsでサーバにアップロードしたフォントを使用する

Tweet ThisSend to Facebook | by:YAS
 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と並列で指定する。
<style>
  @font-face {
    font-family: inconsolata;
    src: url("./?action=common_download_main&upload_id=219") format("opentype");
    src: url("./?action=common_download_main&upload_id=220") format("woff");
  }
</style>

<div style="font-family:inconsolata">
  inconsolata font<br />
  abcdefg1234567890
</div>

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


参考にしたページ
IEでwebフォントを表示させる
01:06 | 投票する | 投票数(0) | コメント(0)
2019/01/18

mimeTeXで≦や≧を使う

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

  x \leqq y

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

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

  x\raisebox{3}{\relstack{>}{=}}y  →   x \raisebox{3}{\relstack{>}{=}} y
23:26 | 投票する | 投票数(0) | コメント(0)
2019/01/18

文と数式の上下中心を合わせる

Tweet ThisSend to Facebook | by:YAS
 文の途中に数式を挿入すると,y=ax+b のように上に飛び出し,見づらい気がする。そこで,以下のようにスタイルで指定して,文と数式を上下中央揃えにする。

<style>
    img.tex {
        vertical-align: middle;
    }
</style>

 y=ax+bのように文と数式を上下中央揃えになる。 
22:57 | 投票する | 投票数(0) | コメント(0)
2019/01/18

さくらインターネットでの「TEX表記文字の挿入」機能の有効化

Tweet ThisSend to Facebook | by:管理者
 本サイトは,さくらインターネットのレンタルサーバを使用している。サーバーコントロールパネルのサーバ情報によると,このサーバの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」ボタンが動作するようになる。

  x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
22:34 | 投票する | 投票数(0) | コメント(0)
2018/06/03

マウスホバーでポップアップを表示する

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

<style>
.popup_container {
  position:relative;
}
.popup {
  position: absolute;
  top: -50px;
  left: 100px;
  opacity: 0;
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  transiton-property: opacity, top;
  transition-duration: 0.5s;
}
.popup_trigger:hover + .popup {
  opacity: 1;
  top: -80px;
}
</style>
<div class="popup_container">
    <a class="popup_trigger" href="./index.php?key=jobqknn6w-45#_45">
      学校だより4月号
    </a>
    <div class="popup">
        <img src="./?action=common_download_main&upload_id=156" style="border:2px solid rgb(204, 204, 204);" />
    </div>
</div>

 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にしてみた。

<style>
.popup_container2 {
  position:relative;
}
.popup2 {
  max-height:0vh;
  overflow:hidden;
  position: absolute;
  top: -50px;
  left: 100px;
  opacity: 0;
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  transition-property: max-height,opacity,top;
  transition-duration: 1s;
  transition-delay: 1s,0s,0s;
}
.popup_trigger2:hover + .popup2 {
  transition-duration: 0.5s;
  transition-delay: -0.5s,0s,0s;
  max-height: 100vh;
  opacity: 1;
  top: -80px;
}
</style>
<div class="popup_container2">
    <a class="popup_trigger2" href="./index.php?key=jobqknn6w-45#_45">
      学校だより4月号
    </a>
    <img class="popup2" src="./?action=common_download_main&upload_id=156" style="border:2px solid rgb(204, 204, 204);" />
</div>

 上のコードは,heightを数値で指定するので,複数のサイズの異なる画像には共用できない。そこで,max-height:100vhを使えば画像の高さを指定する必要がなく,複数サイズの画像でコードを共用できる。ただし,max-heightはdiv要素には効かず,img要素に直接指定する必要がある。画像にキャプションをつける場合などには使えないので,上のコードを使うことになる。
<style>
.popup_container3 {
  position:relative;
}
.popup3 {
  max-height:0vh;
  overflow:hidden;
  position: absolute;
  top: -50px;
  left: 100px;
  opacity: 0;
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  transition-property: max-height,opacity,top;
  transition-duration: 1s;
  transition-delay: 1s,0s,0s;
}
.popup_trigger3:hover + .popup3 {
  transition-duration: 0.5s;
  transition-delay: -0.5s,0s,0s;
  max-height: 100vh;
  opacity: 1;
  top: -80px;
}
</style>
<div class="popup_container3">
    <a class="popup_trigger3" href="./index.php?key=jobqknn6w-45#_45">
      学校だより4月号
    </a>
    <div class="popup3">
        <img src="./?action=common_download_main&upload_id=156" style="border:2px solid rgb(204, 204, 204);" />
    </div>
</div>


参考にしたページ
cssだけでホバー時にバルーンポップアップを表示させる
display: noneはtransitionできないので
width、heightがautoの要素にtransitionを適用する
01:13 | 投票する | 投票数(1) | コメント(0)
2018/06/01

NetCommonsにアップロードしたmp4をiOSのSafariでインライン再生する

Tweet ThisSend to Facebook | by:YAS
 NetCommonsでmp4動画を再生する場合,ファイルの挿入でmp4動画をアップロードした後,table要素の中にHTML編集画面で下のようなコードを挿入すればよい。
<video src="./?action=common_download_main&upload_id=101" loop="true" autoplay="true" muted="true" />

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

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

<script>
function ie(videoElement,url) {
  videoElement.src=url;
  videoElement.play();
}
</script>
<script>
function other(videoElement,url) {
  fetch(url).then(response => {
    return response.blob();
  }).then(blob => {
    videoElement.addEventListener('loadedmetadata',  () =>  {
      videoElement.play();
    });
    videoElement.src = URL.createObjectURL(blob);
  });
}
</script>
<script>
function videoInit(id,url) {
  var videoElement=document.getElementById(id);
  videoElement.loop=true;
  videoElement.muted=true;
  var userAgent=window.navigator.userAgent.toLowerCase();
  if (userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
    ie(videoElement,url);
  }else{
    other(videoElement,url);
  }
}
</script>

<script>
videoInit("video1","./?action=common_download_main&upload_id=101");
</script>

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


参考にしたページ
モバイルブラウザのビデオ再生がいろいろ変わるので確かめてみた
使用してるブラウザを判定したい
20:28 | 投票する | 投票数(1) | コメント(0)
2018/05/29

iPadでiframeの大きさが無視される

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


 いろいろ試行錯誤し,NetCommons上でこの症状を回避しつつ,もともとの見栄えに近いものにするには,iframeをdivで囲み,下のようなコードにするとよいことが分かりました。
 例によって,NetCommonsの共通エディタでは,<style>は小分けにする必要があります。また,<div style="~">のように記述すると,共通エディタによって自動修正され,"-webkit-overflow-scrolling:touch;"などが消えてしまいますので,<style></style>の形で記述する必要があります。
 Haederエリアの「お知らせ」に仕込んでおけば,すべての記事で有効になるので便利だと思います。
<style>
.iframe-container {
  overflow:auto;
  border-style:inset;
  -webkit-overflow-scrolling:touch;
}
</style>
<style>
.iframe {
  width:100%;
  height:100%;
  border:none;
}
</style>
<div class="iframe-container" style="width:700px;height:500px;">
  <iframe class="iframe" src="./?action=common_download_main&upload_id=144">
  </iframe>
</div>

23:05 | 投票する | 投票数(0) | コメント(0)
2018/05/28

GoogleMapsのInfoWindowの中のimgをアニメーションをする

Tweet ThisSend to Facebook | by:YAS
 InfoWindowの中のimgにアニメーションを設定したら動くかな?
 試してみたら,見事,クルクル回りました。
 下のInfoWindowの中の校章にマウスをのせてみてください。

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

20:59 | 投票する | 投票数(0) | コメント(0)
2018/05/27

GoogleMapsの道路の色を変える

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


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

14:35 | 投票する | 投票数(0) | コメント(0)
2018/05/27

GoogleMapsに文字入りの旗を立てるその②

Tweet ThisSend to Facebook | by:YAS
 以前に,「GoogleMapsに文字入りの旗を立てる」の記事を書いたが,GoogleMapsAPIのInfoWindowを使えば,少し大きめのウィンドウになるが,画像等も自由に表示できるので,InfoWindowを使った地図を作成してみました。

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

13:04 | 投票する | 投票数(0) | コメント(0)
123