人型自走输入法(网页日语输入法)

网页日语输入法

  • 简介
  • 第一版
  • 键盘版
    • 基本输出
    • 多字符输出
    • 未完成输出
    • 汉字输出解决方案
      • 分页
      • 汉字库
      • 抢来的汉字库
    • 其他功能
      • 版本更新提醒
      • 自动加载jQuery
  • 优缺点
    • 缺点
    • 优点
  • 开发视频

简介

这是一个javaScript的小程序(使用jQuery框架),拖放至收藏夹使用,可以实现网页中的简单日语假名输入。最初做这个的契机是因为某个语言翻译、查词等功能的网站,网站的日语查询页面是自带一个点选输入日语的输入法,这就可以帮助电脑上没有日语输入法的人也可快速查词。

第一版

参考上面说的网站功能,做出了第一版:

可以进行简单的点选输入以及平假名片假名的切换功能。
使用时需要先点击一下收藏夹的javascript:链接,然后再页面内点击任意一个输入框即可召唤这个“输入法”。

但很快我感觉,这样还是很麻烦,不如直接用键盘输入方便。于是推翻所有重新开始键盘版的制作。

键盘版

人型自走输入法(网页日语输入法)_第1张图片
于是就出现了这个。
它的原理是每次按键获取键位对应的ID,根据ID调取数组内事先存好的假名。

基本输出

最基本的比如 a 的ID是65,a会输出“あ”或者片假名的“ア”
那么数组就是:

key[65] = ['あ', 'ア']

多字符输出

但大部分都是两个甚至三个字符拼起来的,也很简单
比如 ka ,k 的ID是75,a的ID是65
只需要先设置相应的数组:

key[75][65] = ['か', 'カ']

未完成输出

未完成输出是指只输入了 k 但没输入其他时,会显示一个 k 而不是什么都没有。
这个的解决方案我是在数组前面设置了0和1来进行区分
比如:

key[75] = [1, 'k']

当按下 k 键时,会获取key[75],然后判断key[75][0]的值如果是 1 则是未完成输出
就会直接输出后面的“k”
如果是0 则会根据平假名片假名输出相应的值

key[75][65] = [0, 'か', 'カ']

汉字输出解决方案

分页

我将分页划为两部分:数据库分页和输入法分页
数据库分页每次请求数据库读取25条数据,输入法将其保存在变量内,再次分为5页(图中因为数据库只有5条数据,输入法分页就分成了3个一页),输入法如果翻到最后一页则再次发起数据库请求,再请求数据库分页第2页的数据。

汉字库

起初想自己用本地数据库建立一个汉字库,但这个已经被否决了,因为自己构建一个输入法汉字库,简直太庞大了。我也想过留一个汉字添加页面让用户来添加,但鉴于这个东西并没人用,所以还是算了。只是用做测试做了一个,里面就放了几个字。

抢来的汉字库

本地数据库行不通,最近想到其实可以用CURL来获取字典网站的,找来找去发现了一个并成功了,但我找到的这个字典网站收录的汉字不是很多,所以又继续找。最终找到了一个非常好用的:日語辭書索引

我服务器端是用的PHP,用一个CURL请求这个网址并带上查询的关键字:

$url = 'https://www.jpmarumaru.com/tw/toolJPDic.html?d=0&v=0&t=' . $keyword;
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_HEADER, 0);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 2);
$data = curl_exec($curl);
curl_close($curl);

其中$data返回的就是网页HTML了
再用正则表达式将有用的部分提取出来、构造相应返回格式的json就解决了。

目前使用的一直是这种方法,只希望这个网站一直能用。

其他功能

版本更新提醒


提示最新版本和更新内容,点击确定后跳转到主站。

自动加载jQuery


可以用于没有jQuery的网站,第一次点击会自动加载。

优缺点

缺点

  1. 只能在PC端的浏览器中使用。
  2. 版本更新和汉字输入涉及到跨域连接服务器,暂不支持https协议的网站(但可以进行假名的输入,输入法服务器网站如果也是https应该可以解决这一问题。但,没钱。
  3. 不支持屏蔽加载外部JavaScript的网站。

优点

  1. 安装、使用方法简单,程序轻巧。
  2. 给电脑没有日语输入法和不想切来切去的人使用。
  3. 能满足普通的输入和假名、单词的查询(在百度等网站使用。

开发视频

了解一下
https://www.bilibili.com/video/av8521956

你可能感兴趣的:(个人开发,小工具)