テクニカルTips
「イカル」活用する上での、操作法や使い方のコツ、小技、工夫や問題の対処法を紹介します。
PDF作成
PDF作成はイカルから生成されたHTMLファイルをブラウザで表示し、ブラウザの印刷機能でプリンターに「Microsoft Print to PDF」などのPDF出力を選べは簡単にPDFファイルを作成することができます。
またPDF用に特別なレイアウトにしたい場合は、文書目的にPDFを追加し、PDF用にテンプレートとスタイルシートを用意すれば、PDFに最適化した出力を得ることができます。
レスポンシブデザイン対応
レスポンシブデザイン(RWD : Responsive Web Design)とは、Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応することです。
言い換えるとパソコンにはパソコン用の画面デザインを、モバイルにはモバイル用の画面デザインを適用するようにして、画面サイズに応じた見やすいデザインにすることです。
「イカル」が生成するHTMLファイルをレスポンシブデザイン対応にするにはいくつかの方法が考えられますが、一番簡単で確実な方法は画面サイズに応じで使用するスタイルシートを切り替えるようにテンプレートファイルに指定することです。
一例としてテンプレートのヘッダ記述で
<head>
<link rel="stylesheet" media="screen and (min-width: 769px)" type="text/css" href="style.css">
<link rel="stylesheet" media="screen and (max-width: 768px)" type="text/css" href="mobile.css">
</head>
とすれば、画面サイズが769px以上はstyle.cssを768px以下はmobile.cssをスタイルシートとして使用するようになります。
各々のスタイルシートにパソコン用およびモバイル用のスタイルを記述すれば、このテンプレートを使用する全てのHTMLページがレスポンシブデザイン対応となります。
チャート作成
JavaScriptのチャート作成ライブラリmermaid.jsを使用すればフローチャート、シーケンス、ガントなどのチャートをブラウザに描くことができます。
次のようなテンプレートを使用します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=UTF-8>
<link rel="stylesheet" href="https://unpkg.com/mermaid/dist/mermaid.min.css">
</head>
<body>
[ページ内容]
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js" charset="UTF-8"></script>
<script>
mermaid.initialize({
startOnLoad:true
});
</script>
</body>
</html>
イカルのページで段落を作成し、段落種別にグループを設定します。またこの段落のスタイルに mermaid を設定します。
グループ段落の下に子段落を作成し、段落種別にデータを設定します。
このデータ段落のテキストにチャートデータを記述します。
このページよりHTMLを生成しブラウザで見ればチャートを表示します。
実行結果
mermaid.jsの詳細はhttps://mermaid-js.github.io/mermaid/をご覧ください。