2016-09-25

About AVR Emulator to study in Javascript

Javascript AVR

目的

このソフトの目的はウェブブラウザ上で動く AVR マイコンのアセンブラ用エミュレータを実装することです。ただし、完全にエミュレートする事は主眼に無く、マイコンの動作を勉強するのに役立てばと思っています。

動機

Chart.js,D3.js などの使い方を調べているうちに、そもそもJavascriptを真面目に記述したことがなかったので勉強がてら手を出しました。

でもだらだらと文法書いても面白くないので、誰かの役にたつもので候補に上がったエミュレータになりました。

進捗

まだまだ書き始めたばかりで、設計もきちんとできていないのでまだ参考にならない。現状はJavascript の勉強でしかないのですが、記録として記事にします。

現状の成果

Github pages に上げてあります。

https://katogiso.github.io/avr_emu/

とりあえずの使い方

f:id:katogiso-tech:20160925174820p:plain

アクセスするとテキストエリアにアセンブラが記載されていて、その下にボタンが4つあり、それで操作する。

clear

単純にテキスト表示をクリアするだけ、実用性は今のところ無い。

load

テキストエリアのアセンブラを内部に取り込む。取り込んだ結果はFlags, Flash ROM の表示に反映する。

サイクルを進める。自走モードは存在しないので、ひたすらクリックする。将来は自走モードをつける予定です。

reset pc

PC を 0 にします。

サンプルのアセンブラでやっていること。

汎用レジスタのR09に0xA(0d10) をロード
AND は未実装なので変化なし。
JMP で 0 に戻る。

全く実用性が無い内容となっています。

今後の展望

もう少し使える命令を増やして、D3js を使ってもっと見た目を向上させます。やっぱり見た目は大事です。

2016-09-18

Chart JS V2.0 Line Chart Point Style II

chartjs

サンプルの内容

以前のサンプルでは凡例の周りが、チャート内でポイントを結ぶ線になっている。そのため、個人的に不満が残る結果だったのを修正する方法を説明する。

options.legend.labels.generateLabels を利用する方法の説明となる。

f:id:katogiso-tech:20160918233534p:plain

これが、

f:id:katogiso-tech:20160918233533p:plain

こうなります。微妙ですが大きな違いです。

最終結果

f:id:katogiso-tech:20160918232025p:plain

mulit line chart からの主な修正点

変更点は

options.legend.labels.generateLabels

を追加する。つまり、以下のようになる。

options: {
    legend: {
        labels: {
            generateLabels: function(chart){
                return  chart.data.datasets.map( function( dataset, i ){
                    return {
                        text:           dataset.label,
                        fillStyle:      dataset.backgroundColor,
                        hidden:         !chart.isDatasetVisible(i),
                        lineCap:        dataset.borderCapStyle,
                        lineDash:       [], 
                        lineDashOffset: 0,
                        lineJoin:       dataset.borderJoinStyle,
                        lineWidth:      dataset.pointBorderWidth, 
                        strokeStyle:    dataset.borderColor,
                        pointStyle:     dataset.pointStyle,
                        datasetIndex:   i  // extra data used for toggling the datasets
                    };
                })
            }
        }
    },
}

ドキュメントの該当箇所

公式ドキュメントの

http://www.chartjs.org/docs/#chart-configuration-legend-configuration

Legend label Configuration や、 Legend Item Interface を参考にする。ただし、公式ドキュメントに記載されてないこともある。そこはソースコードで補完する必要があった。

generateLabels

generateLabels　メソッドを使って凡例を生成しているが、凡例の図の設定に、点を結ぶ線の設定で描画している。これが諸悪の根源である。

該当箇所は以下の通り。

