function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
hiroji1020hiroji1020 

自動フリガナ

VFのフォームで自動ふりがなを実現しなければなりません。どなたか解決策を知っている方はいませんでしょうか?
Taiki YoshikawaTaiki Yoshikawa

JavaScriptのライブラリがあるみたいです。

実際に試したことはないのですが、次のサイトが参考になりそうでした。

 

フォームのフリガナを自動入力させるAutoRuby.js

http://ceo.sourcelab.jp/archives/97

 

-- 追記 --

こんなサイトもありました。

 

[JavaScript] フリガナを自動挿入する3 | Library | Development Reference

http://mashimonator.weblike.jp/library/2012/09/javascript-3-5.html
Taiki YoshikawaTaiki Yoshikawa

追記したリンク先の方法でうまく行きそうな感じがしました。

 

apex:タグを使っていない方法ですが、ひとまず動作確認できると思います。

<apex:page controller="AutoRubySampleController" id="page">
    <head>
        <apex:includeScript value="{!$Resource.KanaTextExtension}"/>
        <script>
            kntxtext.target.push([ 'name1', 'kana1', kntxtext.constant.letterType.kana, kntxtext.constant.insertType.auto ]);
            kntxtext.target.push([ 'name2', 'kana2', kntxtext.constant.letterType.hira, kntxtext.constant.insertType.auto ]);
            kntxtext.target.push([ 'name3', 'kana3', kntxtext.constant.letterType.kana, kntxtext.constant.insertType.check ]);
            kntxtext.target.push([ 'name4', 'kana4', kntxtext.constant.letterType.hira, kntxtext.constant.insertType.checked ]);
            kntxtext.target.push([ 'name5', 'kana5', kntxtext.constant.letterType.kana, kntxtext.constant.insertType.button ]);
        </script>
    </head>
    <body>
        <section id="content">
            <h2>Demo | フリガナを自動挿入する</h2>
            <section>
                <h3>動作サンプル</h3>
                <dl>
                    <dt>文字種：カタカナ／入力形式：自動挿入</dt>
                    <dd>
                        <p>名前：<input type="text" name="name1" value="" /></p>
                        <p>カナ：<input type="text" name="kana1" value="" /></p>
                    </dd>
                </dl>
            </section>
        </section>
    </body>
</apex:page>

 静的リソース：{!$Resource.KanaTextExtension}はダウンロードしたZipファイルのkanaTextExtension.jsをアップロードしたものです。
hiroji1020hiroji1020
ありがとうございます。試して見たいと思います。
Taiki YoshikawaTaiki Yoshikawa

もう少しapex寄りにしてみました。

inputタグの部分はこのままでないと動かないみたいです。

 

Page

<apex:page controller="AutoRubySampleController" id="page">
    <apex:includeScript value="{!$Resource.KanaTextExtension}"/>
    <script>
        kntxtext.target.push([ 'name1', 'ruby1', kntxtext.constant.letterType.kana, kntxtext.constant.insertType.auto ]);
    </script>
    <apex:form id="form">
        <apex:pageBlock title="フリガナ自動挿入" id="block">
            <apex:pageBlockSection columns="1" id="section">
                <apex:pageBlockSectionItem id="inutSectionItem">
                    <apex:outputText value="名前" id="inputLabel"/>
                    <input type="text" name="name1" value="{!input}" />
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem id="rubySectionItem">
                    <apex:outputText value="フリガナ" id="rubyLabel"/>
                    <input type="text" name="ruby1" value="{!ruby}" />
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

 Controller

public with sharing class AutoRubySampleController {
    
    public String input {get; set;}
    public String ruby {get; set;}
    
    public AutoRubySampleController() {
        this.input = '';
        this.ruby = '';
    }
}

 
hiroji1020hiroji1020
ご丁寧にありがとうございます。試して見ます。
hiroji1020hiroji1020

返信が遅れてすみません。実現できました。感謝感謝です。ありがとうございました。