ryo-utsunomiya / Vanilla Autokana
Licence: mit
A Vanilla-JavaScript library to complete furigana automatically.
Stars: ✭ 48
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vanilla Autokana
React Hanko
A Japanese hanko component for React.js
Stars: ✭ 14 (-70.83%)
Mutual labels: japanese, form
Owasp Masvs
The Mobile Application Security Verification Standard (MASVS) is a standard for mobile app security.
Stars: ✭ 1,030 (+2045.83%)
Mutual labels: japanese
Google Ime Dictionary
日英変換・英語略語展開のための IME 追加辞書 📙 日本語から英語への和英変換や英語略語の展開を Google 日本語入力や ATOK などで可能にする IME 拡張辞書です
Stars: ✭ 30 (-37.5%)
Mutual labels: japanese
Jwebform
Java WebForm Library: HTML Form generation and validation
Stars: ✭ 14 (-70.83%)
Mutual labels: form
Ncform
🍻 ncform, a very nice configuration generation way to develop forms ( vue, json-schema, form, generator )
Stars: ✭ 1,009 (+2002.08%)
Mutual labels: form
Yomichan Import
External dictionary importer for Yomichan.
Stars: ✭ 30 (-37.5%)
Mutual labels: japanese
Vue Form Base
Form-Generator for editing plain or nested Javascript objects and getting reactive Vuex Result.
Stars: ✭ 14 (-70.83%)
Mutual labels: form
Angular Contenteditable Accessor
This accessor allows you to use Angular forms with contenteditable elements with ease. It has zero dependencies, other than Angular itself as peer and works with Angular 4+ in all modern browsers, including Internet Explorer 11
Stars: ✭ 34 (-29.17%)
Mutual labels: form
Nagisa Tutorial Pycon2019
Code for PyCon JP 2019 talk "Python による日本語自然言語処理 〜系列ラベリングによる実世界テキスト分析〜"
Stars: ✭ 46 (-4.17%)
Mutual labels: japanese
vanilla-autokana
フォームのフィールドに文字を入力すると、別のフィールドにかなを自動入力するライブラリです。
特徴
- jQueryに依存していません
- scriptタグからの読み込みとESModulesのimportに対応しています
インストール方法
npm
npm i vanilla-autokana # or yarn add vanilla-autokana
npmを使わない方法
このリポジトリの dist/autokana.js
をダウンロードし、scriptタグで読み込んでください。
使用方法
-
AutoKana.bind()
メソッドの第1引数にふりがな入力元のinput要素、第2引数にふりがな出力先のinput要素のidを指定します - input要素が見つけられない場合は正常に動作できないため、DOMContentLoadedイベント内での実行を推奨します
- ライブラリ本体はDOMのライフサイクルイベントに依存しないため、ライブラリの読み込みには
defer
属性の追加を推奨します
<input name="name" id="name">
<input name="furigana" id="furigana">
<script src="autokana.js" defer></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
AutoKana.bind("#name", "#furigana");
// ↓ふりがなをカタカナで入力したい場合
// AutoKana.bind("#name", "#furigana", { katakana: true });
});
</script>
モジュールとしてimportする
ESModulesとしてimportすることができます。
import * as AutoKana from 'vanilla-autokana';
AutoKana.bind('#name', '#furigana');
Vue.jsと組み合わせる
v-model
を使用している場合、input要素のvalue属性への値のセットは動作しません。
↓のように、 getFurigana
メソッドを使ってふりがなを取り出し、リアクティブプロパティにセットしてください。
<template>
<div id="app">
<div>
<label for="name">名前</label>
<input name="name" id="name" v-model="name" @input="handleNameInput">
</div>
<div>
<label for="furigana">ふりがな</label>
<input name="furigana" id="furigana" v-model="furigana">
</div>
<h2>入力内容の確認</h2>
<p>名前: {{ name }}</p>
<p>ふりがな: {{ furigana }}</p>
</div>
</template>
<script>
import * as AutoKana from 'vanilla-autokana';
let autokana;
export default {
name: 'App',
data() {
return {
name: '',
furigana: '',
}
},
mounted() {
autokana = AutoKana.bind('#name', '#furigana');
},
methods: {
handleNameInput() {
this.furigana = autokana.getFurigana();
}
}
}
</script>
React.jsと組み合わせる
Vue.jsと同様の対応が必要です。
import React, { Component } from 'react';
import * as AutoKana from 'vanilla-autokana';
let autokana;
class App extends Component {
constructor() {
super();
this.state = {
name: '',
furigana: '',
};
this.handleNameInput = this.handleNameInput.bind(this);
}
componentDidMount() {
autokana = AutoKana.bind('#name', '#furigana');
}
handleNameInput(ev) {
this.setState({
name: ev.target.value,
furigana: autokana.getFurigana(),
});
}
render() {
return (
<div className="App">
<div>
<label htmlFor="name">名前</label>
<input name="name" id="name" value={this.state.name} onInput={this.handleNameInput} />
</div>
<div>
<label htmlFor="furigana">ふりがな</label>
<input name="furigana" id="furigana" value={this.state.furigana} />
</div>
<h2>入力内容の確認</h2>
<p>名前: { this.state.name }</p>
<p>ふりがな: { this.state.furigana }</p>
</div>
);
}
}
export default App;
ライセンス
MIT
謝辞
このライブラリの設計・実装は jquery-autokana(https://github.com/harisenbon/autokana) に大きく影響を受けています。
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].