generateLabels: function(chart) {
    var data = chart.data;
    return helpers.isArray(data.datasets) ? data.datasets.map(function(dataset, i) {
        return {
            text:           dataset.label,
            fillStyle:      (!helpers.isArray(dataset.backgroundColor) ? dataset.backgroundColor : dataset.backgroundColor[0]),
            hidden:         !chart.isDatasetVisible(i),
            lineCap:        dataset.borderCapStyle,
            lineDash:       dataset.borderDash,
            lineDashOffset: dataset.borderDashOffset,
            lineJoin:       dataset.borderJoinStyle,
            // This parameter, "borderWidth" is not good.
            lineWidth:      dataset.borderWidth, 
            strokeStyle:    dataset.borderColor,
            pointStyle:     dataset.pointStyle,
            // Below is extra data used for toggling the datasets
            datasetIndex: i
        };
    }, this) : [];
}

これを利用して lineWidth を datasets[*].pointBorderWidth に変更する。

fillStyle は今回 Array では設定してないから三項演算子を省略
lineDash, LineDashOffset は不要なので無効化
lineWidth は dataset.pointBorderWidth に置き換える

options: {
    legend: {
        labels: {
            generateLabels: function(chart){
                return  chart.data.datasets.map( function( dataset, i ){
                    return {
                        text:           dataset.label,
                        fillStyle:      dataset.backgroundColor,
                        hidden:         !chart.isDatasetVisible(i),
                        lineCap:        dataset.borderCapStyle,
                        lineDash:       [], 
                        lineDashOffset: 0,
                        lineJoin:       dataset.borderJoinStyle,
                        //This parameter is changed from borderWidth to pointBorderWidth.
                        lineWidth:      dataset.pointBorderWidth, 
                        strokeStyle:    dataset.borderColor,
                        pointStyle:     dataset.pointStyle,
                        datasetIndex:   i  // extra data used for toggling the datasets
                    };
                })
            }
        }
    },
}

戻り値

公式ドキュメントにある説明では、以下のように 10 アイテムのようになっているが、元々のメソッドの最後にある datasetIndex は抜けている。これが無いと凡例をクリックして、表示・非表示を切り替える機能が使用不可能となる。

{
    text:           String,　
    fillStyle:      Color,
    hidden:         Boolean,
    lineCap:        String,
    lineDash:       Array[Number],
    lineDashOffset: Number,
    lineJoin:       String,
    lineWidth:      Number,
    strokeStyle:    Color
    pointStyle:     String
}

全容

gistf80573512b84c2f5e118088f0fe4b9e8

2016-09-06

Chart JS V2.0 Bar Chart stacked Sample

chartjs

サンプルの内容

積み上げ棒グラフにしてみました。また、y軸を 0 から始まるように修正しています。

f:id:katogiso-tech:20160906232734p:plain

コード

gistce77ea5cec5f5635eb70038134f2ce4c

解説

options: {
    scales: {
        xAxes: [{
            stacked: true,
        }],
        yAxes: [{
            stacked: true,
        }]
    }
}

options.scales.[x|y]Axes.stacked = true にすることで、積み上げグラフになります。

また、２つのデータの区別がつくように色も変えていますが、 line chart の時と同様です。

2016-09-06

Chart JS V2.0 Bar Chart Base Sample

chartjs

サンプルの内容

bar chart を作成します。まずはほとんどデフォルト設定です。

f:id:katogiso-tech:20160906231848p:plain

概要

２つのデータを与えると、ラベルにそれぞれ対応するデータを表示できます。ただし、y軸が 10 で始まっていたりして、Bar chart の禁じ手になっています。次回はこれを修正して、２つのデータを積み上げます。

コード

gistd0e4fbdc0bdae6830f7daf826d599062

2016-09-05

Hugo v0.16 theme の利用

hugo

目的

theme を利用して Hugo によるサイトを構築する。

Theme

今回は material-docsを利用する。技術的なドキュメントをまとめるサイトに適していそうだったので選択した。これを利用して Hugo のフレームワークの理解を深める。

出来上がり

こんな感じになります。

Top page

f:id:katogiso-tech:20160905001731p:plain

Projects page

f:id:katogiso-tech:20160905001735p:plain

Hugo directory structure

Themes ディレクトリを省くと６ファイル程度しか修正していない。

