JSWでTypeDocViewerが出来たので公開してみる
JSWでTypeDocViewerが出来たので公開してみる:
TypeDocはTypeScriptのドキュメントを作るためのプログラムだ。npmでインストールし簡単に利用できる。細かい使い方は、誰かが書いた別の記事を参照して欲しい。
通常TypeDocはHTMLファイルを吐き出してドキュメントを生成するのだが、「json」というオプションを指定するとJSON形式で出力することが可能だ。今回はこのデータを読み込んでSPA(SinglePageApplication)で内容を表示するプログラムを作成した。
本来はJSWのサンプルに作っていたのだが、もはやサンプルとしては役に立たないコード量になってしまったため独立させた。
リポジトリ
実働サイト
継承したメソッドの色分けとか、検索機能などを付けた
以下のファイルをコピペして、自分の作ったTypeDocのJSONファイルを指定すれば、その内容を表示することが可能だ
もちろんAjaxのセキュリティ制限があるので、HTMLファイルを置いてあるドメインと同一の場所にJSONファイルを置く必要がある
.jsはGitHubに置いてあるので、直リンクで呼び出してもらっても構わないし、ダウンロードして使ってもらっても良い
ライセンスはMITにしているので、特に制約は無い
ローカル環境でのビュワーとして使うなら、JSONファイルの先頭に「let doc =」をつけて.jsファイルにし、loadメソッドで直接データを放り込むことで動作させることも出来る
frame:trueにすると、仮想フレームウインドウとしてポップアップ状態で独立して表示させることも可能だ
通常のコンテンツの上に重ねて表示させたいなら、フレームウインドウ化をオススメする
今回作ったものはJSWの動作を確認するためのサンプルだったのだが、肥大化しすぎてサンプルとしての用を成さなくなったので独立させることになった
この手のフレームワークを作る際は、なにかアプリを作りながらだと、足りない機能やバグを大量に発見することになる
まだまだ作らなければならない機能があり、ベータ版の域を出ていないので、がんばって開発を進めていきたいと思う
TypeDocに関して
TypeDocはTypeScriptのドキュメントを作るためのプログラムだ。npmでインストールし簡単に利用できる。細かい使い方は、誰かが書いた別の記事を参照して欲しい。通常TypeDocはHTMLファイルを吐き出してドキュメントを生成するのだが、「json」というオプションを指定するとJSON形式で出力することが可能だ。今回はこのデータを読み込んでSPA(SinglePageApplication)で内容を表示するプログラムを作成した。
本来はJSWのサンプルに作っていたのだが、もはやサンプルとしては役に立たないコード量になってしまったため独立させた。
TypeDocViewer
リポジトリ実働サイト
継承したメソッドの色分けとか、検索機能などを付けた
表示に必要なHTMLファイル
以下のファイルをコピペして、自分の作ったTypeDocのJSONファイルを指定すれば、その内容を表示することが可能だもちろんAjaxのセキュリティ制限があるので、HTMLファイルを置いてあるドメインと同一の場所にJSONファイルを置く必要がある
.jsはGitHubに置いてあるので、直リンクで呼び出してもらっても構わないし、ダウンロードして使ってもらっても良い
ライセンスはMITにしているので、特に制約は無い
ローカル環境でのビュワーとして使うなら、JSONファイルの先頭に「let doc =」をつけて.jsファイルにし、loadメソッドで直接データを放り込むことで動作させることも出来る
frame:trueにすると、仮想フレームウインドウとしてポップアップ状態で独立して表示させることも可能だ
通常のコンテンツの上に重ねて表示させたいなら、フレームウインドウ化をオススメする
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/>
<link rel="stylesheet" href="https://javascript-windowframework.github.io/TypeDocViewer/css/JSWindow.css" />
<script type="text/javascript" src="https://javascript-windowframework.github.io/TypeDocViewer/js/jsw/Window.js"></script>
<script type="text/javascript" src="https://javascript-windowframework.github.io/TypeDocViewer/js/TypeDocViewer.js"></script>
<!--
TypeDocのJSONデータに「let doc =」を付けて拡張子を変えたファイル
こうするとAjaxを使わずにデータを読み込むことが可能
<script type="text/javascript" src="https://javascript-windowframework.github.io/TypeDocViewer/doc/document.js"></script>
-->
<script>
//ページ読み込み時に実行する処理を設定
addEventListener("DOMContentLoaded", docMain)
//ページ読み込み後に実行される内容
function docMain() {
let typeDocView = new TypeDocView({frame:false}) //trueにするとフレームウインドウで表示
//typeDocView.setSize(640,480) //サイズ指定
typeDocView.setOverlap(true)
typeDocView.setMaximize(true) //最大化(サイズを指定したければコメントアウトすること)
typeDocView.loadUrl('./doc/document.json') //TypeDocのJSONデータのURLを指定
//typeDocView.load(doc) //こちらはローカルからでも実行可能
}
</script>
<title>TypeDocViewer</title>
</head>
<body>
</body>
</html>
SPAを普及させるためのフレームワーク作り
今回作ったものはJSWの動作を確認するためのサンプルだったのだが、肥大化しすぎてサンプルとしての用を成さなくなったので独立させることになったこの手のフレームワークを作る際は、なにかアプリを作りながらだと、足りない機能やバグを大量に発見することになる
まだまだ作らなければならない機能があり、ベータ版の域を出ていないので、がんばって開発を進めていきたいと思う
コメント
コメントを投稿