うさぎの知ってること

Everything I know.

何も書くことが浮かばなかったら(フリーライティング)
Family

何も書くことが浮かばなかったら(フリーライティング)

娘(6歳)から「先生に手紙を書きたいけど何を書いたらいいかわからない。」と相談を受けたので、フリーライティング(ノンストップ・ライティング)というものを教えてあげました。 フリーライティングのルールは、 『決められた時間、手を止めずに書き続ける』 だけです。 自分でやるときは5〜10分程度の時間は取りたいのですが、今回は子どもの集中力が続くように、ひとまず1分間、ストップウォッチで計りながらスタート。 娘の手が止まって考えそうになったら、「手は止めないで、何も考えなくていいから、思いついたひらがな書くだけでもいいから手は動かして」と声掛けをするようにしました。 わたしねりぼんがすきです。 あとわぷーるもすき みずぎがおおきくなったのでちがうのにストップ! 筆が乗り、もう少し書きたそうでしたが、ここは時間通りに止めます。 その後、

  • usagizmo
    usagizmo
Family

家での生活を充実させるために買ったもの

ホームシアター4人の子どもが常に家にいてうるさいので、まとめて映画を見させておこうと。 家の中で鬼ごっことか、してますからね。 [Netflix / Amazon Prime Video / 録画した映画] を1日2時間程度、見れることになってます。 vankyo プロジェクター ホームプロジェクター 300インチ 1080P 15°台形補正 大画面 1920×1080 4KフルHD対応 6500ルーメン ホーム用 ビジネス用 V600-NEW オンライン通販のAmazon公式サイトなら、vankyo プロジェクター ホームプロジェクター 300インチ 1080P 15°台形補正 大画面 1920×1080 4KフルHD対応 6500ルーメン ホーム用 ビジネス用 V600-NEWを パソコン・周辺機器ストアで、

  • usagizmo
    usagizmo
Nuxt.js

Nuxt x FirebaseでもSSRするときはNow (ZEIT)がオススメ

NuxtでSSRしたい!と思って、Cloud FunctionsとFirebase Hostingを利用していたものの、作り込んでいくにつれてどんどん複雑に…。 試しに Now を使ってみたところ一気にコードがスッキリしたのでご報告。 Cloud Functionsを使ったSSRってどうやるの?Functions (+ Hosting)でSSRができれば、静的ファイルはHosting、動的の箇所だけFunctionsが応答してくれるのってスゴイ!もうサーバのことを考えなくていいのでは?と思いました。 こちらの方法は少し調べれば色々と出てきます。以下が一例です。 【v2対応】Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築するNuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現するnuxt.js + firebase (cloud functions) で最小構成SSR私もはじめはこちらなどを参考に構築していたのですが、次第に複雑に。 どこが複雑になったの?実装の際に気になったところ、苦労した点をいくつか。 Nuxt(標準)サーバがFunctions上で動くわけではないNuxtを導入すると、code yarn devで開発用のサーバが立ち上がり、yarn build

  • usagizmo
    usagizmo
WordPress

WordPressのローカル開発環境を整える

テーマ開発やプラグイン開発の際にWordPressのローカル開発環境を整える必要がありますが、Local by Flywheel を使うと最高に楽でした。 サイトの追加サイトを準備するディレクトリはデフォルト ~/Local Sites/(サイト名) でもいいが、別のディレクトリも選択できます。 Local Setup 01CONTINUE を押すと“ファイルを上書きしてしまうかもしれません”のようなアラートがでますが、app/ と logs/  (+Custom のみ conf/) ディレクトリ以外は上書きされません。 .git/ とかあっても上書きされないので。大丈夫。 環境の設定は本番サーバに合わせるか何でもよいですが、Preferred でなく  Custom を選択しておいたほうが柔軟ではあります。 Local Setup 02Preferredconf/ ディレクトリが出力されないため、サーバの設定を確認・変更することができません。 テーマ開発やプラグインの確認など、単発で利用する分にはこちらでも問題ありません。 Customconf/ ディレクトリが作成され、 php.ini

  • usagizmo
    usagizmo
Quote

仏説・摩訶般若波羅蜜多心経

観自在菩薩・行深般若波羅蜜多時、照見五蘊皆空、度一切苦厄。 舎利子。色不異空、空不異色、色即是空、空即是色。受・想・行・識・亦復如是。 舎利子。是諸法空相、不生不滅、不垢不浄、不増不減。 是故空中、無色、無受・想・行・識、無眼・耳・鼻・舌・身・意、無色・声・香・味・触・法。無眼界、乃至、無意識界。 無無明・亦無無明尽、乃至、無老死、

  • usagizmo
    usagizmo
Math

高校数学ってプログラミングで使う?