.
├── archetypes/
├── content/
│   ├── About/
│   │   └── index.md
│   ├── environments/
│   │   └── env-a.md
│   ├── projects/
│   │   ├── project-a.md
│   │   └── project-b.md
│   └── index.md
├── data/
├── layouts/
├── public/
├── static/
└── config.toml

theme の導入

themes ディレクトリの中で以下のコマンドを実行する。

$ git clone https://github.com/digitalcraftsman/hugo-material-docs.git

新規に追加

content 以下の 5 ファイルは新規に追加している。

projects and environments

projects, environments ディレクトリは個々に好きな名前にして問題ありません。あくまでも私の場合を示しているだけです。

$ hugo new projects/project-a.md

を実行すると content/projects/project-a.md が作成できる。これはhttp://localhost:1313/projects/project-a/ でアクセスできる場所にファイルが生成される。内容は物凄く適当です。

+++
date = "2016-09-04T16:42:07+09:00"
title = "project a"
+++

## Purpose

To be a big man.

## HOGE

To be a big hoge.

Top page

このファイルは特別なので、hugo new コマンドを使わなくてもよく、私は直接以下の内容で content/index.md を作成した。

+++
title     = "Sample"
type      = "index"
copyright = "katogiso"
+++

Front matter で type を index にしているのには意味があります。これで theme の適用を制御しています。

既存ファイルの修正

theme の修正

複数形を単数形にする自動機能のせいでサイトタイトルの "Tech-nia" がおかしくなったので、とりあえずこの機能を削除した。ただし、Front matter でそれを制御するように修正したほうが良いと今更思う。

--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -7,7 +7,7 @@
     </div>
     <div class="stretch">
       <div class="title">
-        {{ .Title | singularize }}
+        {{ .Title }}
       </div>
     </div>

全体だとこんな感じファイルは themes/hugo-material-docs/layouts/partials/header.html

<nav aria-label="Header">
  <div class="bar default">
    <div class="button button-menu" role="button" aria-label="Menu">
      <label class="toggle-button icon icon-menu" for="toggle-drawer">
        <span></span>
      </label>
    </div>
    <div class="stretch">
      <div class="title">
        {{ .Title }}
      </div>
    </div>

    {{ with .Site.Social.twitter }}
    <div class="button button-twitter" role="button" aria-label="Twitter">
       <a href="https://twitter.com/{{ . }}" title="@{{ . }} on Twitter" target="_blank" class="toggle-button icon icon-twitter"></a>
    </div>
    {{ end }}

    {{ with .Site.Social.github }}
    <div class="button button-github" role="button" aria-label="GitHub">
      <a href="https://github.com/{{ . }}" title="@{{ . }} on GitHub" target="_blank" class="toggle-button icon icon-github"></a>
    </div>
    {{ end }}
    
    <!-- TODO: disabled until Hugo supports the generation of a content index natively 
    <div class="button button-search" role="button" aria-label="Search">
      <label class="toggle-button icon icon-search" title="Search" for="toggle-search"></label>
    </div>
    -->
  </div>
  <div class="bar search">
    <div class="button button-close" role="button" aria-label="Close">
      <label class="toggle-button icon icon-back" for="toggle-search"></label>
    </div>
    <div class="stretch">
      <div class="field">
        <input class="query" type="text" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck>
      </div>
    </div>
    <div class="button button-reset" role="button" aria-label="Search">
      <button class="toggle-button icon icon-close" id="reset-search"></button>
    </div>
  </div>
</nav>

config.toml の修正

以下のように修正、追記している。

baseurl      = "http://replace-this-with-your-hugo-site.com/"
languageCode = "en-us"
title        = "Tech-nia"
theme        = "hugo-material-docs"

[params]
author      = "So KATOGI"
description = "Sample data for understanding the hugo"

[params.palette]
primary = "indigo"
accent  = "orange"

[[menu.main]]
name   = "Projects list"
url    = "/projects/"
weight = "0"

[[menu.main]]
name   = "Environments list"
url    = "/environments/"
weight = "10"

[[menu.main]]
name   = "About"
url    = "/about/"
weight = "20"

theme の選択

