www.enoie.netのリニューアル - 開発環境の整備やJSON-LDの導入に備える

公開:2014-11-24 04:49
更新:2020-02-15 04:37
カテゴリ:web,d3.js

環境整備

www.sfpgmr.netのリニューアルにあたりまずは環境整備を行った。

ちょうどVS2013 Community Editionがリリースされたのでそれに入れ替え、NTVSやWeb Essentialsをインストールした。そしてgithubにリポジトリを作った。

この環境を使って以下のサイクルで開発を行っていく。

  • node.jsで開発環境にコンテンツを生成するコードを書く。
  • クライアント・サイドのスクリプトを書く。
  • テストする。
  • 適当にcommitし、githubにpushする。
  • gzip化し、WinSCPで本番サイトにアップロードして確認する

今回gruntを導入して楽しようと思ったけど、VS2013自体かなりのタスクを自動化してくれるのでやめた。 たとえばlessファイルのコンパイル・最小化、構文チェックなどはVS2013が自動的に行ってくれる。なのでgzip化してWinSCPでアップロードするところだけバッチを作って実行することにした。

バッチスクリプトは以下のとおりだ

@ECHO off
rem 元ファイルとgzファイルを比較して元ファイルが新しいものだけをgzip化
rem もし.gzファイルがない場合は作る
rem 環境変数の遅延展開を可能にする
setlocal enabledelayedexpansion
for /R h:\pj\www\html %%1 in (*.*) do (
if "%%~x1" NEQ ".gz" (
set gzipf=%%1.gz
if EXIST !gzipf! (
for %%g in (!gzipf!) do (
set tf=%%~t1
set tgzip=%%~tg
if "!tf!" GTR "!tgzip!" (
@echo 日付が新しい: %%1
gzip -9Nfk %%1
)
)
) else (
@echo gzファイルが存在しない: %%1
gzip -9Nfk %%1
)
)
)
//
winscp /console /script="synchome.txt"
view raw shp.cmd hosted with ❤ by GitHub
option batch on
option exclude ".git;.ntvs_analysis.dat;node_modules;data;obj;metrop;less;"
open scp://xxxx@hogehoge.net/
synchronize remote h:\pj\www\html /var/www/html/ -delete -mirror -criteria=time
synchronize remote h:\pj\www\wwwnode /var/www/node/wwwnode/ -delete -mirror -criteria=time
exit

JSON-LDの本格導入

コードはちょこちょこ書き始めている。以下はコンテンツ.htmlをd3.jsのtreeレイアウトで表示してみたところ。

https://sfpgmr.github.io/images/2014/11/20141123.png

東京メトロオープンデータで多少d3.jsに詳しくなってきたのでsvgを中心に使ってサイトを構築しようかなと考えている。でもそうすると検索エンジンにうまく解析してもらえないのではないかと思う。だから別途メタデータを埋め込むことにする。メタデータは<meta>タグのみではなくせっかくなので、JSON-LDを使って記述しようと思っている。

しかしこのJSON-LDとやらの記述方法が今ひとつわからなくて昨日から関連ドキュメントを読み漁っているところ。ティム・バーナーズ=リーが提唱したリンクド・データからさかのぼって勉強しているところだ。