Webシステムの開発のためにプログラミングをしていて、高校数学が役に立った事例をいくつか紹介します。 ド・モルガンの法則ド・モルガンの法則このような記号で、『A の真偽 / ∧ と ∨ / B の真偽 を反対にしたものは、元のと同じだよ』という法則のようです。 記号だけ見てもよくわかりません。 ド・モルガンの法則 - Wikipedia 前提※ A は「りんごが好き」、Bは「力が強い」に置き換えると読みやすいかもしれません ∧ は論理積と呼ばれ、要するに「絞り込むやつ」です。 A ∧ B だったら、A かつ B と読みます。「A でも B でもある者に、この王冠を授けよう」的な、条件に合う数を絞り込むときに使います。 プログラミング言語ではよく

  • usagizmo
    usagizmo
Strapi

Strapiの特徴

Strapi (読み方はストラピ?)は Headless CMS です。 このメモ帳も Nuxt と Strapi で作られています。 最高すぎるところ動作が早い とにかく管理画面の動作が早く、思考の邪魔をしない。システムとして理想的。最高。 GraphQL面白い いつかは触りたいなと思っていたものの、はじめ方がよくわからなりませんでした。Strapiならコマンドひとつでプラグインを導入すればあら不思議、GraphQLが使えるようになったのです! DB構造がシンプル WPの場合は投稿・固定ページ・カスタム投稿もすべて wp_posts テーブルで管理されるので直接操作しようとすると中々の手間になります。Strapiなら追加したコンテンツ (Content Type) ごとにテーブルがひとつ追加され、RDBの設計として簡単に情報を管理することができます。 例えばこの『メモサイト』では Memo という CONTENT TYPE を追加しているのですが、そうすると複数形memosのテーブルが作成されて、1メモ1レコードとして適切に管理することができます。 残念なところデプロイが超絶に面倒

  • usagizmo
    usagizmo
Nuxt.js

Nuxtで動的にサイトマップ (sitemap.xml) を作成する (use: ApolloClient)

nuxt-community/sitemap-module を使いました。 nuxt.config.js でApolloClientを利用するために、apollo-link も必要そうです。 ::: note apollo-link の使い方はこちら。 このパッケージに、後に利用する apollo-client apollo-cache-inmemory apollo-link-http も含まれているようです。 ::: はじめにパッケージをインストールします。 yarn add @nuxtjs/sitemap apollo-link 次に nuxt.config.js の設定変更です。 sitemap.routes() にて、記事の一覧を取得して配列 (Promise) で返却すれば完了です。 ::: filename nuxt.config.js ::: +import { ApolloClient } from 'apollo-client' +import

  • usagizmo
    usagizmo
Device

家の中を監視するロボット (Victure | MANOMA)

