初期セットアップリンク システム環境設定とユーティリティ編 Homebrew編 ターミナル編 開発環境編 ← いまここ 開発環境といってもそんなに最初からいろいろ入れたいわけではなく、 フロントの開発と、ios…

初期セットアップリンク システム環境設定とユーティリティ編 Homebrew編 ターミナル編 ← いまここ 開発環境編 ターミナルはかわいくしておくに越したことはないので、今回は見た目重視のカスタマイズをします。（本当に見た目の話だけ） Oh My Zshでもzinit…

初期セットアップリンク システム環境設定とユーティリティ編 Homebrew編 ← いまここ ターミナル編 開発環境編 Homebrew Homebre 本体のインストールはこちらから。 Homebrew macOS（またはLinux…

このたびめでたく（ようやく）MacbookAir…

PWA をしばらく調べているうちに、GatsbyJS のブログで ServiceWorker…

create-react-app には、ServiceWoker を実装できるよう、workbox-webpack-plugin が含まれています。 このおかげで、create-react-app…

PWA ッテナンダ？ PWA : Progressive Web Apps （プログレッシブ ウェブアップス）のことで、 モバイルのブラウジングとか、UI 関係に関する体験（UX…

ブラウザで簡単に塗り絵が出来たら楽しそうだなあと思って、アプリを作ってみました。 アイコンの色違い作るよ！ そこで svg に動的に色付けするのはどうやるんだろうな、と思って調べたことまとめ。 svg を用意する 丸や四角などの描画は svg…

Create react app で作ったアプリのファビコンは、初期状態だと React のアイコンになっています。 いつも使っているものに変更しようかなという気持ちで、 ついでに iPhone で「ホーム画面に追加」した場合のアイコンを設定します。 (IE…

gatsby-plugin-manifest に icons を追加して、iPhone の「ホーム画面に追加」に対応します。 単に iPhone の「ホーム画面に追加」するだけなら gatsby-plugin-manifest に設定する方法 react-helmet…

せっかくとったドメインなので、サブドメイン増殖させて使いまくろう！というのが趣旨。 Netlify にサブドメインを設定していきます。 前準備 Netlify で独自ドメインを運用中 DNS 設定もできている サブドメイン追加 Netlify…

Gatsby.js は、自動ビルドしてくれるホスティングサービスの Netlify を使うと、 Git に push したタイミングでサイト公開までしてくれます。 今回は、ムームードメインで取得済みの独自ドメインを Netlify…

イラストの「色だけ」変えるアプリを作っていて、PhotoShop でお絵描きをしていたのですが やり直しが多いのと、一日で進められる作業が結構少ないので ソースと一緒に psd ファイルをバージョン管理したくなったので調べてみました。 ちなみに、主に線を描くのは iPad…

HTML ファイルを触っていたときに、JavaScript に function() $(function(){…}) が混在していて、？となったのでメモ。 こんな感じ 実行タイミングの違いかな？と思ったらその通りでした。 （引用） ページのドキュメントオブジェクトモデル（DOM…

仕事でgoogle-map-reactを使ったんだけど、なかなかマーカーを回転する方法にたどり着けなかったので、その時のメモ。具体的には、車を進行方向に向けて地図上で動かしたいというもの。 段階的な考え方 GoogleMap で From to…

Array の存在確認について楽でわかりやすくて記述が短い方法がないか調べた。 結論 短くていいんではないでしょうか。 これでいい理由 が 0 以上の数値だから JavaScript の真偽値として、0 が、1 以上がだから その他の書き方 array…

simplenote を App でなくブラウザから使う 業務で使っている借り物 Mac と、自分の Windows で最低限テキストのやり取りをしたかったので（そしてマークダウンが使えたらなおよい）、simplenote を使ってみることにしました。 Mac…

Dark Mode を入れたときに、Lint にいろいろ怒られたのでメモします。 Warning なのでしばらくほっといたんだけど、いい加減うざくなった・・・。 怒られた箇所 ナビゲーションバーの右端に Dark Mode…

一番お手軽だと思われる、gatsby-plugin-dark-mode を使います。 ちなみに現在のモードは localStrage に保存されます。 プラグインインストール ##　コンポーネント作成 スイッチするためのコンポーネントを作ります。 toggleTheme…

Mac を触り始めて、Linux のコマンドを広範囲に忘れていたのでメモします。 以下基本コマンドのみ（でもいっぱいある） vi の起動 コマンド名 説明 vi filename ファイルを開くまたは新規作成する vi Return…

開発ソースは全て「すでにあるもの」が「salesforce…

次は salesforce を使うことになったので学習に入りました。 言葉遣いというか方言が馴染まなくて、何を言っているかよくわからないので以下取りまとめます。 Trailhead (salesforce…

タグにアイコンつけたり、なんか可愛くしたいので Font Awesome を入れることにしました。 (2020/10/10 現在、初回表示が重すぎたので外しています) インストール インストールするのは以下の 3 つ。 @fortawesome/fontawesome-svg…

https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-blog…

※予定投稿ではありません 初期段階だと下書きができないので、md ファイルはあるけど公開しないための下書き機能を追加します。プラグインは使いません。 作業手順のたびに、ローカルを再起動してください。 post に draft を追加する まずは draft…

だんだん整形するのが面倒になってきたので、Prettier にお任せすることにしました。 チーム開発だとよく使うけど、個人で使ってもソースのばらつきがなくなるし、整形することに脳を使わなくてよくなるので、どこでも入れておいて損はないかな、と思います。 VSCode…

あとあとスタイルはラクしたいので、scss を使えるようにします。 プラグインインストール gatsby-config.js に追記 これで scss が書けるようになります。 scss を適用 私は色設定が散るのが嫌いなので、こんな感じにまとめています。 import…

Google Fonts(Noto Sans JP)をインストールします。 gatsby-starter-blog を導入していると、フォントの情報はにすでに存在します。 初期状態はこんな感じ。 最終的にこれを編集して Google Fonts…

WordPress があまりにも重い、壮大過ぎるしプラグインをハンドリングできないし、ぱぱっとデザインが変えづらくて、軽いと言われる Gatsby に乗り換えることにしました。 以下、このサイトを初期構築したときの状況。 ベース https://www.gatsbyjs.com…