[Vue.js] ファイルアップロード＆バリデーション ( use bootstrap-vue )

by

なんでか初回はonchangeが反応しない挙動があった。
プレビュー表示ならwatchでv-model監視する手もあるな🤔と思った。

draganddropの判別にmodernizr使おうとしたら存在しなかったんだけど消えたんですかね。
ないものは仕方ないからisMobileでPCだけドラッグドロップUIになるようにしてます。

続きを読む

[Vue.js] HTML5 Form Validation を利用するフォーム要素コンポーネント

by

2年前に書いた HTML5 Form Validationサンプル（jQuery + Bootstrap 4.0 + Constraint Validation API） の Vue版です。

HTML5のフォーム要素に備わっているValidation機能（Constraint Validation API）を利用するフォーム要素のコンポーネントと、それを利用したフォームのサンプルを作ってみた。

続きを読む

CodeSandboxとNow(Vercel)で爆速Webアプリ作成

by

令和になりました～。
15年ほど前はテキストエディタとかFTPとか使ってたけど今はどうでしょ。
私はエディタはAtomに落ち着いてますが、NotePad++も気に入ってます。
FTPはレンタルサーバー借りてる人が使うくらいじゃないですかね。新卒世代はもうFTPなんて使ったこと無いのでは。

最近Firebaseが流行ってるけどNowもまあ凄いです。
認証とかデータベースとかが必要ないならFirebaseよりNowの方が合ってるんじゃないかな～。CodeSandbox+Nowだとローカル環境もサーバーも用意しなくていいし、デプロイだって自動でやってくれるからね。

昨日ちょっとしたアプリをCodeSandboxで作ったので、それをNowでデプロイするまでの手順をざっくりまとめてみた。

（現在NowはVercelという名前になってます）

続きを読む

[JS] PHPのarray_combineをJavaScriptで

by

array_combine — 一方の配列をキーとして、もう一方の配列を値として、ひとつの配列を生成する

ピコ太郎のPPAPがまんまそのイメージ。

つまりこういうのがやりたい：

const key = ['green', 'red', 'yellow'];
const val = ['avocado', 'apple', 'banana'];
↓
{"green":"avocado","red":"apple","yellow":"banana"}

続きを読む

IE11とAndroid4系のサポートを終わらせるための HTML/CSS/JS 未対応仕様まとめ

by

いまだにIE11とAndroid4系サポートで苦しんでるフロントの人はいるんでしょうか。
かくいう私もこいつらにさんざん苦しめられたので、Can I Useを元に未対応なHTML/CSS/JSの仕様をざっくり一覧にしてみましたぞ。
「これだけ未対応なんだからサポート切らせてください」って言えるように。

続きを読む

[Vue.js] ページネーション機能の作り方（弐）コンポーネントのテスト作成入門

by

[Vue] ページネーション機能の作り方とコンポーネント作成入門　からの続き。
続きなので前の記事で作ったやつがないとできません！

引き続きCodeSandboxでやります。
ローカルに環境作った方はそちらでどうぞ。

CodeSandboxのプレビューのところに、Testsっていうタブがあるのに気づきました？

これ、テストを実行して結果を表示してくれる便利機能です。
今回はこの機能を使えるようにします！

【2019/10/21追記】CodeSandboxのバグでテスト機能が動きません

続きを読む

[WordPress] WP Offload Media Lite プラグインに データベースを殺されかけた話

by

WP Offload Media Lite プラグインは、Wordpressに保存される画像をAmazonS3などのストレージにうpしてくれるやつ。
Jetpackにwordpress.comの配信サービスでやっつけてくれるお手軽なオプションがついてるので、あえてAmazonS3を使おうという個人ユーザーは少ないでしょう。
AmazonS3を使おうとするのはほとんど商業ベースだと考えられます。なので同じ轍を踏んでｳﾞｧｰとならないために出来事をまとめました。

⚠️ この記事はWP Offload Media Lite を使ってない人には関係ない内容となっています。

続きを読む

[Vue.js] ページネーション機能の作り方とコンポーネント作成入門

by

[PHP] ページング機能の仕組みとか作り方とか　が今年で10周年！

今はPHPを書くことはWordpressを魔改造するときくらいで、もっぱらJavasScriptを使う事が多いです。
2018年はずっとVue.jsと戯れていたので、Vueでpaginationコンポーネントはどうやって作れば良いの？という視点でまとめてみました。

環境構築は面倒くさいのでCodeSandbox使います！
なのでローカルにインストールからやってみたい方はVueの公式ドキュメント片手にトライしてどうぞ。

続きを読む

[WordPress] pre_get_postsでカスタムフィールドの値を利用した表示の制御

by

pre_get_posts() を使うと表示の制御ができる。
根本はWP_Queryなので、ここにまとめたカスタムフィールドのクエリはget_postsとかでも使うことができる。
pre_get_postsの基本的な使い方はググれば色々でてくるんでそちら見てもらうとして、この記事はカスタムフィールドの値を絞り込みに利用するケースについてまとめたものです。

続きを読む