もやぶろ

moyashidaisukeのブログだからもやぶろ。フリーランスのエンジニアのダイスケです。プログラム関連とかギター関連とか旅行関連とか色々。

エンジニアリング

用途別・個人的良く使うコマンドチートシート

メモ帳に書いてたのを雑に公開。小技系が多いです。 動作環境はMac + zsh環境がメインで、たまにlinuxです。たまにオプションとか違う場合もありますのでご注意。でも大体動くはずです。 随時追記します。 ファイルの行数 単純にカウント 行数の監視 ログフ…

【Flutter】Flutter Meetup Tokyo #12にオンライン参加してきた

概要 Flutterの勉強会に参加したので感想をさくっと。Flutter盛り上がってるな・・・という感じでした。 人気すぎて会場にいけなかったので、オンライン配信を見ての参加です。 flutter-jp.connpass.com 配信Youtube www.youtube.com ちゃんとしたまとめ qii…

【Flutter】Flutter1.9.1とDart2.5まとめ(Flutterのバージョンアップしました)

概要 Flutter(一緒にDartも)のバージョンアップをしました (1.7.8-> 1.9.1) バージョンアップにあたりまとめた情報と、手順メモです。DartのML補完が面白かったです。 これすごくない?? 途中のtypoはゆるしてね文脈で変数名を推測してる。date -> 日付…

【vue】Vue Styleguidistの使い方を説明⑤ 〜アンダーバーが勝手に省略される挙動対策〜

概要 Vue Styleguidistで、アンダーバーつなぎの文字を書くと、勝手にアンダーバー「_」が省略される挙動の対策です。(多分ReactのStyleguidistでも発生する) 「HOGE_HOGE_HOGE」 -> 「HOGEHOGEHOGE」になります。 今までの www.moyashidaisuke.com www.mo…

【JavaScript】JSDocでfooterの作成日時を消す

概要 JavaScriptのドキュメンテンションツールのJSDocのfooterの日時を削除する方法です。 前回の www.moyashidaisuke.com 概要 どこのこと?何がダメなの? 対応方法 どこのこと?何がダメなの? defaultテンプレートを使った時のフッターの ここのことです…

【JavaScript】JSDocでhot reloadを無理やり有効にするやり方

概要 JavaScriptのドキュメンテンションツールのJSDocですが、最近のツールのようhot reload(コードを書き換えるとブラウザ開きっぱなしでも自動で更新してくれるやつ。hot build?hot replacement?)がありません。 既存のツールを組み合わせて実現する手…

【JavaScript】Symbolを駆使してenumぽいものを定義する

概要 JavaScriptでsymbol型を使う事によって、enumっぽいものの実装ができます。 そこそここなれてきたので紹介します。 概要 前説 JavaScriptでenumを作るパターン 単純にconstで定義するパターン enumクラスを自作 何が不満? Symbol(シンボル)とは 実装…

