とりあえず1〜2日おきでも日記は書いとこの精神。 HTML/CSSのお勉強 上級編まで一通り進めてみた。 学習の仕方が実際にコーディングする形式で、飽きがこないように繰り返して以前使ったタグを使用させてくる。 一回じゃ覚えられなくて何回も「文字のサイズは…（戻って見返し）font-sizeな」って感じで何回もやらされるので気がついたら「知っとるわ！」って感じになった。 体に染み付くように学習が進められるので身についた感じがする（あくまで感覚だが）。 ここまで進めて実感するのはHTML/CSSを今まで全く気にしていなかったんだなぁということ。 定義の仕方やコロンの付け方も思ってたのと全然違った。 また、レスポンシブデザインもどういう仕組みか良くわかってなかったが実際に作って見ることで雰囲気掴めた。 実際の現場ではパッケージやらフレームワークやらで対応する（のか？それすら良くわからんけど）と思うので、ここまで愚直には記述しないんだろうけど、そういうものは仕組みを知った前提で動かしたいので理解できたのはとても良かった。 次はJavaScript、と思ったらProgateのサーバが死んだ…。 息子の熱が不安定 前回の日記のあと一回元気になって保育園いったのだが39度の熱が出て結構慌てた。 子供はすぐに上がったり下がったりするから大丈夫だろ（狼狽）って感じになったものの、本人は何故かいつもより少し元気ないくらいで普通にニコニコ遊んでる…不思議…。 結局1日経ったらある程度熱が下がって今朝にはいつも通りになっていた。 明日はいつも通り保育園に行けるといいけど、暫くは上がったり下がったり繰り返しそう。 ブログの話 Google Search Consoleから「AMPページでエラー出てるから直せ」って怒られた。 AdSenseさんから「お前のページ不適切だから却下」って言われた。 そろそろ記事毎にサムネイルとか作ってみたいなぁ。 そもそもテーマいじってみたいなぁ。 息子のスペルをSONじゃなくてSUNにしてた。あながち間違ってない（という言い訳）。 そんな感じ。

完全に日記。 今までC言語とShell位しかまともに触ったことがない自分がもっと凄いプログラマーになりたいと思いながらもJavaだったりGoだったりPythonだったりRubyだったりをちょっとずつ触れてたが、深くまでは触れてなかった。 余り良いことでは無いけれどもモチベーションというかそこら辺を上手くコントロールできていない状況が続いている。スピード感的にはHello World！Goodbye World!って感じでちょっと触ってはしばらく放置を繰り返してた。 Progateとの出会い こんなデカデカと書いてるけどProgateの回し者とかではない。 何だか色々な技術に触れられるようになってどれもこれもと思ってるうちに目が回り始めたので初心者向けだったり入門しやすいものから改めて触ってみようと思った。 そこでこれ、ProgateでHTMLとCSSから勉強を開始してみた。サイトが見やすいのもそうだし全部ブラウザで完結してるから新たに環境作って、とかしなくても良いのが楽。 一番意外だったのは面白かったこと。HTMLとCSSなんて今更感があるけれども今までの人生で触れたのは10時間も無いと思う。どことなく芸術、美術寄りなイメージが先行して「ここは俺の領土ではないし、あんまり面白くなさそう」みたいな良くわからない意識があった。Hugoでテーマ作って見たいとかそこら辺の気持ちもあったので迷って何もしない位ならここら辺が今は面白いので勉強してみようと思った。ちなみに似たような勉強用のサイトにドットインストールというものがあり、そちらも併用してる。 息子の風邪が治らない 1歳児位だと良くあるみたいだが、中々治らない。 治ったと思って保育園に連れて行くと昼過ぎには熱をあげて迎えに行く必要が出てくる。 土日はケロッとして遊んでいたので突然熱が上がったと聞くとびっくりする。 面倒とかそんなことよりも熱で辛そうにしてるのを見るが辛い。30年前、自分が熱をあげるたびに親はこんな気持ちになってたんだろうかとか色々思い耽った。