以下の記述でテーマを選択する。コマンドラインオプションで指定もできるが、決めてしまえば設定しておくほうが圧倒的に楽だ。

theme        = "hugo-material-docs"

menu の作成

自分で追加したファイルの content 直下のディレクトリを指定する。

[[menu.main]]
name   = "Projects list"
url    = "/projects/"
weight = "0"

[[menu.main]]
name   = "Environments list"
url    = "/environments/"
weight = "10"

[[menu.main]]
name   = "About"
url    = "/about/"
weight = "20"

細かいカスタマイズ

色を params.palette で変更して、サイドメニューに表示されるauthor の付随パラメータを修正する。

[params]
author      = "So KATOGI"
description = "Sample data for understanding the hugo"

[params.palette]
primary = "indigo"
accent  = "orange"

hugo サーバ

hugo には内蔵サーバがあり、ファイルの修正をリアルタイムで反映する機能がある。これを起動しておくと、表示を確認しながら作業ができる。

$ hugo -v server 
INFO: 2016/09/05 00:09:01 hugo.go:463: Using config file: config.toml
INFO: 2016/09/05 00:09:01 hugo.go:575: using a UnionFS for static directory comprised of:
INFO: 2016/09/05 00:09:01 hugo.go:576: Base: themes/hugo-material-docs/static
INFO: 2016/09/05 00:09:01 hugo.go:577: Overlay: static/
INFO: 2016/09/05 00:09:01 hugo.go:609: syncing static files to /
Started building site
INFO: 2016/09/05 00:09:01 site.go:1251: found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
WARN: 2016/09/05 00:09:01 site.go:1990: "404.html" is rendered empty
0 draft content
0 future content
5 pages created
0 non-page files copied
0 paginator pages created
0 tags created
0 categories created
in 33 ms
Watching for changes in theme/{data,content,layouts,static,themes}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

メッセージ通り http://localhost:1313/ にブラウザでアクセスすれば良い。もちろん index.md を作成しないとただのブランクページしか見えないです。

Pretty URL

content/projects/project-a.md

で作成したファイルは

public/projects/project-a/index.html

へ生成される。通常 Web サーバーは　http://example.com/hoge/ のようにファイルを指定するようなアクセスではないとき、 index.html をURLに付加した http://example.com/hoge/index.html を表示しようとする。

このファイル名を省略した URL でアクセスすることを前提としたデータをHugoはデフォルトで生成し、その URL を Pretty URL と呼んでいる。これは他の Generator でも使われる用語です。

hugo でのファイル生成

hugo コマンドをトップディレクトリで実行するだけで良い。

$ hugo 
Started building site
0 draft content
0 future content
5 pages created
0 non-page files copied
0 paginator pages created
0 tags created
0 categories created
in 43 ms

そうすると public 以下に必要なファイルが生成される。 theme の css などもコピーされる。

2016-08-31

Chart JS V2.0 Line Chart Point Style

chartjs

サンプルの内容

線の種類を変更して、点のスタイルを変更している。また、凡例も点のスタイと一致させている。

f:id:katogiso-tech:20160831205356p:plain

Base からの主な修正点

変更点は

線種の変更
点の変更
凡例の変更

の３点となる。

線種の変更

data.datasets.borderDash に配列で数値を渡すことで、任意の破線となる。破線の説明はMDNを参照してください。

data: {
  datasets: [
    {
      borderDash: [ 5, 10],
    }
  ]
},

点の変更

data.datasets.pointStyle に文字列を設定することで変更が可能となる。標準で選択できる点の種類は,

circle
triangle
rect
rectRot
cross
crossRot
star
line
dash

ですが、Javascript の drawImage を使って表示することもできるようですが試していません。また、各値は配列でも渡すことができます。

data: {
  datasets: [
    {
      pointStyle: 'star'
    }
  ]
},

凡例の変更

凡例はデフォルトで長方形ですが、options.legend.labels.usePointStyle を true にすることで点と一致する図形になります。ただし、options.legend.labels.fontSize で凡例図形のサイズが決まるので適切に処理する必要があります。また、options.legend.labels.boxSize も合わせることで表示が良くなります。

