[HTML] Aタグにおけるrel属性の意味と効果について

とあるASPからGooglePlayに関するこんな情報が届きまして：

Android において、
target=”_blank” のあり/なし ×ブラウザソフト（Chrome）のヴァージョンで
ストアへ遷移しない事象を確認しました。

結論rel属性でnoreferrerかnoopenerが指定してあればおkって話だったけど、知らないとハマりそうです。
“[HTML] Aタグにおけるrel属性の意味と効果について” の続きを読む→

By HTML&XHTML, HTML5 コメントする

レスポンシブWebデザインを実装するためのTips

「レスポンシブ」って単語を知らない人でも、ウィンドウをｳｨﾝｳｨﾝさせてコンテンツがついてくるのを見せながら「こういうのがやりたいんですよね～」とか言っちゃうアレです。
どんなデバイスで見てもいい感じになるようにしろって意味で使われますけど、iPhoneですら１サイズじゃなくなったこのご時世ですよ、面倒な割に気軽に頼まれがちじゃない？

スマホが出だした頃はPC/SPの2パターンあれば満たされたのが、今は…………🙄
何種類あるかわからない端末に毎年増える解像度、そんなカオスな表示環境にどうやって対応するのよ？？？？？？？？
とまぁ毎年苦しめられた結果、色々と知見が増えたのでこれまでに調べたり使ったりした「レスポンシブ」を実装するための方法をまとめました。

“レスポンシブWebデザインを実装するためのTips” の続きを読む→

By Memo 、、コメントする

[WordPress] REST APIで静的サイトに更新可能なコンテンツを作成する

クライアントが更新できるようにして〜という雑な要望に応えるべく、我々は都度立ち上がってきた。
これまで様々なツールを用いてきたが「とりあえずWordpress使っとけばよくね？」という結論に至って幾星霜。
長い月日のなかで思い知らされたのはWordPressテーマのフルカスタムは面倒臭いという現実であった。

救世主REST API降臨

Version4.7くらいだったろうか、それまでプラグインだったREST APIが標準搭載になったのは。
これで「Wordpressでコンテンツを更新できるサイトを作るならカスタムテーマを作成しなければならない」という呪縛を断ち切れる、と人々は喜んだ。

さて実際にREST APIを利用して更新できるコンテンツを作ってみようとした時に、一体何をすればいいのか？
この記事は静的に作られたサイトで更新が必要な部分だけをWordpressに依存させるべく、ページを作るのに必要なJSONをREST APIで出力するまでの手順についてまとめたものです。
“[WordPress] REST APIで静的サイトに更新可能なコンテンツを作成する” の続きを読む→

By wordpress コメントする

[JS] Web Audio API であの楽器

私が初めて触った時はFirebox4のベータ版しか対応してなかったWeb Audio API、
今はもう殆どのブラウザがサポートしてるんですねえ…。

いや～感慨深いなあ。
ってことで今週も周回中に9年前に作ったまま放置してて音が鳴らなくなってたあの楽器を音出るようにしてみた。

See the Pen
あの楽器 by Tenderfeel (@Tenderfeel)
on CodePen.

“[JS] Web Audio API であの楽器” の続きを読む→

By Javascript 、コメントする

[JS] 9年前の診断テスト作成スクリプトを今風に書き直してみた

陰陽師のミコマラ中手持ち無沙汰だったので、9年前MooToolsを使ってこさえたやつ、

[MooTools] 診断テスト作成スクリプト Diagnosizm

これをライブラリ依存なしで書き直してみた。

“[JS] 9年前の診断テスト作成スクリプトを今風に書き直してみた” の続きを読む→

By Javascript 、、コメントする

[Vue] 続 Constraint Validation API パスワード強度ゲージの表示

[Vue] HTML5 Form Validation を利用するフォーム要素コンポーネント の続き。
脆弱なパスワードかどうか診断してその強さを表示するやつ、Wordpressにも備わってるあれをVueでやる。

“[Vue] 続 Constraint Validation API パスワード強度ゲージの表示” の続きを読む→

By Javascript, Vue&Nuxt 、、コメントする

[WordPress] TinyMCE(v5) カスタムボタンの追加とショートコード／HTMLの相互変換

TinyMCEにショートコードを挿入するカスタムボタンを追加したはいいが、
見た目がイケてないのでビジュアルエディタではHTMLタグに変換してスタイリングしたいなあと思いましてね、その方法をぐぐってたら自分が昔書いた記事にたどり着くっていう…

[wp] 自作したショートコードをビジュアルエディタ内で置換する

そりゃ9年も経ってたら書いたことすら忘れますわ。

TinyMCE自体も記事を書いた当時多分バージョン3だったのが今はバージョン5になってて記事のソースじゃ動かないんで、こちらに現行のWordpress(5.x系)で動くものを載せておきます。

“[WordPress] TinyMCE(v5) カスタムボタンの追加とショートコード／HTMLの相互変換” の続きを読む→

By wordpress コメントする

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

See the Pen
vue.js(bootstrap-vue) File Upload by Tenderfeel (@Tenderfeel)
on CodePen.

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

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

“[Vue] ファイルアップロード＆バリデーション ( use bootstrap-vue )” の続きを読む→

By Javascript, Vue&Nuxt 、コメントする