gnuplotによるグラフ作成21～3Dデータプロット
今回はgnuplotによるデータファイルから3Dプロットを実行する方法について紹介する。
1. データファイル形式
3dデータをプロットするためのデータ形式は2通りあるが、X/Y/Zの列ににそれぞれ直接値を入れる形式で、具体的なデータファイルdata3d.txtの書式としては以下のようになる。
# X Y Z
0 0 0
0 1 1
0 2 4
0 3 9
0 4 16
0 5 25
1 0 1
1 1 2
1 2 5
1 3 10
1 4 17
1 5 26
2 0 4
2 1 5
2 2 8
2 3 13
2 4 20
2 5 29
3 0 9
3 1 10
3 2 13
3 3 18
3 4 25
3 5 34
2. データファイルから3Dプロット
3次元でプロットするには2次元のときと同様にプロットコマンドの後に読み込むデータファイル名を指定する。
splot "data3d.txt"
特に描画方法を指定しない場合は、以下のようにポイント+でプロットされる。
ポイント以外で、例えばラインを用いてグリッド状に描画したい場合は
splot "data3d.txt" with lines
グリッド状に表示するには上のデータファイルのようにXの値ごとにデータ数を揃え、Xの値が変わったときに改行したデータ形式にする。
ポイントやドットで3Dプロット行う場合は上のようにデータ数を揃えたり、改行の必要もなくX/Y/Zのデータの組が揃っていればよい。例えばdata3d_2.txtは
# X Y Z 1 0 0 2 1 1 0 2 4 0 3 9 0 4 16 0 5 25 2 3 13 2 4 20 2 5 29 3 0 9 3 1 10 3 2 13 3 3 18 3 4 25 3 5 34
これを3Dプロットすると
splot "data3d_2.txt"
ポイント表示による3Dプロットができていることがわかる。
なおラインを用いて3Dプロットを行うと以下のように、一筆書きのように線が引かれるため見にくいプロットとなってしまう。
3. マトリックス形式のよる3Dプロット
X/Y/Zの列ににそれぞれ直接値を入れる形式以外でマトリックス形式を用いることができる。具体的にdata3d_mat.txtは
0 1 4 9 1 2 5 10 4 5 8 13 9 10 13 18 16 17 20 25 25 26 29 34
この形式はX方向が列、Y方向が行という解釈で、行列の値がZということになる。マトリックス形式のデータを3Dプロットするには
splot "data3d_mat.txt" matrix
以下のようにポイント表示による3Dプロットを描画できる。
またポイントではなく描画をラインで指定すると
splot "data3d_mat.txt" matrix lines
マトリックス形式のデータはX/Yの値は含まれていないため、軸のラベルをX/Yの値に割り当てる必要がある。そこで以下のようにset xticsを用いてxの値、同様にset yticsを用いてyの値を割り当てる。
set xtics("100" 0, "200" 1,"300" 2) set ytics("0" 0, "100" 1,"200" 2,"300" 3, "400" 4, "500" 5) replot
4. まとめ
今回はデータファイルから3Dプロットを作成するための、データファイルのデータ形式とコマンドについて紹介した。
ブログデザイン備忘録 ～ はてなブログテーマの自作
- 1. Boilerplateの入手
- 2. SCSS/Node.jsの利用
- 3. node.js利用の前準備
- 3. はてなブログの設定のnode.jsの利用
- 5. Boilerplateの実行例
- 6. まとめ
今まで既存テーマ(smooth)についてHTML/CSS、JavaScriptを用いてデザインCSSなどで追記することで、smoothのデザインをカスタマイズという形でデザインしていたが、一からテーマを作ることもできる。 ブランクからCSSを記述する方法もあるが、最低限のはてなブログのフォーマットが記述されているCSSのテンプレートとしてBoilerplateを利用する方法が手引きとして紹介されている。 なおはてなブログのテーマデザインはCSSの部分のみでHTML構造は変更(追加の場合はデザインメニューからHTML要素を記述)できない。
今回はBoilerplateをはてなブログのデザインに適用して、テーマを作成する環境を作る方法について紹介する。
1. Boilerplateの入手
Boilerplateの入手は下記からboilerplate.cssをダウンロードすることができる。
GitHub - hatena/Hatena-Blog-Theme-Boilerplate
次にダウンロードしたboilerplate.cssをはてなブログに適用する方法については
はてなブログのテーマ作成の仕方 – ブログ運営のためのブログカスタマイズ
にあるが、
上記の方法でもよいが、1はレンタルサーバーを利用していない場合は、利用する手続きが必要になる、2の場合はデザインCSSのエディタ(?)がかなり使いにくいので、まとまったコーディングには不向きという欠点がある。
2. SCSS/Node.jsの利用
第3の方法としてGitHub - hatena/Hatena-Blog-Theme-Boilerplateでは SCSS/Node.jsの利用する場合の手順が書かれている。
node.jsをインストールして
$ git clone git@github.com:hatena/Hatena-Blog-Theme-Boilerplate.git $ cd Hatena-Blog-Theme-Boilerplate $ npm install
でセットアップすることが書かれているが、いくつか前準備が必要になる。
Githubのアカウントを作成する
gitコマンドが使えるようにgitをインストールする
gitにより公開鍵を作成し、Githubの個人ページに設定する
node.jsをインストールして、上記のコマンドを実行する
3. node.js利用の前準備
Githubのアカウントは以下のサイトで作成する。
次にgithubからクローン(ディレクトリ構造とファイルのコピー)を実行するために用いるgitなどのコマンドを使えるようにgitをインストールする。
gitを用いてgithubにアクセスするために公開鍵を作成する。公開鍵の設定をしない、または失敗している状態でクローンを作成しようとすると
$ git clone git@github.com:hatena/Hatena-Blog-Theme-Boilerplate.git Cloning into 'Hatena-Blog-Theme-Boilerplate'... The authenticity of host 'github.com (13.114.40.48)' can't be established. git@github.com: Permission denied (publickey). fatal: Could not read from remote repository.
上のようなエラーメッセージがあらわれて失敗する。公開鍵の作成方法やgithubへの登録方法は下記参照だが、
概略手順としては、gitを用いて以下のように鍵を作成する。
$ ssh-keygen -t rsa -C xxxx@mail.com Generating public/private rsa key pair. Your public key has been saved in /c/Users/username/.ssh/id_rsa.pub The key fingerprint is:
生成した鍵ファイルは.ssh内にid_rsaとid_rsa.pubが作成される。公開鍵はid_rsa.pubで、ファイルの中身ssh-rsa xxxxxxxxxxxxxxxxxxxxxxxxxxxx mail@mail.comのうちssh-rsa xxxxxxxxxxxxxxxxxxxxxxxxxxxxまでコピーする。
次にgithubのsettings → SSH and GPG keysでNew SSH keyをクリックして、先ほどコピーした中身を貼り付けてgithub側の設定は完了。
.ssh/内にconfigファイルを例えばvim ~/.ssh/configとして作成し、configの中身は
Host github HostName github.com IdentityFile ~/.ssh/id_rsa User git
上の作業が正しく実行されgithubと接続できるかどうか以下のコマンドで、成功すると成功した旨のメッセージが表示される。
$ ssh -T git@github.com Hi username! You've successfully authenticated, but GitHub does not provide shell access.
ここまでできたら、gitを用いてはてなブログのgithubサイトからクローンを実行することができる。正しくクローンできていれば以下のような表示になる。
$ git clone git@github.com:hatena/Hatena-Blog-Theme-Boilerplate.git Cloning into 'Hatena-Blog-Theme-Boilerplate'... remote: Enumerating objects: 53, done. remote: Total 53 (delta 0), reused 0 (delta 0), pack-reused 53 Receiving objects: 100% (53/53), 19.39 KiB | 684.00 KiB/s, done. Resolving deltas: 100% (18/18), done.
3. はてなブログの設定のnode.jsの利用
node.jsをインストールしていない場合は下記サイトからダウンロードとインストールを実行する。
またテーマのデザイン・動作を確認するための非公開のはてなブログを開設する。
node.jsなどのコマンドプロンプト(git Bashでも可)からcd Hatena-Blog-Theme-Boilerplateのようにディレクトリに移動してから
$npm install
としてクローンしたファイルのインストールを行う。終了したら続けてnpm startとするとコンパイルが始まり、最後にWatching "scss/"以下が表示されたところでSCSSファイルの監視が開始される。
終了するときはCtrl+Cでバッチ終了にYを入力すれば監視が終了する。
$npm start
…
…
Watching "scss/" ..
[Browsersync] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://192.168.2.100:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
--------------------------------------
[Browsersync] Serving files from: build
[Browsersync] Watching files...
前後してもよいが、デザイン確認用のはてなブログのデザインCSSにデフォルトの記述を以下のコードに書き換える。
@import url("http://localhost:3000/boilerplate.css");
node.jsのSCSSの監視が実行されている間は、Boilerplateのテンプレートが適用されてブログデザインに反映される。監視を終了させると元のHTMLのみの表示に戻る。
5. Boilerplateの実行例
Boilerplateの適用前と適用後の状態を以下に示す。記事自体はサンプルエントリーのものが提供されているが、最近の記事をコピーして適用した。Boilerplate適用前でデザインCSSにデフォルトの記述を削除している状態では、素のスタイルが設定されていないHTMLが表示される。
サイドメニューはレイアウトされていないのでスマホメニューのように一番下に表示される。
Boilerplateを適用すると記事の表示位置やサイドメニューとしてレイアウトされていることがわかる。
6. まとめ
今回は自作テーマを作成する場合で、Boilerplateを使用する場合の必要な手順・作業について紹介した。
ブログデザイン備忘録～CLS問題再び
前回Googleサーチコンソールで検出されたCLS に関する問題: 0.1 超（モバイル）の改善が検証できたが、再びCLSの問題が発生した。
サーチコンソールで検出された次の日には良好に転じたが(CLS=0.08で以前と変わらず）、サーチコンソールの検出結果はアクセス集計値を反映するので、あと数日様子を見た方がよいかもしれない。 件数としてはほぼ投稿した記事数に近いので、個別の記事の構成ではなくブログのレイアウトデザインに関係すると考えられる。
前回と同様にPageSpeed Insightsで分析してみると、前回改善時は累積レイアウト変更(CLS)は0だったが今回は0.145になっていた。
次にAvoid large layout shifts(レイアウトが大きく変わらないようにする)を見ると、要因が2つあり1つは<div class="entry-content">で0.145、もう一つは<ul class="globalheader-right-nav">となっている。
前回はコメント表示をはずすことで改善したが、今回のentry-contentはブログ記事本体のことで単純に削除するということはできない。またglobalheader-right-navは一番上にあるはてなブログのヘッダー部でpro版でないと表示は消せない。特にentry-contentに関する部分は前回から変更していないのでpageSpeed Insights側の仕様変更があったと思われる。（分析結果の表示も前回と変わっている）
entry-contentをセレクタとするデザインCSSを眺めてながらモバイルでの表示を改めてみると、フォントサイズがいくつか大きくてレイアウト的に不自然なものがあり、以下のようにブログ内のフォントサイズを調整した。
ただしCLSの改善には至っていない。
@media(max-width:480px){ /*モバイルデバイスの表示幅*/ #title a{ font-size:80%; /*ブログタイトル（つれづれなる備忘録)の文字サイズ*/ } #blog-description{ font-size:70%; /*ブログ説明(日々の発見・・・)の文字サイズ*/ } .entry-content h2 { padding: 0.1em 0.2em; /*上下 左右の余白*/ font-size:100%; /*ブログ内の文字サイズ*/ } .entry-title { font-size:110%; /*記事タイトルの文字サイズ*/ } .table-of-contents { padding: 0; font-size: 90%; /*目次内のの文字サイズ*/ } .table-of-contents:before { font-size: 100%; /*"目次"の文字サイズ*/ } .entry-content a { font-size:80%; /*リンクの文字サイズ*/ } /*以下略*/ }
今回はCLSを改善する有効な対策が考えにくいが、ここ数日の推移をみていきたいと思う。
