月曜日の祝日、陰陽師の週替りイベントの好機を逃すという悲しい思いをしまして。
いつも開いてるPC版の隣で通知とかするアプリがあればなーと思ったとき、Electronで作れるんでは?とその存在を思い出したのでした。
いつの時代も悔しさは己の闘志を奮起してくれるものです。
[JS] Firebaseの覚書 ⑤ 電話番号認証
Firebase Authenticationでメールアドレス&パスワード認証に次いで面倒な電話番号認証について。
CodeSandboxがNuxt.jsに対応してたからNowデプロイまでやってみたら数分で終わって凄かった話
全くCodeSandboxについて知らない人は前に書いたCodeSandboxとNow(ZEIT)で爆速Webアプリ作成 を読むといいかもしれない。
陰陽師の周回中手持ち無沙汰だったのでなんとなくCodeSandboxを開いてみたら、いつの間にかNext.jsとかNuxt.jsとかが増えてたんですねえ…。
TypeScriptセットのやつも増えてて時流を感じます。
[Vue.js] コンポーネント書き方まとめ
関数型コンポーネントも含めたVue(バージョン2系)のコンポーネントの書き方をサンプルコードと共に洗い出してみた。
[Vue.js] Hygenで作るコンポーネントジェネレーター
コンポーネント作るのにテストだのStorybookだの関連するファイルも作ったり中身をいちいち書くのもメンドクセ(´ω`)
って思った人向けの道具について。
[CSS] Flexible Box Layout Module 解説レポート
使い始めたら手放せないフレキシブルボックスレイアウトモジュールについて熱く語ります。
注)
これは6年前に社内向けレポートか何かで書いたやつだと思います…(うろ覚え)
今でも通用する内容だったのでドライブにあった原稿を転載しました。
内容が古いところは加筆修正してます。
Nuxt.jsでStorybookを使用してみたメモ
React・Vue・Angularなど使うとコンポーネント単位でUIプレビューしたくなるんですよねえ。
Storybookはそれを叶えてくれるツールで、規模や人員が大きくなればなるほど必要性が増してくると思いました。
StyleDoccoとか使ってた頃の手間や苦労を思い出すと、いやはや便利になったものです。
Nuxtで作ってるサイトにStorybook入れてみたら、ちょいちょいつまづくポイントがあったので、導入から問題解決についてStepByStepでメモりました。
[Chart.js] レーダーチャートの値が表示されないバグをTooltipカスタムでなんとかする
Chart.jsで遊んでたらバグに引っかかってしまった。
[HTML] Aタグにおけるrel属性の意味と効果について
とあるASPからGooglePlayに関するこんな情報が届きまして:
Android において、
target=”_blank” のあり/なし ×ブラウザソフト(Chrome)のヴァージョンで
ストアへ遷移しない事象を確認しました。
結論rel属性でnoreferrer
かnoopener
が指定してあればおkって話だったけど、知らないとハマりそうです。
レスポンシブWebデザインを実装するためのTips
「レスポンシブ」って単語を知らない人でも、ウィンドウをウィンウィンさせてコンテンツがついてくるのを見せながら「こういうのがやりたいんですよね~」とか言っちゃうアレです。
どんなデバイスで見てもいい感じになるようにしろって意味で使われますけど、iPhoneですら1サイズじゃなくなったこのご時世ですよ、面倒な割に気軽に頼まれがちじゃない?
スマホが出だした頃はPC/SPの2パターンあれば満たされたのが、今は…………🙄
何種類あるかわからない端末に毎年増える解像度、そんなカオスな表示環境にどうやって対応するのよ????????
とまぁ毎年苦しめられた結果、色々と知見が増えたのでこれまでに調べたり使ったりした「レスポンシブ」を実装するための方法をまとめました。
[WordPress] 各種URL、PATH取得方法まとめ
あ〜あれどうやってとるんだっけ…、がいまだにあるのでまとめた
[WordPress] REST APIで静的サイトに更新可能なコンテンツを作成する
クライアントが更新できるようにして〜という雑な要望に応えるべく、我々は都度立ち上がってきた。
これまで様々なツールを用いてきたが「とりあえずWordpress使っとけばよくね?」という結論に至って幾星霜。
長い月日のなかで思い知らされたのはWordPressテーマのフルカスタムは面倒臭いという現実であった。
救世主REST API降臨
Version4.7くらいだったろうか、それまでプラグインだったREST APIが標準搭載になったのは。
これで「Wordpressでコンテンツを更新できるサイトを作るならカスタムテーマを作成しなければならない」という呪縛を断ち切れる、と人々は喜んだ。
さて実際にREST APIを利用して更新できるコンテンツを作ってみようとした時に、一体何をすればいいのか?
この記事は静的に作られたサイトで更新が必要な部分だけをWordpressに依存させるべく、ページを作るのに必要なJSONをREST APIで出力するまでの手順についてまとめたものです。
[Nuxt.js] Vueコンポーネントでの Code Splitting の利用
そのコンポーネントが読み込まれた時にだけimportしてほしいという場合に
[JS] Web Audio API であの楽器
私が初めて触った時はFirebox4のベータ版しか対応してなかったWeb Audio API、
今はもう殆どのブラウザがサポートしてるんですねえ…。
いや~感慨深いなあ。
ってことで今週も陰陽師の周回中に9年前に作ったまま放置してて音が鳴らなくなってたあの楽器を音出るようにしてみた。
See the Pen あの楽器 by Tenderfeel (@Tenderfeel) on CodePen.
[JS] 9年前の診断テスト作成スクリプトを今風に書き直してみた
陰陽師のミコマラ中手持ち無沙汰だったので、9年前MooToolsを使ってこさえたやつ、
[MooTools] 診断テスト作成スクリプト Diagnosizm
これをライブラリ依存なしで書き直してみた。
[Vue.js] 続 Constraint Validation API パスワード強度ゲージの表示
[Vue] HTML5 Form Validation を利用するフォーム要素コンポーネント の続き。
脆弱なパスワードかどうか診断してその強さを表示するやつ、Wordpressにも備わってるあれをVueでやる。
[JS] Firebaseの覚書 ④ 認証エラーメッセージの日本語化
公式で多言語対応されてないから自分で翻訳しないとだった。
[JS] Firebaseの覚書 ③ OAuth認証
Google, Twitter, Facebook等のOAuth系認証は使うProviderクラスが変わるだけでやることは同じ。なのでまとめました。
Facebook認証とTwitter認証はデベロッパーアカウントでのアプリ設定が必要なのでGoogle認証より手間がかかる。
[WordPress] TinyMCE(v5) カスタムボタンの追加とショートコード/HTMLの相互変換
TinyMCEにショートコードを挿入するカスタムボタンを追加したはいいが、
見た目がイケてないのでビジュアルエディタではHTMLタグに変換してスタイリングしたいなあと思いましてね、その方法をぐぐってたら自分が昔書いた記事にたどり着くっていう…
[wp] 自作したショートコードをビジュアルエディタ内で置換する
そりゃ9年も経ってたら書いたことすら忘れますわ。
TinyMCE自体も記事を書いた当時多分バージョン3だったのが今はバージョン5になってて記事のソースじゃ動かないんで、こちらに現行のWordpress(5.x系)で動くものを載せておきます。
[Vue.js] tesseract.jsでOCR
JavascriptでOCRできるtesseract.jsで、ゲームの装備ステータスをスクショから読み取れるのか試した。
うーん、漢字多いなら中国語指定の方が精度高いかも
英語ならスッとできるんだろうけどなあ~~~~~~