素早く開発するコツ 無料で利用でき、特に小規模な開発やマークダウンを書く際はWeb版VsCodeが役に立ちます。Chromebookと一緒に使うと相性がよく数秒から数分で目的を達成できることは非常に喜ばしいです。また、ネットが繋がらない環境でも使える点も非常に素晴らしいです。 メリット 速く使える Google AppsやNotionなどのWebアプリと相性がいい 無料 デメリット 多くの言語はデバックできない 日本語UIの非対応(実はGoogle翻訳が起動する場合日本語化します) 中規模開発や大規模開発が苦手(中規模開発以上の場合インストール版やIDEを検討してみよう) シェルが使えない 開発オススメの言語 以上を踏まえて以下の言語に特にオススメです。 javascript html css markdown json google apps script(コードの検討) 使った感想 気がついたときに早く使えるので速度に関するイライラはなくなるが、機能制限や中規模から大規模開発の苦手さやできないこともあるのでその時に応じた使い分けすると非常に良い。
この記事の概要 「srcset属性使おうかなと思ったんですけど、IE11が非対応だから使えなくて……。」 という会話があったのですが、使っても良いのでは？と思ったので記事にしました。 そもそもsrcsetとは img要素やpicture要素に対して、複数のソースを指定できるものです。 MDN Docsよりコードを拝借しますが、以下のような書き方ができます。 <img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="elva-fairy-800w.jpg" alt="妖精の衣装を着たエルバ"> 若干簡略化して説明すると 色々なサイズの画像を用意しsrcsetに指定する ウィンドウサイズがいくつのときは画像がどのサイズか、といった条件をsizesに指定する 条件を満たす範囲で1番小さな画像が読み込まれる モバイル画面に対して何千pxもあるような大きな画像を読み込まなくなってパフォーマンスアップ といった具合で使えます。 どんな条件でどの画像が選ばれるかの説明は、以下の記事が分かりやすいと思います。 Can I use... ここからがタイトルの内容です。 Can I use...を見てみましょう。 はい、IEは非対応です。 ですが、srcsetが非対応だからと言ってsrcsetを指定したimg要素がまるっと表示できない訳ではありません。1 imgの中のsrcsetは理解できないけど、srcがあればそちらを読みに行きます。 まとめると以下の表のようになり「全員に不適切な読み込み速度を提供するくらいなら、一部の人2だけにでも良い読み込み速度を提供した方が良い」と言えるのではないでしょうか。 srcsetを使う場合 srcsetを使わない場合 IE以外のブラウザを使っている人に 最適な画像読み込みを提供できる デバイスサイズなどに関係なく大きな画像を提供してしまう IEを使っている人に デバイスサイズなどに関係なく大きな画像を提供してしまう デバイスサイズなどに関係なく大きな画像を提供してしまう まとめ IE非対応の属性とは言え、img要素にsrcsetを使うのは（フォールバックが効くので）良いと思われる ただしpicture要素は要素そのものが非対応なので辞めておくかポリフィル利用を検討する方が安全そう picture要素は要素そのものがIEに非対応なので、駄目です。 https://caniuse.com/picture ↩ Statcounterによれば2021年12月時点で、日本のIE以外利用者は98%程度でした。一部の人という言い回しも不適切ですが便宜上こう表現しています。 ↩
経緯 laravelにおいて、formタグでviewのcheckboxからcontrollerに値を渡そうとしたとき、何もチェックを入れていないと、その渡した値がundefinedになってしまった。 checkbox以外で渡すときは値が入っていなくても、undefinedにはならずnullになっていたので不思議に思い、調べてみた。 結果 答えはここにありました 参照元：https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/checkbox <form> <div> <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter"> <label for="subscribeNews">Subscribe to newsletter?</label> </div> <div> <button type="submit">Subscribe</button> </div> </form> 上のようなcheckbox属性のformタグにおいて、チェックされたら値が送信される。チェックボックスにチェックが入っていない場合、値は全く送信されない。 値は何も送信されないので、リクエストの情報を渡した先でその値はnullではなく、undefinedになる。 nullとundefinedの違いとしては、どちらも値が存在しないが、概念があるかないか。 トイレでトイレットペーパーを切らしている状態がnull。 トイレットペーパーホルダーそのものがない状態がundefined。 という違いがあるとどこかで見た。
Next.js のビルド・エクスポート方法 package.jsonファイルに以下のスクリプトを追記する。 "scripts": { // -o 出力先ディレクトリを指定 "build": "next build && next export -o output", // ★追記 }, 以下のコマンドで実行する。 npm run build next/image を使用していると next export でエラーとなる Next.js で利用を推奨されているImage (next/image パッケージ)を利用していると、next export 実行時にエラーとなり、静的 HTML が生成されない問題がある。 2021 年 12 月現在、Next.js を使用した静的 HTML ファイルを作成する場合、Imageパッケージは next export ではサポートされていない。 <Image/>タグを使用して画像を表記している場合は <img/>タグを使用することでnext export 実行時のエラーを回避できるため、本プロジェクトでは画像ファイル利用時には <img/>タグを利用するようにする。 <img/>タグを利用した際の画像最適化 良い方法がないか調査中（★ いい方法があればコメントいただければと思います）。 検討したこと 以下の記事が参考になるかと思ったが、脆弱性(high)を含む npm パッケージが含まれており、node_modules が汚くなるかもしれないと思い保留中（2022 年 1 月調査時点） Image optimization for static NextJS sites
イラストレーターでSVG画像を作成する Illustratorで線画と塗りありの２つのSVGデータを作成し、書き出し（アウトライン化する） この時、線画の方はパスのつなぎ目のどこか１つをカットする SVGを合成する 先程書き出したSVGデータ２つをエディタで開き、塗りの方の~までを、 線画の方のの手前に入れて保存 SVGartistaを開く https://svgartista.netに入り、左上のopen SVGより先程合成したSVGを選択する 好みの秒数を設定して完成 ＊STROKEANIMATIONのstaggerstepを０にして、animationdurationを3sなどにすれば、同時に線画の描画が始まる