Hugoの公式を眺めてて見つけたここに書いてある内容。 Hugo is a static site generator. By using Hugo you are already standing on very solid ground. Static HTML files on disk are much easier to reason about compared to server and database driven web sites. But even static websites can integrate with external services, so from version 0.41, Hugo provides a Privacy Config that covers the relevant built-in templates. Hugoは静的サイト生成プログラムだけど、静的サイトでも外部サービスと統合できるからバージョン0.41以降は関連する組み込みテンプレートについてのプライバシー設定を提供するみたいな話が書いてる。 サイトのプライバシー設定について 設定一式はconfigのyamlやtomlに追加する。内容については一旦全てオフの状態になっているのでサイト毎に管理者がちゃんと設定してねって書いてた。 tomlコードはこんなのでコメントに適当な和訳入れた。（合っているとは限らない） [privacy] [privacy.disqus] disable = false #機能を無効にする [privacy.

Youtubeのリンクを貼ってみたかったのでshortcodeをを実装する。 shortcodeとは htmlタグのテンプレートのようなものという認識。 例えば記事内に画像を貼り付けるとき、一々htmlで細かく記述してられないので使う。 themeによっては用意されているものもあり、Robustだと画像の貼り付けは以下のように記述できる。 {{% img src= “images/icon.jpg” w=“auto” h=“200” %}} （shortcodeのシンタックスハイライトがどうにもできない） 形としては {{% shortcode名 引数… %}} って感じ。 上の画像貼り付け用のshortcodeをエスケープしないで記入するとicon.jpgの画像が出てくる。 実際にhtnlで記述しようとすると以下のようになる。 <figure> <img src="http://localhost:1313/images/icon.jpg" alt="" width="auto" height="200"> </figure> 毎回ベタ書きしてると大変なのでよく使うものは作っておくと便利って機能。 shortcodeファイルはlayouts/shortcodesの中にshortcode名.htmlという形で保存する。 shortcodeで何をしたいか 今回はYoutubeの埋め込みを簡単にしたい。 そのため動画のidのみで動画が埋め込めるようなshortcodeを作成する。 埋め込んだ動画ウィンドウのサイズはレスポンシブっぽくしたい。 shortcodeの実装 htmlでYoutubeの埋め込みを作る。 実際にYoutube画面にある共有->埋め込みを押したときに出るコードをコピーして利用する。 共有ボタン 埋め込み コピーしてきたものからsrcの内容を少し変える。 動画のIDが入る部分を変数の形として置き換えることでIDのみを変更する形で利用できるようにするイメージ。 使用するときのshortcodeイメージは以下。 {{% youtube id=“動画のID” %}} 実際にYoutubeの埋め込みからコピーしたhtmlは以下。 <iframe width="560" height="315" src="https://www.youtube.com/embed/rjTniCA74PQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> これをdivで囲んでsrcを一部書き換えたのが以下。 class名はmovie-wrapとした。 <div class="movie-wrap"> <iframe width="560" height="315" src="https://www.

