メイケロのブログ

メイケロの自宅カフェ

自宅オフィスをカフェに改装しようとたくらむブログ

    f:id:meikellog:20181009134535p:plain
    改装中
    f:id:meikellog:20181009134535p:plain
    改装中
    f:id:meikellog:20181009134535p:plain
    改装中
    f:id:meikellog:20181009134535p:plain
    改装中

はてなブログでJavaScriptを動かす人デビュー!参考記事をご紹介!

 

これまではてなブログでは、おぼつかないHTMLだけでなく、CSSでフォントや文字装飾など勉強させてもらいました。(ささやかながら、当ブログの『はてな』のカテゴリーでもその還元をしています)そして、なんと、ついにJavaScriptを動かせるようになったので、その参考になった記事のご紹介です。 

 

まずこちら、FinTech Diaryさん。JavaScriptでポップアップウィンドウを立ち上げて、計算結果を表示するプログラムを以前見たことを記憶していました。こちらのプログラムは『ダッシュボード』→『HTML編集』にソースコードを貼り付けるとそのまま動きます。

fintechdiary.hatenablog.com

 

はてなブログでは『編集見たまま』モードでは下のようなコードが追加されてしまってJavaScriptが動きません。

//<![CDATA[   // ]]>
 <script>
 function click_ok()
   {
       id_message.innerHTML = "できたよ!";
   }
</script>
<div id="id_message">できるかな?</div>
<button onclick="click_ok()">やる</button>
できるかな?

 

 こんな感じになって動きません。それを動かす方法を書いているのが、下のブログです。新しい記事作成を立ち上げた瞬間、『編集見たまま』→『編集markdown』に変更するのがポイントとのことです。一度『編集見たまま』で保存すると、『編集markdown』に変更できなくなります。

daralib.hatenablog.com

 

個人的にとても勉強になった上の2つの記事でした。

 

これらに加えて、

<script src="https://〇〇"></script>

で外部のJavaScriptファイルにもアクセスできるので、外部のJavaScript置き場として『ニフクラmobile backend』をオススメしたいです。無料でそれなりに使えます。

mbaas.nifcloud.com

 

JavaScriptでできるよくある事例が、スマホページのハンバーガーメニュー(三)とか、画像のロード中の読み込みアニメーションを動かすとかなので、たいした事がないように思えますが、外部のJavaScriptファイルも読み込めるのであれば、可能性を感じられるのではないでしょうか。

 

 

読んでくれてありがとうございます。よかったら読者登録をお願いします。