もやぶろ

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

エンジニアリング-クライアントサイド

【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…

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

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

はてなブログのテンプレート「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への変更 独自ドメイン設定 広告切る トップページの表示形式…

alpineでsharpのインストールでエラー

このブログのローカル環境のDockerを再ビルドしたら、gatsby-plugin-sharpで必要なライブラリのインストールでエラーが発生するようになった。 tep 4/6 : RUN apk add vips-dev fftw-dev build-base --update-cache --repository https://alpine.global.ssl.…

【Laravel】【PHP】「Laravel/Vue.js勉強会#9」に参加してきた

ちょっと前の話ですが 久々の参加。 laravue.connpass.com スポンサー発表 カオナビはReact laravelshift laravelshift.com Laravelのバージョンアップ専用のサービスらしい。確かにほしいけど、そんなニッチなサービスがあるんだな、、、 私の発表 docs.goo…

個人ブログをはてなブログから Gatsby + Netify に移行した

モチベーション 採用技術 方針 はてなブログのエクスポート テンプレから初期セットアップ 環境セットアップ 雛形(template作成) とりあえず公開 ドメイン設定する ドメイン買う netlifyに設定する 諸々改修 meta情報 いらないページ削除 デモのテキストを…

GatsbyJSのチュートリアルやってみた

きっかけ www.jabba.cloud ちょうどシンプルなWebサービスを作るお仕事があったので、ちょうど良さそうと思ったので試してみる事に。 何が良さそう?(やってみる前の印象) GatsbyJS 他の静的サイトジェネレーター StaticGen | Top Open Source Static Site…

【Laravel】【PHP】Laravel(mixも)でvueファイルのlintで自動修正させる

lint自体の設定はこちらで。 laravel-news.com qiita.com qiita.com npm(yarn)から起動する場合は、package.jsonに "scripts": { "lint": "eslint --fix --ext .js,.vue resources/js/", みたいな感じで、--fixをつければ自動で修正までしてくれます。(で…

react.jsのチュートリアル(Tutorial: Intro to React)をやった その1

やってみました。 ちょっとしたwebアプリ作ってみようかなと思っているのですが、 スマホアプリにもするかもしれない reactNativeにするかも? というわけで、reactでweb版をとりあえず作ってみようかと。その準備としてチュートリアルやってみました。 ちな…

はてなブログ「Material」テーマのカスタマイズ

前回はMaterialテーマを設定しました。 moyashidaisuke.hatenablog.com 数ヶ月たっていくつか気になるところが出てきたので、色々カスタマイズします。 headingタグ(h1、h2とか。見出しタグ) before h1とh2とh3がほぼ同じ見た目なので、記事のブロックがわ…

Meguro.es #13 @ ラクスル に参加した

なんとか時間が取れたので参加してきました。 meguroes.connpass.com 当日の18:00に確認したら発表枠が1個だけあいていたので、慌てて管理者に直接連絡したら(commpassからの参加は締め切られていた)、速攻でOKの連絡いただいて、1時間で資料作って発表し…

wordpressのビジュアルエディタを本物に見た目あわせる

bge.jp ぐぐるといくつか記事が出てくるのだけど、この方法が一番良いと思う。 基本、どれも専用のcssを用意して、functions.phpで読み込ませよう、なんだけど、 次の工程が元のcssをコピペしよう、となっているのがwordpress界隈の闇。 元のcss変える度にコ…

第31回 HTML5とか勉強会 JavaScript MVCフレームワーク に参加してきた #html5j

行ってきました。第31回 HTML5とか勉強会 togetterHTML5勉強会は初めてです。こちらの記事でAngularJSが紹介されてて、面白そうと思ったのがきっかけです。 補欠でしたが、当日キャンセルが出てらしく参加できました。ラッキー。 Backbone.js Spine.js 素のJ…

Webサービスを作るってみるその2 OpenIDでmixiと連携

今回はOpenIDを使用して、mixiとの連携機能を作成します。Play1系で、しかもJavaで、しかもmixiと連携しようという方はきっと少ないでしょうが。。。。ちなみに、PlayにはOpenID用のライブラリが標準で用意されてますので楽チンです。 mixiのOpenID仕様オフ…

Webサービスを作るってみるその1

Webサービスを作ってみる事にしました。 アプリ概要自分は趣味でギターをやってるんですが、セッション会という名のオフ会によく参加しています。 で、事前にmixiのコミュニティで選曲やらパート分けやら、アレンジの相談をして当日に臨むのですが、掲示板の…