引き続きブログの整備。 タブとかに出てくる画像、faviconの設定をした。 あとAdsenseとかその辺りも使えるようにしたかったので登録からやった。 faviconについて 画像をアップロードすると一括でアイコンを作成してくれるサイトを利用した。 様々なファビコンを一括生成。favicon generator 設定したいなーと思いながら、画像準備するのに2時間も3時間も掛けたらやる気無くしそうだったので手軽な感じのこれを選んだ。ちゃんとしたサイト作る場合は画像をサイズ毎に用意する必要のある、 ファビコン favicon.icoを作ろう! こちらを使うと良いのかなと思った。ただアップロードする以上セキュリティ的にはアレなので個人利用に限るのかなといった感じ。 画像の用意 何はともあれ画像を用意する。 ポイントとしては拾って使うなら規約に気をつけることと、なるべく正方形であること。 偉い人達は自分を示すかっこいい（かわいい）イカしたアイコンを持ってるが自分には無い。規約も意識したくなかったのでいとこの家で撮った大好きな犬の写真にした。 この画像を上記サイトで纏めてfavicon用に整形してもらう。 落としたzipファイルからicoファイルを取り出してstatic/imagesの中に入れておく。 何も考えずico使ってましたけど知ったかぶってたので調べた。 favicon大解剖 〜必要サイズから検証時の注意点まで〜 複数サイズの画像を1ファイルに纏めてくれる。 Hugoの設定 例の如く他の方のサイトを参考にした。 Hugoで静的サイトを作る(3) 細かい設定 ～ ビルド Robustではfaviconをデフォルトでは設定できないはず（2018年6月17日現在）。 なので、ページのhead部の情報を纏めてるmeta.htmlを弄る。 themeの中のlayouts/partials/meta.htmlをコピーして自分のとこのlayouts/partialsの中に貼り付け。以下の文章を貼り付けることでfaviconが設定された。 <link rel="shortcut icon" href="/images/favicon.ico" /> favicon.icoの所が保存したicoファイル名になる。 Adsenseの登録 公式サイトにて。 規約など見ながら個人情報やらを登録。 最終的にサイトのhead部に指定したScriptをコピペしてと言われるので従う。 Hugoの設定のところにも書いたけれどRobustテーマではhead部をmeta.htmlで纏めてる。 なので同様にmeta.htmlにコピペしておく。 サイトソースをどのページから見てもhead部にコピペしたscriptがあるのを確認。 これで良いのかは分からないけど一先ずこれで様子見。

ブログを作ろうとは前から思ってたけど、昔使ってたブログサイトの思い出からWEBページで記事書くのは嫌だなぁと（10年前位…今は色々できるだろうけど当時は知識も無かったから文章書いてボタンとか使って整形して、画像保存して限られた容量でアップロードして…とかが結構面倒だったという思い出補正もある）。 AtomとかでMarkdownで記事作ってリポジトリで管理してデプロイまで適当にうまくやってくれるのを全部無料で、、、そんなのできるかーいと思いながらもググったらできそうだったのでやってみた。 ブログの構成 ブログ本体 本体という表現が正しいかはさておきHugoで作成。 テーマは日本のHugoユーザーならお馴染みであろうRobust。 静的サイトジェネレータだとかそこら辺の解説は詳しいサイトにお任せ。 リポジトリ Bitbucketを使用。 無料でPrivateな奴が使いたかったのでGithubではなくこちらで。 サーバ Netlifyを使用。 使った理由は基本無料だったのと、Pushしたら自動的にデプロイしてくれるから。 サイトも見やすくて英語Noobな自分が直感的に操作できるUIもよかった。 全体の構成について参考にしたもの ブログの構成 NetlifyでHugoで作った静的サイトをホスティングしてビルドを自動化する - Snaplog 基本的にはこのサイトを参考にして作成した。 リポジトリはGithubじゃないけど立ち上げに関しては戸惑うことなく出来た。感謝。 Hugoについて参考にしたもの Hugoのテーマに関する参考サイト HUGO のテーマ Robust のカスタマイズver3 - zzzmisa’s blog パッと見たときに見やすくて綺麗なサイトだったので参考にさせていただきました。 デフォルトのアイキャッチはぱくたそから「車の窓で居眠りする犬」。かわいい。 まだデフォルト要素やパクったままでちゃんと動作しないものもあるので整備していく。 Hugoで困ったこと Table Of Contentsを出したかったけど出し方が中々分からなかった。 このページの上にもある灰色背景の見出しを纏めてくれるイカしたアイツ。 1時間位探して以下のサイトに書かれていたのを発見。 Hugo のテーマを Cabaret に変更した -mano.xyz その他 目次(Table Of Contents, toc)を表示するには toc=true と指定する． あっはい。 よく見るとRobustテーマのreadmeにも書いてた。 FrontMatterに追加して表示できた。 Bitbucketについて参考にしたもの 基本的な使い方

ゲームもプログラムも子育ても何でもやりたい人。 ブログは前から作ろう作ろう思って放置してた。 なんと言うか憧れの一軒家って感じ。 建築は一向に終わらないけどわくわく感ある。

Content Manager