2020年の5月頃によく聴いていた曲プレイリストです。Spotify にてどうぞ。
Remi Wolf, Wajatta, mxmtoon, Emoress Of, Model/Actriz, Jordana ほか
過去作ったプレイリストは、別ブログ (音楽ブログ "pause") のこのへんに置いています
2020年の5月頃によく聴いていた曲プレイリストです。Spotify にてどうぞ。
Remi Wolf, Wajatta, mxmtoon, Emoress Of, Model/Actriz, Jordana ほか
過去作ったプレイリストは、別ブログ (音楽ブログ "pause") のこのへんに置いています
無料から使える爆速の全文検索サービス Algolia
別でやってる音楽ブログ "pause" のほうに導入してみました。(右上のメニューから検索できます)
こちらブログは hugo + netlify でホスティングしているんですが、静的サイトジェネレータで作ったサイトにも簡単に全文検索を仕込めますね、便利……!
さて、Algolia の使い方。
バックエンド側、 indexデータ の登録方法なんかはググるとすぐ出てきます。一方フロントエンド側、オートコンプリートの実装方法についてはちょっと試行錯誤したので、メモを残しておこうかと。
具体的には、Algolia から提供されている InstantSearch.js を使います。ドキュメントはこちら
必要なパッケージとしては、algoliasearch と instantsearch.js の2つです。インストールしておきます。
npm install algoliasearch instantsearch.js
ざっくりこんな感じ
import algoliasearch from 'algoliasearch/lite' import instantsearch from 'instantsearch.js/es' import {connectAutocomplete} from 'instantsearch.js/es/connectors' // initialize const search = instantsearch({ indexName: 'algoliaのインデックス名', searchClient: algoliasearch('アプリID', 'APIキー') }) // Helper for the render function const renderIndexListItem = ({indexId, hits}) => ` ${hits .map( hit => `<li><a href="${hit.permalink}">${hit.title}</a></li>` ) .join('')} ` // Create the render function const renderAutocomplete = (renderOptions, isFirstRender) => { const {indices, currentRefinement, refine, widgetParams} = renderOptions const $input = widgetParams.container.querySelector('#autocomplete_input') const $result = widgetParams.container.querySelector('#autocomplete_result') if (isFirstRender) { $input.addEventListener('input', event => { refine(event.currentTarget.value) }) } $input.value = currentRefinement result.innerHTML = indices .map(renderIndexListItem) .join('') } // Create the custom widget const customAutocomplete = connectAutocomplete(renderAutocomplete) // Instantiate the custom widget search.addWidgets([ customAutocomplete({ container: document.querySelector('#autocomplete') }) ]) search.start()
algolia search のAPIキーなどは、管理画面から取得必要です。
この例だと renderIndexListItem()
が、検索結果をレンダリングする部分になります。
オートコンプリートを入れたい部分に、こんな感じの html を追記
<div id="autocomplete"> <input id="autocomplete_input"> <ul id="autocomplete_result"> </div>
id名とかはてきとうにJS側と揃えておけばよし
以上で検索処理の実装は完了です、テキストフィールドに文字を入力することで、リアルタイムなオートコンプリートが行われると思います。
あとはいい感じにCSSで見た目を調整ですね
こちらのブログになります (右上のメニューから)
追加でメニューの開閉処理とか、初期状態で検索を実施しないようにするとか、入力値が空の場合は検索結果を表示しないとか、こちょこちょコードを足して調整しています。
Tailwind CSS を使ったビルド環境を、Laravel Mix ベースで構築するメモ
まずは Tailwind CSS と Laravel Mix をインストール。cross-env も必要そうなので一緒に入れる。
yarn add -D tailwindcss laravel-mix cross-env
Laravel Mix のドキュメントを参考に、package.json ファイルの scripts 部分を追加
"scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }
npm run dev
とか npm run watch
とかを使うための設定ですね
Laravel Mix の設定ファイルとして webpack.mix.js を作成、こんなかんじ
const mix = require('laravel-mix'); const tailwindcss = require('tailwindcss') mix.sass('src/app.scss', 'public/css') .options({ processCssUrls: false, postCss: [ tailwindcss() ], })
フォルダ名部分は適宜ご自由に
いよいよ Tailwind CSS を使ったスタイルシートを書く、前述の設定例だと src/app.scss
として
.btn { @apply font-bold py-2 px-4 rounded; } .btn-blue { @apply bg-blue-500 text-white; } .btn-blue:hover { @apply bg-blue-600; }
とか書く。(公式サイトの例そのまんまですが)
@apply
の部分が Tailwind CSS のキモ的なところ。
npm run build
とか npm run watch
とかでビルド。
するとビルド結果として public/css/app.css
がこうなる
.btn { font-weight: 700; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; border-radius: 0.25rem; } .btn-blue { --bg-opacity: 1; background-color: #4299e1; background-color: rgba(66, 153, 225, var(--bg-opacity)); --text-opacity: 1; color: #fff; color: rgba(255, 255, 255, var(--text-opacity)); } .btn-blue:hover { --bg-opacity: 1; background-color: #3182ce; background-color: rgba(49, 130, 206, var(--bg-opacity)); }
ジャーン。
そんなかんじです。
いちおうサンプルの GitHub はこちら
オフィシャルのインストールドキュメントはこちら
こんなプロパティあったのか、知らんかった
CSS の animation で動かしているものを、一時停止させたいとき
animation-play-state: paused;
これでOK
明示的に再生させたいときは
animation-play-state: running;
ボタンを押すとアニメーションを再生・停止するサンプル
See the Pen animation-play-state by h.matsuo (@matsuoshi) on CodePen.
かなりイケてる情報管理ツール、Notion。
いままで無料版では容量の制限(1000ブロックまで) というのがあったのですが、このたび改定され、無料ユーザでも容量無制限になりました。やったーーーー 🎉
シンプルな見た目ながら、色々なことに使える Notion, なので最初の掴みどころがちょっと難しかったりもします
などなど……
メモツールとしても、Wiki としても、タスク管理としても、プロジェクト管理としても使えるし、複数人で共有してコラボレートも可能。 All in One なので、複数ツールを使い分けるのが面倒って人にはうってつけ。
それをこのシンプルな見た目にまとめちゃってるところに、かなりのセンスを感じます。
あたりで試してみてもらえればと。 やや独特なとこはありますが、ハマる人にはハマると思います。データの扱い的に、「こんなこと出来ないかな?」と思ったことが、ちょっとした工夫でだいたいできる感じが気持ちいいです。
Webクリップはこのブラウザ拡張を入れたら OK
いま出来ないことで、これが出来たらいいな〜 というのだと、やはり API対応ですね。すでに予定はされているみたいですが。
他サービスとの連携が現状はほぼできないのですが、メール等からブロックを追加するとか、IFTTT 対応とか、きてくれると嬉しいなあ〜。(いま対応してるのは Slack 通知くらいかな)
まあなんせ、好きな人にはハマるツールだと思うので、興味ある方はお試しあれ。