私は以前、私は家の中を監視するロボットとして Victure 1080P を使っていました。 これはとても便利で、家の中を見守るための十分な機能がありました。 外出先でも、いつでも家の中を見ることができるSDカードを差し込んでおけば24時間映像を録画してくれていて、いつでも見返すことができるあたりが暗くなれば自動的に暗視カメラに切り替わり、暗闇でも問題なし動作検知モードを起動しておくと、画面内で動きがあった場合にスマホに通知がくる常にスピーカーをONにしておくこともできるので、(他の子どもが騒ぐため)別室に置いている赤ちゃんをモニタリングしておくこともできました。 ここまでしてくれるロボットが4,000円で購入できるというのもスゴいと感心していました。 家のネット回線は So-net を使っていて、そのおかげ (?) で「新サービスMANOMA(マノマ)はいかがですか?」という電話がありました。 「月額4,000円で家の中を見守ることができ、スマートロックも利用できます」と。 一通り説明を聞いてから、上記の「Victure のようなロボットとどこか違いはありますか?」と伺ったところ、「セコムくらいでしょうか……」とのこと。 んー、そこに月額4,000円は高いな……と思い、今回は断らせていただきました。 ただ、(室内カメラにセコムをプラスするだけで月額4,000円とるか?

  • usagizmo
    usagizmo
Nuxt.js

Nuxtでマークダウンを使う (markdown-it x Prism)

過去のメモ帳は Nuxt と Strapi で作られています。 Strapi のリッチテキスト形式のフィールドで記事を書いているのですが、このフィールドはマークダウンで入力できるようになっています。そのマークダウンをHTMLに変換して表示させる必要がありました。 入力画面markdown-it は何を使おうNuxtコミュニティの開発する @nuxtjs/markdownit を使うのが楽なのですが、外部リンクの場合は自動的に target="_blank" を付ける方法がわからなかったので、本家の markdown-it をNuxtのプラグインにして使うことにしました。 直接使った方がカスタマイズがしやすいということはよくあります。 どうやって使う?markdown-itで外部へのリンクのみtarget="_blank"する方法 - Izm Log を参考にして target="_blank" を付与したのと、それに rel="noopener noreferrer" を追加しました。 なぜ追加したかは リンクのへの rel=noopener 付与による Tabnabbing

  • usagizmo
    usagizmo
Math

二点間の距離を測るには Math.hypot(x, y) が便利

常日頃プログラミングをしていて、二点間の距離を測りたいときはよくあることかと思いますが、Math.hypot を使うとこれを簡単に求めることができます。 二点間の距離の求め方原点(0, 0)から点P(x, y)までの距離dは三平方の定理より導くことができます。 点1を(x1, y1)、点2を(x2, y2)とおくと、二点間の距離は以下になります。 Math.sqrt+Math.pow三平方の定理による計算をそのまま表すと、 // ES5 const d = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y2, 2))Math.hypotES6 から

  • usagizmo
    usagizmo
Device

iPhone 6s Plus から Pixel 3a XL に変えたけど最高

一昨日 (5月23日) Pixel 3a XL が届き、iPhone 6s Plus から乗り換えました。一言で言って最高です。 ※ iPhone 6s (Plus) は 2015年9月25日 の約4年前に発売された端末ですので、性能を比べられるものではありませんが、古いスマホから乗り換える理由をもたらした端末になったと感じました。 なぜ Pixel 3a XL に決めたのかPixel 3a に決めた理由は主に3つになります。 カメラの性能手の出しやすい価格帯Google 純正以前に妻の知り合いが、iPhone X のポートレートモードでうちの子の写真を撮って見せてくれたときに、『最近のスマホはこんなキレイに撮れるのか…』と興味を持ちました。 子どもの写真は今しか撮れない(何でもそうではありますが)ので、せっかくならキレイに残したいと思っていたのですが、カメラ性能のよい端末は10万円を超えるほどに高いものばかりで、手を出すことができませんでした。 手頃な価格でキレイに写真が撮れるスマホはないかな…と、スペック×コスパ最高の Xiaomi

  • usagizmo
    usagizmo
Parcel

ParcelでHTMLファイルのインクルード/インポートを行う

HTMLのヘッダーなどの共通項目をひとつにまとめたかったので。 Parcel × PostHTMLHTMLを出力する仕組みに PostHTML というものがあります。PostCSSのHTMLバージョンみたいな感じです。 Parcel はこれを、.posthtmlrc(JSON) ファイルを作るだけで利用できます。 ※ .posthtmlrc.js,posthtml.config.jsでも可 posthtml-import を取得HTMLのインポートには posthtml-include を使います。 似たようなパッケージに posthtml-import がありましたが、GitHub でのバッジと人気度から判断して利用しませんでした。 yarn add -D posthtml-include .posthtmlrcを作るファイル名は間違えないように ポストHTMLrc と口ずさみながら打ち込みます。 { "plugins": { "posthtml-include": { "root": "./src" } } } .posthtmlrcちなみにrcは Run commands の略。 参考: .bashrc とか .npmrc

  • usagizmo
    usagizmo
息子とカブトムシ
Family

息子とカブトムシ

息子(小学1年生)と公園に行った帰り道、70代ほどの老夫婦に声をかけられた。 おばあちゃん「(息子に手招きしながら)おにいちゃん、ちょっとおいで。ここにカブトムシがいるよ」 私「おー、せっかくだし見てみようよ」 おばあちゃんの好意に甘え、息子にカブトムシを見せてあげよう。昆虫がどのような構造になっているか、この時期の経験は大切だ。そう思いながら息子の手を引き、やすやすとついていってみると、地面にカブトムシが、倒れていた。 (あれ、なんだか元気がないな…弱ってるのかな…。ん、右半身がないぞ…。え、あー、頭と左羽しかない状態で少し動いてるなぁ……) そこには死の直前で、大量のアリに囲まれているカブトムシがいた。

  • usagizmo
    usagizmo
Family

子どもに壊されたもの

物品本の表紙・帯全部外されてクシャクシャにされた。 未使用の学習教材開封してスタンプを押したり。 きれいな状態なら売れたのに。 トランプ・カルタ・カードゲームハサミで切ったり、折って千切ったり。 四神の置物水晶部分だけ無くされた。4体とも。 ライオンの壁掛けFrancfrancで購入した1万円ほどする壁掛け。鉛筆で落書きされた。 電化製品Fire TV Stick のリモコンコップに水を溜めて、その中に入れられてた。 空気清浄機吹出口におもちゃを入れられて3台やられた。現在は4代目。 [追記] 倒されて4代目も水漏れするようになった。 PS3DVDを力ずくで2枚入れられて取れなくなった。 タブレット型のおもちゃ足で踏まれて壊れた。 iPad mini落として割られた。1万円ほどで修理したあと、また落とされた。 MacBook Proコップを倒して麦茶をかけられた。しばらく動かなかったが、縦に置いて放置していたら2週間ほどで復活した。 ボールペンで落書きされた。傷がついた。 Wi-Fi ルータボールを落とされて足が割れた。 住宅壁油性マジックで落書きされた。 床ライオンの壁掛けを落として床に穴を空けられた。 ホワイトボード油性マジックで書かれた。マジックの軌跡をホワイトボードマーカーでなぞってから消すと消えるという豆知識を手に入れた。 まとめ本当に大切なものは隠しておくこと。

  • usagizmo
    usagizmo