まず、emoji-martを導入するためには、プロジェクトのディレクトリで次のコマンドを実行します:
npm install emoji-martこのコマンドにより、npmレジストリからemoji-martパッケージがダウンロードされ、プロジェクトに追加されます。
次に、emoji-martを使用して絵文字を表示する方法を見てみましょう。まず、以下のようなコードをHTMLファイルに追加します:
<!DOCTYPE html>
<html>
<head>
<!-- 必要なCSSファイルを読み込む -->
<link rel="stylesheet" href="https://unpkg.com/emoji-mart/css/emoji-mart.css">
</head>
<body>
<!-- 絵文字を表示するための要素 -->
<div id="emoji-picker"></div>
<!-- 必要なJavaScriptファイルを読み込む -->
<script src="https://unpkg.com/emoji-mart"></script>
<script>
// 絵文字ピッカーを初期化する
const emojiPicker = new EmojiMart.EmojiPicker({
// 絵文字が選択されたときの処理
onSelect: (emoji) => {
console.log('選択された絵文字:', emoji);
}
});
// 絵文字ピッカーを表示する要素を指定する
const emojiPickerElement = document.getElementById('emoji-picker');
// 絵文字ピッカーを要素に追加する
emojiPickerElement.appendChild(emojiPicker.render());
</script>
</body>
</html>上記のコードでは、emoji-martのCSSとJavaScriptファイルを読み込み、絵文字ピッカーを表示するための要素を作成しています。また、onSelectコールバック関数を使用して、絵文字が選択されたときに行いたい処理を指定できます。この例では、選択された絵文字をコンソールに表示しています。
これで、emoji-martを使用して絵文字ピッカーを表示する準備が整いました。HTMLファイルをブラウザで開くと、絵文字ピッカーが表示され、絵文字を選択するとonSelect関数が実行されます。
この投稿では、emoji-martの導入方法と基本的な使用方法を紹介しました。さらに詳細な機能やカスタマイズ方法については、emoji-martのドキュメントを参照してください。
以上が、emoji-mart npmパッケージの紹介と使用方法についての内容です。ご参考にしていただければ幸いです。