options: {
  legend: {
    labels: {
      fontSize: 20,
      boxWidth: 20,
      usePointStyle: true,
    }
},

おまけ

レスポンシブデザインにするため、options.responsive を true にしています。

全体

chartjs sample pointstyle

2016-08-29

Hugo v0.16 事始め

hugo

目的

データ処理した結果をHTMLでまとめたいが、テンプレートで処理したいときに使おうと考えている。また、自分で見るだけの資料なら体裁は最低限で良いが、他者に見せるのであれば見栄えも重要だと思っている。

今回は Hugo の使い方を記事にしていきます。

Hugo

注意

この記事は基本的に Hugo quick start guide を再編集した程度の内容になります。

やること

今回は基本的なことを確認しておく。

hugo new site で作成されるものを確認する。
hugo new で何かしらの記事を作成する。
layout などを作成する。
記事の生成をする.
ブラウザで確認する。

最終構成

自分で作成するファイルは

content/chartjs/base.md (記事にする内容を記載する)
layouts/chartjs/single.thml (レイアウト情報を記載する)

.
├── archetypes/
├── content/
│   └── chartjs/
│       └── base.md
├── data/
├── layouts/
│   └── chartjs/
│       └── single.html
├── public/
│   ├── chartjs/
│   │   ├── base/
│   │   │   └── index.html
│   │   ├── index.html
│   │   └── index.xml
│   ├── 404.html
│   ├── index.html
│   ├── index.xml
│   └── sitemap.xml
├── static/
├── themes/
└── config.toml

content/chartjs/base.md

gist0f2c513a5b490e46bc84f939926ea41f

layouts/chartjs/sinble.thml

gist95ac4185d519019005613ad25fc3a9ad

hugo new site

とりあえず新規に作成する。

$ hugo new site base

以下のようなディレクトリとファイルが作成される.

.
├── archetypes/
├── content/
├── data/
├── layouts/
├── static/
├── themes/
└── config.toml

6 directories, 1 file

config.toml は

baseurl = "http://replace-this-with-your-hugo-site.com/"
languageCode = "en-us"
title = "My New Hugo Site"

こんな感じの内容で、まずはこのままにしておく事にする。

TOML

Tom's Obvious, Minimal Language の略で、仕様は以下でメンテナンスされているが、

TOML

今日現在で v0.4.0 であり、今後も仕様が変化する旨が宣言されている。ざっと見た感じだと YAML よりは記述しやすそうだが、一方で、こういった設定ファイルの記述方法は日々色々なモノが提案されて採用されていくので、Web エンジニア以外には多かれ少なかれ障害になっている気もする。

hugo new something_contens.md

$ hugo new chartjs/base.md

$ tree -F -I themes --dirsfirst

.
├── archetypes/
├── content/
│   └── chartjs/
│       └── base.md
├── data/
├── layouts/
├── static/
└── config.toml

hugo new でコンテンツを作ると、 content/ ディレクトリ以下に作成される。ちょっと Markdown で記事を書いてみる。

記事の編集

+++
date = "2016-08-28T14:28:49+09:00"
draft = false 
title = "hugo new something_contens.md"

+++

# hugo new something_contens.md

<pre>
$ hugo new chartjs/base.md

$ tree -F -I themes --dirsfirst

.
├── archetypes/
├── content/
│   └── chartjs/
│       └── base.md
├── data/
├── layouts/
├── static/
└── config.toml
</pre>

hugo new でコンテンツを作ると、 content/ ディレクトリ以下に作成される。
ちょっと Markdown で記事を書いてみる。

"+++" で囲まれている箇所は、Front matter と呼ばれていてテンプレートで使用するパラメータを記載しておく箇所となる。つまり、Front matter はその記事に特有の Parameter(その記事のタイトルとか)を Generator に渡すための記述です。この用語、Front matter はその他の Web 系アプリでもよく出くわす単語です。

ちょっと静的 Generator に関しての概要

HTML で複数の記事を書くと同じようなことを複数のHTMLに書く必要が出てくる。これをテンプレート化して、さらにフレームワーク化したものが静的 Generator です。

<html>
  <head>
    <title>This is template</title>
  </head>
  <body>
    <!-- Your content is here! -->
  </body>
</html>

この時、テンプレートの body 領域に markdown などで記載した記事を流しこめばとりあえず generator になる。ただし、どうしても body 領域の外側、head領域などにある title などを上書きしないとならなくなる。

それを実現するために template 上は title の中身を変数にしておき、記事の Front matter の同名の変数で上書きする機能をGenerator に実装してあるのが一般的です。

書いた記事を生成（ビルド）する

hugo でとりあえずビルドしてみる。

$ hugo 
Started building site
=============================================================
Your rendered home page is blank: /index.html is zero-length
 * Did you specify a theme on the command-line or in your
   "config.toml" file?  (Current theme: "")
 * For more debugging information, run "hugo -v"
=============================================================
0 of 1 draft rendered
0 future content
0 pages created
0 non-page files copied
0 paginator pages created
0 tags created
0 categories created
in 10 ms

サーバの起動前にコンテンツの生成が行われているが、 Front matter で draft が true になっているため、何もコンテンツが作成されていない。ここで、"draft = false" にファイルを編集する。

+++
date = "2016-08-28T14:28:49+09:00"
draft = false
title = "hugo new something_contens.md"

+++

と編集してから、再度生成する。

$ hugo 
Started building site
=============================================================
Your rendered home page is blank: /index.html is zero-length
 * Did you specify a theme on the command-line or in your
   "config.toml" file?  (Current theme: "")
 * For more debugging information, run "hugo -v"
=============================================================
0 draft content
0 future content
1 pages created
0 non-page files copied
0 paginator pages created
0 categories created
0 tags created
in 7 ms

"1 pages created" となっている。

$ tree -F --dirsfirst
.
├── archetypes/
├── content/
│   └── chartjs/
│       └── base.md
├── data/
├── layouts/
├── public/
│   ├── chartjs/
│   │   ├── base/
│   │   │   └── index.html
│   │   ├── index.html
│   │   └── index.xml
│   ├── 404.html
│   ├── index.html
│   ├── index.xml
│   └── sitemap.xml
├── static/
├── themes/
└── config.toml

public の下に色々出来たが、お目当ての生成ファイルは public/chartjs/base/index.html です。でもまだ、なにも中身がありません。そこでメッセージ付き(-vオプション)で生成する。

$ hugo -v 
INFO: 2016/08/29 22:20:51 hugo.go:463: Using config file: /home/so/work/hugo/samples/base/config.toml
WARN: 2016/08/29 22:20:51 hugo.go:551: Unable to find Theme Static Directory: 
INFO: 2016/08/29 22:20:51 hugo.go:571: /home/so/work/hugo/samples/base/static/ is the only static directory available to sync from
INFO: 2016/08/29 22:20:51 hugo.go:609: syncing static files to /home/so/work/hugo/samples/base/public/
Started building site
INFO: 2016/08/29 22:20:51 site.go:1251: found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
WARN: 2016/08/29 22:20:51 site.go:2014: Unable to locate layout for section chartjs: [section/chartjs.html _default/section.html _default/list.html indexes/chartjs.html _default/indexes.html]
WARN: 2016/08/29 22:20:51 site.go:1990: "chartjs" is rendered empty
WARN: 2016/08/29 22:20:51 site.go:2014: Unable to locate layout for page chartjs/base.md: [chartjs/single.html _default/single.html theme/chartjs/single.html theme/_default/single.html _default/single.html]
WARN: 2016/08/29 22:20:51 site.go:1990: "chartjs/base.html" is rendered empty
WARN: 2016/08/29 22:20:51 site.go:2014: Unable to locate layout for homepage: [index.html _default/list.html]
WARN: 2016/08/29 22:20:51 site.go:1990: "/" is rendered empty
=============================================================
Your rendered home page is blank: /index.html is zero-length
 * Did you specify a theme on the command-line or in your
   "config.toml" file?  (Current theme: "")
=============================================================
WARN: 2016/08/29 22:20:51 site.go:2014: Unable to locate layout for 404 page: [404.html]
WARN: 2016/08/29 22:20:51 site.go:1990: "404.html" is rendered empty
0 draft content
0 future content
1 pages created
0 non-page files copied
0 paginator pages created
0 tags created
0 categories created
in 6 ms

メッセージをよく見ると、

WARN: 2016/08/29 22:20:51 site.go:2014: Unable to locate layout for page chartjs/base.md: [chartjs/single.html default/single.html theme/chartjs/single.html theme/default/single.html _default/single.html]

WARN: 2016/08/29 22:20:51 site.go:1990: "chartjs/base.html" is rendered empty

こんな感じで、layout が無いよと警告されています。そしてなにも生成できなかったことを教えてくれています。

書いた記事のレイアウトファイルを作成する。

ここで layout ファイルを公式ドキュメントのBlock Templatesを参考に記述してみる。(詳細は別記する予定です。)

$ cat layouts/chartjs/single.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> {{ .Title }} &ndash; {{ .Site.Title }}</title>
  </head>
  <body>
    <h1>This page is generated with layouts/chartjs/single.html</h1>
    {{ .Content }}
  </body>
</html>

"{{ .Content }}" に content/chartjs/base.md の内容が挿入される。 hugo コマンドで、で生成すると以下のように中身が記述されているのがわかる。

$ cat public/chartjs/base/index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> hugo new something_contens.md &ndash; My New Hugo Site</title>
  </head>
  <body>
    <h1>This page is generated with layouts/chartjs/single.html</h1>
    

<h1 id="hugo-new-something-contens-md">hugo new something_contens.md</h1>

<pre><code class="language-shell">
$ hugo new chartjs/base.md

$ tree -F -I themes --dirsfirst

.
├── archetypes/
├── content/
│   └── chartjs/
│       └── base.md
├── data/
├── layouts/
├── static/
└── config.toml
</code></pre>

<p>hugo new でコンテンツを作ると、 content/ ディレクトリ以下に作成される。
ちょっと Markdown で記事を書いてみる。</p>

  </body>
</html>

書いた記事をWebブラウザで確認する。

hugo の Webサーバを使って確認する。

$ hugo server
Started building site
=============================================================
Your rendered home page is blank: /index.html is zero-length
 * Did you specify a theme on the command-line or in your
   "config.toml" file?  (Current theme: "")
 * For more debugging information, run "hugo -v"
=============================================================
0 draft content
0 future content
1 pages created
0 non-page files copied
0 paginator pages created
0 tags created
0 categories created
in 11 ms
Watching for changes in /home/so/work/hugo/samples/base/{data,content,layouts,static}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

f:id:katogiso-tech:20160829231719p:plain

目的

動機

進捗

現状の成果

とりあえずの使い方

clear

load

next

reset pc

サンプルのアセンブラでやっていること。

今後の展望

サンプルの内容

最終結果

mulit line chart からの主な修正点

ドキュメントの該当箇所

generateLabels

戻り値

全容

サンプルの内容

コード

解説

サンプルの内容

概要

コード

目的

Theme

出来上がり

Top page

Projects page

Hugo directory structure

theme の導入

新規に追加

projects and environments

Top page

既存ファイルの修正

theme の修正

config.toml の修正

theme の選択

menu の作成

細かいカスタマイズ

hugo サーバ

Pretty URL

hugo でのファイル生成

サンプルの内容

Base からの主な修正点

線種の変更

点の変更

凡例の変更

おまけ

全体

目的

注意

やること

最終構成

content/chartjs/base.md

layouts/chartjs/sinble.thml

hugo new site

TOML

hugo new something_contens.md

記事の編集

ちょっと静的 Generator に関しての概要

書いた記事を生成（ビルド）する

書いた記事のレイアウトファイルを作成する。

書いた記事をWebブラウザで確認する。