アプリケーションのアドレス管理
アプリケーションのアドレス管理ファイルを作る
プロジェクトルートのプロジェクトと同名DIRにあるアドレス管理ファイル(今の例で言えばdjango_app/urls.py)に、helloアプリのアドレス管理をさせたが、このファイルは複数のアプリケーションを含んだプロジェクト全体のURL管理をするものらしい。実際にはアプリケーションごとにurls.pyを置いたほうが、各アプリケーションのURL管理はやりやすい。そこでデフォルトでは用意されていないがhello/urls.pyを作る。
Djangoでhelloアプリケーションを作る
アプリケーションを作る
プロジェクト名をdjango_appとした前提で進める。プロジェクトルートがdjango_appというDIR名。
プロジェクトルートにてpython manage.py startapp アプリケーション名でアプリケーションを作る。
$ cd ~/MyProject/django_app/ $ python manage.py startapp hello $ ls db.sqlite3 django_app/ hello/ manage.py*
helloアプリケーションのDIRが作られている。
はてなブログでソースコードにタイトルを付ける
はてなブログに載せたプログラムのソースコードにタイトルとか付けたい時ってありますよね。 Hugo とかの静的サイト・ジェネレータでテンプレートとか SCSS とか載せたいけど、コードを書いたファイルの置き場所は仕様で決まっているので、そのファイルのパスも明示してコードファイル名をキャプションにしたい。そういう需要はけっこうあります。
検索するといろんな方がいろんな方法でやっていて、中には JavaScript まで使っている方も居たりとか。私も Jekyll や Hugo の記事に使うのにフィルターやらショートコードやら自作してやっていたんですが、そういうの連発すると、もとの Markdown の可読性が低くなって読みづらいです。ソースコードにタイトルを付ける程度のことに、JavaScript 使ってサイトを重くしたりしたくないし、何か簡易な方法は無いものかと。
続きを読むHugo のレイアウトの仕組み
テーマの無いテスト用サイトを作る
普通はthemesDIRに任意のテーマをインストールすることで、サイトの基礎になる最低限の見た目が表示されるのだが、Hugo のレイアウトの仕組みを理解するためにわざと既存のテーマをインストールせずに進めてみる。
新しい Hugo のテスト用サイトを作りサーバーを起ち上げる.
続きを読むHugoの設定ファイル
設定ファイルのデータ
config.tomlにはデフォルトでbaseURL(サイトのURL)、languageCode(使用する言語)、title(サイトのタイトル)の３つが定義されている.
他に使用するテーマをthemeで指定する.他の項目はテーマによっても違うのでテーマのドキュメントを読む必要がある.
Hugo で記事を作成する
記事の作成
hugo new 記事へのパスでcontentDIR配下に新しい記事が作成される.「記事へのパス」は直接ファイル名のみならcontent直下に、フォルダ名/ファイル名などとするとcontent/フォルダ名/ファイル名の形で作成される.content内にフォルダ名のDIRが無い場合は自動的に新しく作られる.
いまさらの Hugo
Hugoを試してみた感想
Jekyll はもう古くなってきていると一部では言われている。ただ静的サイトジェネレータとして老舗なのでユーザもまだ多く、使いやすい仕組みが沢山盛り込まれている。問題は記事レンダリングのスピードが遅くなってきていること。Ruby の問題も大きいかもしれないが、その点は Python製のサイトジェネレータでも同じなので、それらがいまひとつ流行らない一因かもしれない。
何に乗り換えようかと Gatsby、Hugo, Gridsome などいろいろ試している。Gridsome が一番気に入っているが、まだまだ日本語ドキュメントが少なく、自分で記事を書くにはまだ早い。もう少し試しながら待ちたいところ。
それで今は、割と古くからある Hugoを試している。
続きを読む数学系ファイルの表示テスト(Markdown版)
テスト結果
- 図がSVGファイルの場合は表示されない。画像としてアップロードされた図は表示できる（PNG,JPEG）
- 数式ブロックで行揃えのための
&を使っているとエラーになる。おそらく他にもエラーになる構文はあるだろう。
除算アルゴリズム
◎ 任意の整数 $a$ と自然数 $b$ $(b>0)$に対して、
$$ a=qb+r ~~~~(0\leqq r<b) $$
となる整数 $q,r$ が一意的に(ただ一組だけ)存在する。
【証明】
この $a=qb+r \ (0\leqq r<b)$ を除算アルゴリズムの式と呼ぶ。
例えばある２つの実数 $A$ と $B$ があるとして、 $A<B$ のとき、 $A$ 以上 $B$ 未満の区間を $[A,B)$ と表すことにする。
続きを読む数学系ファイルの表示テスト
テスト結果
- こちらはVSCodeでMarkdownで書き、マークダウン拡張（Markdown Preview Enhanced）でプレビュー確認したものを、CDNでMathJaxを読み込むように設定したHTMLで書き出し（プレビュー画面から右クリックメニューでできる）、そのBODYタグの内部のみをはてなブログの記事投稿画面に貼り付けたもの。
- SVGファイルの図は、どうやら埋め込まれているようで、綺麗に表示される。これなら画像変換してアップロードとかも不要。
- 元の.mdファイルでは、SVGファイルはマークダウン記法ではなく、HTMLのimgタグで書いている。多少面倒だが、パターンは同じなのでコピペでOK。このほうがサイズや位置の調整、CSS用のクラス名など付けれて融通がきく。以下は一例。
<div align="center" class="math-fig"> <img src=fig/2020-11-14-15-58-46.svg width="480" height="auto" alt=""> </div>
除算アルゴリズム
任意の整数 $a$ と自然数 $b$ $(b>0)$に対して、
$$a=qb+r ~~~~(0\leqq r<b) $$
となる整数 $q,r$ が一意的に(ただ一組だけ)存在する。
【証明】
この $a=qb+r \ (0\leqq r<b)$ を除算アルゴリズムの式と呼ぶ。
続きを読むnpm アプリインストール時の通信エラー
最近 npmで何らかのアプリをインストールする時に通信エラーというか、ダウンロード先のアドレスが認識できないエラーが発生する.
例えば、Nuxtプロジェクトのインストール時
$ npx create-nuxt-app プロジェクト名
のコマンドで以下のエラー
エラー：getaddrinfo ENOTFOUND registry.npmjs.org
エラー出力はもっと長いけど、getaddrinfo とあるので registry.npmjs.org のアドレスが認識できないらしい.
基礎からメモ： Vue.js CH9-p302 ネストされた複雑なページ
ネストされたルート定義をすると、より複雑な画面遷移をすることができる。
これまでの「Product」のコンポーネントは、商品詳細と商品レヴューを表示させるためのベースとし、その中に３つのコンポーネントを定義する。
フォルダ構成としては、viewsの中にHome.vue,ProductList.vue,Product.vueを置き、Productサブディレクトリを作って、その中に次の３つのコンポーネントファイルを置く。
src/views/Product以下に
Home.vue: 商品詳細（コード内ではProductHomeという名前で扱う）Review.vue: 商品レヴュー一覧（コード内ではProductReviewという名前で扱う）ReviewDetail.vue: 個別の商品レヴュー詳細（コード内ではProductReviewDetailという名前で扱う）
アプリ全体のベースコンポーネントもHomeという名前だが、商品詳細はそれぞれサブディレクトリ名のProductを頭に付けた名前でコード上は扱うという形。
はてぶで数式を書くためのテスト(2) MathJaxを使う
フッターにMathJaxを読み込む設定をして使う
フッターに次のコードを埋め込んでMathJaxを使えるようにしてみた。
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js"></script> <script> MathJax = { tex: { inlineMath: [['$', '$'], ['\\(', '\\)']], displayMath: [['$$','$$'], ["\\[","\\]"]] } }; </script>
以前は MathJax を使うと表示が遅かった。しかし、ネット環境やPCのスペックにもよるだろうが、今はローディング時に一瞬元のTeXが見える程度ですぐにレンダリングされる。
Markdownを使っている場合は、書かれたLaTeXテキストを<p>や<span>や<div>といったHTMLタグで囲んでやる必要がある。MarkdownではHTMLはそのまま表示されるので、その方法を活かす。
