sessionStorage

正規のHTML内に書かれた操作ではなく,デベロッパーツールのConsoleにJavaScriptを打ち込んでウェブページを色々と操作しようとしている. ページが移動すると,関数がクリアされるのが難点だ. sessionStorageを使って,関数やその他のデータを保存しておけば,なんとかなりそうだ. ただし,すごくトリッキーな使い方で,本来の使い方ではなさそう.

プログラミングと文章の構造化

プログラムを書いていると文章を構造的に書くのに役立つと思う. 関数が1つの段落だとすると,関数のトピックセンテンスは返り値である. 何を出力したいかが明確でないと,関数は書けない. ある関数から次の関数につなぐのは,引数や返り値である. これによってプログラムがつながっていく. 文章もキーワードなどによってつながっていく.

手作業とスクリプト

JavaScriptを勉強していると,普段使うwebツール上でマウスを駆使してクリックしているのがアホらしくなってきた. 一度だけの作業ならまだしも,同じような作業の繰り返しを定期的にしなければならないことがある. チェックボックスを探してそれをクリックするなどだ. 手作業で同じことをするのは面倒だし,間違いのもとである. JavaScriptで,使いそうなスクリプトを組んでみた. たぶん,それなりに使えそうな感じ. 手を抜くための苦労はいとわない.

関数・ドキュメントの整理

植生調査アプリの基本機能のスクリプトは完成にかなり近づいた. ただ,コードを書きなぐってきたので,コードが汚すぎる. JavaScriptのコーディングスタイルに合っていないのは仕方ないとして, たぶん,不要な関数があったり,関数の引数が統一されていなかったりするあたりは整理が必要だ. どれが不要な関数かどうかはよく確認しないといけない. 一応,関数の関係性を確認するコードをRで書いたので,それを使って不要な関数を洗い出そうとするが,うまくいくかどうか. 関数の説明をちゃんと書いていないのも問題だ. このあたりは,徐々に整理する予定.

CSSでレスポンシブ・レイアウト

HTMLのtableはデータの整理には便利だが,項目が多くなると1行がどんどんと横に長くなってしまう. パソコンであれば良いが,スマホやタブレットではちょっと使いづらい. そこでレイアウトをレスポンシブ(画面サイズに合わせた表示)にする必要がある. そのあたりの変更を自動でしても良いが,植生調査アプリでは使用者がボタンを押して切り返す仕組みにした. ボタンを押すと,JavaScriptでスタイルを書き換えて,表示を途中で折り返すようにした. だいぶできてきた. アプリ(CSS/JavaScript別ファイルバージョン) https://matutosi.github.io/biodiv/biodiv.html アプリ(1ファイルバージョン) https://matutosi.github.io/biodiv/biss.html 使用例 https://matutosi.github.io/biodiv/exam01.html

this

JavaScriptでのthisはよくは分かっていないが,使い方によってはすごく便利. inputタグのところで,とりあえず"onclick" =“fun(this)“としておけばあとでなんとかなりそう. 取り出しは,“this"や"this.parentNode;"(さらに親Nodeが欲しければ,".parentNode"を追加)でなんとかなりそう.

植生調査アプリの仮公開

引き続き,植生調査アプリは完成まではまだまだだが,なんとなく形はできていた. とりあえず現状は以下のURLのような感じ. https://matutosi.github.io/biodiv/biodiv.html

ShinyとJavaScript

引き続き,植生調査アプリのコーディングをしている. JavaScriptのお作法は相変わらずよくわかっていないが,Shinyでのアプリ作成やRのパッケージ作成の経験が活用できている気がする. Shinyではmodule化することで,コードを簡潔に書くことができる. https://github.com/matutosi/textmining https://github.com/matutosi/ecanvis https://github.com/matutosi/moranajp Shinyの内部で具体的にどのようなことがされているのかまでは確認していないが,たぶんこんな感じだろうと想像しながらmodule化している. そのおかげで,汎用的に使えるものができそう. ただ,コードを書き散らしているので,説明の文書が中途半端な状態だ. また,関数の入出力を統一できていないし,未使用の関数も残っている. このあたりの整理は今後ぼちぼちとする予定.

DeepL API

Google翻訳も良いが,DeepLの翻訳は結構自然で良い. APIが使えるのはしばらく前から知っていたが,手を出していなかった. ちょっと調べると簡単に使えそう. https://qiita.com/yaju/items/bf4613393cd4ee402d17 上のページのものをちょっと改変してJavaScript版で作ってみた. APIは自分で取得して,それを入力する必要がある(16行目). https://gist.github.com/matutosi/01bbc564ba3ae249f121965dc725b649

JavaScript

JavaScriptはブラウザさえあれば,実行できるのが良い. GoogleChromeであれば,F12でコンソールなどが出てきて,テストやデバッグができる. オブジェクトの中身もブラウザの中身と対比して見ながら,チェックできる. コンソールの補完機能も便利だ.