【はてなブログ】Minimalismで更新日を表示する(トップページのエラー対策付き

概要 たまに過去記事を修正したり追加したりした時に、更新日が表示されないのはもったいな〜という事で、カスタマイズして表示するようにしました。 こんな感じです。 概要 やり方 フッタ デザインCSS 所感 やり方 www.tomomore.com ほとんどこのままです。…

はてなブログのシェアボタンをいい感じにカスタマイズ

概要 はてなブログのテーマ「Minimalism」のソーシャルボタン(シェアボタン)ですが、目立たないかなぁ、、と思ったので(シンプルでかっこいいのですが)を色付きのもので目立つようにしてみました。 あわせて、はてブとFacebookはシェア数がのカウントも…

【はてなブログ】【Minimalism】ナビゲーションメニューのスクロールバーを常に表示する

概要 はてなブログのテーマ「Minimalism」のナビゲーションメニューですが、スマホ等の画面幅が小さい環境だと横スクロールできるようになっています。 が、そもそも横スクロールできる事に気が付かないのでは・・・という対策で、常に横スクロールバーを表…

【JavaScript】babelで「Multiple configuration files found. Please remove one」エラー

事象 babelを使った環境でjsのコンパイル(ビルド、ホットリロード等なんでも)時に以下のエラーが発生する。 Error: Multiple configuration files found. Please remove one: - package.json#babel - .babelrc 何が起きているか babelの設定ファイルの bab…

【JavaScript】パブリックフィールドとプライベートフィールドの宣言をbabel-eslintでlintに対応させる方法

事象 lintで以下のエラーが発生する。 error Parsing error: Unexpected token = class Hoge { /** * @type {Array} */ hoge = null; } 何が起きているか JavaScriptで標準化が完了していない機能はeslintに対応していません。 github.com 今回の例で言うと…

【vue】Vue Styleguidistの使い方を説明④ 〜見た目を変える〜

概要 Vue Styleguidistで、stylesの変更(見た目の変更)のやり方についてです。 今までの www.moyashidaisuke.com www.moyashidaisuke.com www.moyashidaisuke.com 概要 公式 解説 theme styles コンポーネントの探し方 なぜReact? 公式 ここに書いてあり…

【vue】Vue Styleguidistの使い方を説明③ 〜Vuetify動かす〜

概要 Vue Styleguidistで、vue用のコンポーネントライブラリのvuetifyを使う設定をいれてきます。 前回までの www.moyashidaisuke.com www.moyashidaisuke.com 概要 公式 解説 外部ライブラリの読み込み設定 loaderの設定 私の設定 exampleの書き方tips 次 …

【vue】Vue Styleguidistの使い方を説明② 〜Sections〜

概要 前回はとりあえずVueStyleguildを動かすところまで解説しました。 今回はページの設定である「Sections」の解説をします。 前回の www.moyashidaisuke.com 概要 マニュアル ベース sections name, description components、ignore content usageMode co…

【vue】Vue Styleguidistの使い方を説明① 〜Laravel + vue環境でVue Styleguidistを動かす〜

概要 vueのstyleguild「Vue Styleguidist」をLaravel + vue環境で使い始めてみました。 思ったより手間取ってしまったので、設定ファイルや、私の環境で発生したエラーの対応等を残しておきます。 ↑のカメレオンはVue Styleguidistのロゴ。きもかわいい。 ※L…

【AWS】古い(特定のバージョンの)aws-cliをいれる

概要 何かしらの理由で古いaws-cliを入れたい場合のやり方です。 公式のマニュアルにはのってないのと、ネット上にもあまりのってないようだったので残しておきます! ついでにエラーがいくつか出たので、その対処方法も。 概要 前提 正解 私の環境で出たエ…

【vue】わかりにくいvue.jsのwatch(ウォッチャ)のオプションを使った書き方

概要 vue.jsのwatchにはdeepとimmediateという2つのオプションがあるのですが、書き方がちょっと特殊なのと、マニュアル上で探しにくくいので、癖があります。 毎回ググってしまうので備忘録として残します。 概要 watchとは オプション deep immediate 所感…

【Flutter】Flutterを始める時に参考にしたいリンク集

概要 Flutter歴2ヶ月になったので、参考した情報のまとめです。 これからFlutterを始める方は参考に、こんなのもあるよ!という方は教えて下さい! (ある程度web系の開発経験がある方を想定しています) 概要 とりあえずなんとなく動かせるまで 公式ドキュ…

【Flutter】flutter_launcher_iconsを使ってアプリアイコンを設定したら「Invalid App Store Icon.」エラーの時の対応

概要 Flutterでアプリアイコンを作成する場合、「flutter_launcher_icons」という便利なpluginがあるのですが、何も準備せずに画像を作成すると、エラーになる場合があります。 私が遭遇したエラーの対処法です。 概要 flutter_launcher_iconsについて エラ…

【Flutter】CodeMagicでのiOSビルドの時に「build number 」でエラーになる時の設定方法

概要 Flutterに特化したCIサービスのCodeMagicで、iOS用にbuildした時にデフォルト設定だと2回目からエラーになります。 マニュアル見てもいまいちわかりにくいのですが、私の対応方法です。 概要 CodeMagicとは エラー まとめ CodeMagicとは codemagic.io …

【書評】「CAREER SKILLS」はこれからエンジニアを目指す人と今エンジニアの人にもおすすめ

はじめに 「CAREER SKILLS ソフトウェア開発者の完全キャリアガイド」を読みました。 すごく良い本でした。今エンジニアの方、エンジニアをこれから目指そうと思う方におすすめします。 定期的に読み直したいな、と思う本でした。 CAREER SKILLS ソフトウェ…

【Flutter】アプリケーションの名前を変更するpackage/plugin「flutter_launcher_name」を作った

概要 前回、Flutterでアプリケーション名を変更するのに、手動でAndroidManifest.xmlとInfo.plistを変更しましたが、だるいと思ったので、自作でpackageを作って公開してみました。 そんなに変更するものではないけど、せっかくFlutter使ってるのに各OS毎に…

新しいMacBookPro(13インチ 2019)を買ったのでベンチマーク(docker上でvueのコンパイル)

概要 Late 2016と比べて2倍くらい速くなりました。仕事の速さもこれで2倍に、、、 概要 きっかけ 今までの 買ったモデル こだわり 13インチ CPU メモリ ストレージ 価格 届いた ベンチマーク vue.jsコンパイルしてみる 2016モデル 2019モデル その他感想 ま…

wwwなしのURLをwww有りのURLにAWSで転送させる(HTTPS対応版)

概要 対応前構成 何がダメ? 検討 案1:お名前.comのURL転送サービスを使う 案2:適当にサーバたてて.htaccessとかでやる 案3:AWSで頑張る 対応1 HTTP無し版 S3bucket作成 S3bucketにリダイレクトを設定 Route53にホストゾーンを作成 Route53からS3へのルー…

【Flutter】アプリケーションの名前を変更する

概要 どれのこと? 変更方法 正解 概要 Flutterでアプリケーション名の変更はFlutter側の設定ではできないです。 各OS毎に個別で設定する必要があってめんどうです、、、、 どれのこと? この「flutter_app」となってるとこですね。 変更方法 pubspec.yamlの…

はてなブログのテンプレート「Minimalism」をカスタマイズした②

概要 safariで見た時にフォントが違う before after ブログタイトル部分の縦の余白を小さくしたい before after 行間を全体的に調整する before after 画像にいい感じの枠をつけたい after twitterのシェアボタンでタイトルしか連携されない after まとめ 概…

インストールされてしまったServiceWorkerを自動で削除する(前バージョンのブログトップページが表示されてしまう場合の対策)

概要 serviceWorkerが効いてる時の挙動 やったこと おまけ serviceWorkerとは 手動で削除する場合の対応方法 Chromeの場合 まとめ 概要 ブログをgatsby.jsからはてなブログに戻しましたが、一度Gatsby.jsバージョンを開いていると、キャッシュが残ってしまい…

はてなブログのテンプレート「Minimalism」をカスタマイズした

概要 なぜ「Minimalism」? pro関係ないけど変えた とりあえずテンプレ適用 before after 「Minimalism」をカスタマイズ(公式記事参考に) レスポンシブデザインに設定する トップページを一覧形式にする ブログ名が全角(日本語)の場合 ナビゲーションメ…

ブログをGatsby+Netlifyからはてなブログに戻しました & はてなブログproにしました

あらまし 戻すにあたってやったこと はてなブログ -> 新環境(Gatsby.jsとNetlify)への転送処理の削除 新環境にしか書いてない記事のimport せっかくはてなブログに戻ってきたのでやったこと proへの変更 独自ドメイン設定 広告切る トップページの表示形式…