はじめに
OGP の設定について調べたので簡単にメモ。
調べる前は「面倒くさそう」と思ってたけど、ちゃんと見たら大したこと無かった。
TL;DR
<head>にprefixを付与<meta property="og:xxx" content="xxx>で各要素を指定- Twitter は
<meta name="twitter:xxx" content="xxx">で指定 - Facebook は
<meta property="fb:xxx" content="xxx">で指定
はじめに
Chrome 拡張機能で CSV ファイルを生成してダウンロードする方法について整理した。
TL;DR
ほぼ JavaScriptでファイルダウンロード処理を実現する - Qiita の通り
new Blobでオブジェクトを生成createObjectURLで URL に変換<a href="..." download="hoge.csv">でダウンロード
はじめに
OSS の CSS Framework Bulma を使って、メルカリ風のレスポンシブなデザインを構築する方法について整理した。
「メルカリ風のレスポンシブなデザイン」というのは、
- デスクトップなどでは「サイドバー」＋「コンテンツ」
- モバイルでは「サイドバー」が非表示になり、クリック(タップ)で表示される
というような構成を意味している。
TL;DR
- モバイル表示時には隠したい部分に
is-hidden-mobileクラスを付与する - モバイル表示時に隠した要素を表示するためのボタンなどに
is-hidden-tabletクラスを付与する - 上記ボタンをクリックした時に
is-hidden-mobileをトグル(On/Off)する - 全体のデザインは
columns+column+is-<n>-<device>で調整する
はじめに
Vue.js を使って Chrome 拡張機能を開発する方法について簡単に整理した。
前回の記事 では、Kocal/vue-web-extension を使った Chrome 拡張機能の開発方法について調べた。が、「Kocal/vue-web-extension では Popup Page や Options Page で Vue.js を使うもの」、つまり「メインページ(メインコンテンツ?)側では使えないもの」という結論に至った。(※自分の中では、の話)
冷静に考えて「メインページ側に使えないわけがない」と思って、どのようにすれば実現できるかについて調査した。
実際に拡張機能を作ってリリースした話 : Vue.js を使ってChrome 拡張機能を作った話(はてなブックマークのコメントを Qiita 記事内に表示) - Qiita
TL;DR
vue.config.jsを用意してvue-cli-serviceでビルドすれば動作することを確認manifest.jsonではchunk-vendors.jsを先に読み込む- minify とか css preprocessor とかはまだ調べきれてない
はじめに
Vue.js を使って Chrome 拡張機能を開発できるテンプレートを探して、Kocal/vue-web-extension を見つけたので、簡単な使い方のメモ。
追記: 続編として Vue.js を使ってメインページ側で動作する Chrome 拡張機能を開発する方法 という記事も書いた。
TL;DR
vue init kocal/vue-web-extension my-extensionで初期化npm run buildでdist配下にリリースファイル作成npm run watchでファイル変更を検知してビルドsrc配下を編集して拡張機能を開発
はじめに
jQuery Select2 で、初期値を設定する方法と、クリアをする方法を調べた。
TL;DR
$('#mySelect2').val("val").trigger('change');で初期化multipleなら$('#mySelect2').val(["val1", "val2", ...]).trigger('change');
$('#mySelect2').val(null).trigger('change');でクリア
