yuheijotaki.com

フォーム入力バインディングを理解する その7

f:id:jotaki:20190212100544p:plain

何年か前に jQuery で作った type tester という簡易的なフォント（関連のスタイリング）のテスターツールを Vue.js で作ってみる。 その7

GitHub Pages： https://yuheijotaki.github.io/type-tester/
GitHub リポジトリ：https://github.com/yuheijotaki/type-tester

和文/欧文テキスト/自由入力欄を選択式でテキスト表示をする

  • 和文/欧文の場合はデフォルトテキストをそれぞれ用意
  • 自由入力欄の場合はテキストエリアを空にしておいて入力されたテキストをプレビューできるようにする

Vue でラジオボタンの値だけ取得してJavaScriptで <textarea> の要素を入れ替える形にしました。

App.vue（抜粋）

...
changeTextRadio: function (textType) {
  const inputTextArea = document.tools.inputTextArea; // ツールのテキストエリアオブジェクトを取得
  const textTypeValue = textType;                     // 選択されたラジオボタンのテキストタイプを取得
  if ( textTypeValue === 'textJa' ) {
    inputTextArea.value = defaultTextJa; // ツールのテキストエリアの値書き換え
    this.message = defaultTextJa;        // プレビューエリアのテキストを書き換え
  } else if ( textTypeValue === 'textEn' ) {
    inputTextArea.value = defaultTextEn;
    this.message = defaultTextEn;
  } else if ( textTypeValue === 'textFree' ) {
    inputTextArea.value = ``;
    this.message = ``;
  }
},
...

font-feature-settings の値

CSS的な話ですが、font-feature-settings の値で、

  • 既定設定の normal や inherit initial unset は "" がなし
  • Open Type の特性タグを使用する "palt" "smcp" "swsh" は "" があり

で値変更したときに下記のように変更しないとダメでした。
App.vue（抜粋）

...
changeFontFeatureSettings: function (feature) {
  if ( feature === 'normal' ) {
    this.styleObject['font-feature-settings'] = `${feature}`;
  } else {
    this.styleObject['font-feature-settings'] = `"${feature}"`;
  }
},
...

text-align: の初期値は leftと思っていたのですが、start だったり細かい発見がありました。

次やること

  • ツール一式を非表示にする機能
  • CSSの出力機能
  • ラベルなど文字ゆれある所を直す
  • ファイル/コンポーネント名を直す
  • 全体スタイリング