命名って難しい

変数、関数、クラスなどなど実装より命名に毎回悩むタイプの人間による技術についてのメモ。

社内ホームページにRiot.jsを導入してみた質の極めて低いメモ

Riot.js

前提

環境

  • 社内のホームページはホームページビルダーなどで作った静的なページ。
  • ホームページサーバーはWinServerでIISの標準的な機能でホストしている。

実装者

  • web系開発経験なし。全然ノウハウなし。
  • ウェブサービスのフロントエンドとバックエンドがどうデータをやり取りしているのかも分からないレベル。

契機

社内のホームページにある社内連絡のtable要素を非エンジニアがhtmlを直接編集しており、記述に難儀していた。 直接編集する作業をやめたい、という要望があった。

導入

全体像

  • 社内連絡の内容を記載し、マクロによってjson出力するExcelマクロ有効ブックを作る…①
  • 非エンジニアに①を使用させ、出力を行う…②
  • ホームページで②を読み込ませ、それを元にRiot.jsで特定のタグをマウントする。

簡単ですね。実際はVBAが実装面倒すぎて辛かったんですけど。

実装

jsonファイル

トップの"renraku"から、"date","text","url"の3つのデータを配列で持たせています。

{  
   "renraku":[  
      {  
         "date":"2016/11/30",
         "text":"おしらせ～",
         "url":"http://google.com"
      },
      {  
         "date":"2016/11/29",
         "text":"ファイルへのリンクお知らせ",
         "url":"files/お知らせ.xlsx"
      }
   ]
}

社内連絡のページHTML

カスタムタグではなくID指定で試してみた。

<!doctype html>
<html lang="ja">

<head>
  <title>社内連絡</title>
</head>

<body>
  <div id="riot-renraku-table"></div>
  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  <script type="riot/tag" src="tag/renraku-table.tag"></script>
  <script type="text/javascript" src="js/riot_compiler.min.js"></script>
  <script type="text/javascript">
    $.ajax({
      url: 'json/renraku.json',
      dataType: 'json',
      async: true,
      cache: false,
      success: function(res) {
        riot.mount('#riot-renraku-table', 'renraku-table', res.renraku);
      }
    });
  </script>
</body>

</html>

カスタムタグ

if文を使って、URLがあればa要素、なければdivという表示をしています。

<renraku-table>
  <table>
    <thead>
      <tr>
        <th>日付</th>
        <th>お知らせ</th>
      </tr>
    </thead>
    <tbody>
      <tr each={opts}>
        <td>{date}</td>
        <td>
            <a if={url!==""} href="{url}" target="_blank">{text}</a>
            <div if={url===""}>{text}</div>
        </td>
      </tr>
    </tbody>
  </table>
</renraku-table>

感想

なんか書くのが面倒になってしまったので感想でまとめて終わらそうと思うんですけど、
「なんかよくわからないが動いた」の一言につきます。

とりあえず初心者の手習いだと思っていただければ。