More issues

nuxtでgoogle ads

Nuxt で Google Ads の設定方法。 単純にlayout/default.vueに記載したり、nuxt.config.jsのhead/scriptに記載してもうまく動きません。 @nuxtjs/google-adsenseを使います。 インストール yarn add @nuxtjs/google-adsense nuxt.config.js の設定 ライブラリを modules に追加します。 Google Ads に使う id を設定するだけです。 export default { modules: [['@nuxtjs/google-adsense', { id: 'ca-pub-xxxxxxxxxxxxxxxx' }]] } 以上で Google Ads が利用できるようになりました。 ただ、この状態では複数の Layout ファイルによるページ切り替えをするとエラーが出てしまいます。
1 min read

ブログをNuxt.jsで実装したのでメモを残す

ブログを Hexo で運用していましたが、勉強も兼ねて Nuxt.js で書き起こしました。 Hexo時代の資産も活かすためにMarkdownのままかけるようにしています。 いろいろハマったポイントもあったので、実装メモ。 目次 * 記事は MarkDown で書きたい * Nuxt.js に MarkDown を読み込む * md ファイルのパスに合わせて Nuxt のパスも設定する * 環境変数を使いこなす?読み込んだファイル情報を vue に持っていく * md のアンカでも Vue ルータを利用する * sitemap.xml の作成(動的パスへの対処) * Google Ads (@nuxtjs/google-adsense) * Google Analytics (@nuxtjs/google-analytics) * ブログにコメント機能を追加する * functions に json がアップできない罠 * onRequest と
1 min read

Nuxt.jsでSCSSを使うとき、グローバルの変数を使う

コンポーネントやページでいちいち変数ファイルの依存を追加するのが面倒なので。 どこでも使えるように設定します。 依存ライブラリの追加 yarn add -D @nuxtjs/style-resources 変数定義 SCSS の用意 今回は~/assets/css/variables.scssに作成しました。 // Import Bulma's core @import '~bulma/sass/utilities/_all'; $primary: #10abd0; $primary-invert: findColorInvert($primary); $twitter: #4099ff; $twitter-invert: findColorInvert($twitter); // 以下続く。。。 nuxt.config.js の編集 使用モジュール、設定をそれぞれ追加します。 // nuxt.config.js export default
1 min read

MacOSをCatalinaにアップグレード

せっかくアップデートの案内が来ていたので。 メインマシンとして使っていないのでアップデートしただけですが。。。 アップデートの流れ * ダウンロード * インストール これだけ。 所要時間チェック catalinaのDL容量は8.09GB。 ただ、Apple側のサーバが重いので、AM10:00~11:50までかかりました。 ダウンロード開始後、確認ダイアログをすすめるとインストールが歌詞視されます。 インストール開始、残り13分の表示がでますが当たり前のように13分じゃ終わりません なんどか残り時間を更新した後、昼ごはん食べて昼寝から目覚めたら終わっていました。 ダウンロードに2時間、インストールに1時間でざっくり3時間見ておくといいと思います。 ダウンロードだけなら仕事中でも大丈夫です。 使用していないので使用感はなし 多分ここがいちばん大切なんでしょうが。。。 無事起動して、RDPが動作するところまでは確認できました。 32bitアプリが動かなくなるということでしたが、インストールされていないので問題なし。
1 min read

SONY WF-1000XM3

SONYから、ノイズキャンセラー付き完全ワイヤレスイヤホン WF-1000XM3 去年から使ってたJBL FREE X がケースごと落として壊れかけてきたので買い替え。 いいところ ぴったりを探すのが大変だけどイヤーチップのフィット感 開封したら、まずは自分にフィットするイヤーチップ探しから始まります。 サイズ・素材で聞こえ方がかなり変わります。 本体同梱の4サイズ・2素材からピッタリのものを探します。 やっぱりノイズキャンセル 完全遮音、とまでは当然いかないけどかなり外部の音を低減してくれます。 低音部分のキャンセルがよく聞いていると思いますが、キーボードのタイピング音は高い方のカシャカシャ音が残ります。 コンビニのぼそぼそしゃべる男性店員のヴォイスは、ほぼ完全にキャンセル。 接続安定性 接続安定性を売りにしていた、JBL Free XやApple AirPodsより切れにくく感じます。 JBL Free Xも最初は切れにくいと感じていたのですが、使っているうちに切れやすくなってきました。何回も落としているからかな。 Uniherz
3 min read

Nuxt.jsでコンポーネントを一括登録する

Nuxt.js + Buefy 開発環境、快適。 いちいちコンポーネントを登録するのがめんどくさい Nuxt.js、便利ですがコンポーネントを作成したらimportするとか.jsファイルに登録するとかちょっと面倒です。 特にプロジェクトで大量に作成しなきゃいけないときとか、登録用の JS ファイルが競合したりもします。 ビルド時に一括読み込み webpackの仕組みで、ビルド時に指定ディレクトリを見て一括登録できます。 Vue.js のドキュメントに書いてありました。 他にも、mixinやfilterも一括登録したいですよね。 それをもとに書き起こしたのがこちら。 // ファイル名をコンポーネント名に変換する function pascal2ComponentName(fileName) { const temp = pascal2camel(fileName) return temp[0].toUpperCase() + temp.substr(1) } // ファイル名をキャメルケースに変換する function
1 min read

package.jsonとyarn.lockのバージョンを一致させたい

数年前に作ったプロジェクトの依存関係、更新したい!なときに。 依存を更新しつつ、package.json もアップデート yarn のコマンドでアップグレード。 対話形式で進められます。 yarn upgrade-interactive --latest --latest オプションをつけると、package.json に記載されている範囲を超えてアップグレードされます。 他のモジュールとの互換性問題がでてくるのでちょっとデンジャラス。 またpackage.jsonも更新されます。 --latest オプションなし package.jsonに記載されている範囲でアップグレードされます。 でも--latestオプションなしだとpackage.jsonが更新されないので、今どのバージョンが使用されているのかがわかりにくいです。 いちいちyarn.lock見るのもだりぃし。 syncyarnlock ツールを使う ここで便利ツール、syncyarnlockの登場です。 実際にインストールされているモジュールのバージョンを書き出してくれま
1 min read

JSの分割代入

JavaScript の分割代入を覚えると、お決まりのコードが簡単にかけます。 従来の JavaScript しかしらないとなにしてるかわからないので、しっかり身につける。 配列の分割代入 クエリパラメータの分割など、よくある=で key と value がセットになっている文字列を分解して代入したい。 従来のコード。 代入時に0とか1がでてくるのがなんかかっこ悪い。 const keyValue = "a=b".split("="); const key = keyValue[0]; const value = keyValue[1]; console.log(key, "=", value); // a = b 分割代入コード const [key, value] = "a=b"
2 min read

結局WSLを使わなくなった理由

今年、仕事の開発環境を Mac から Windows に変えました。 動機は、当時担当していたプロジェクトで MS Office が必須だったから。 Mac でも Office は利用できますが、いろいろと問題もあります。 それで、Mac と同様に Bash ターミナルから操作したかったので、WSL をインストールして使っていました。 ある日、気づいてしまった Windows を使い始めてしばらくして気づいた。 なんだか遅い。。。 特に、ビルド系タスクが。 なにこれ Windows だから? 計測してみよう 業務で使っているビルド系タスクで比較。 なんか、WSL での実行が圧倒的に遅い。 Windows だけで比べる 同じマシンで、PowerShell6(PS6) と WSL1 の実行速度を比べてみると。。。 JOB WSL1 PS6 差
2 min read

Subscribe to 猫好きが猫以外のことも書く

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe