What's New Qiita

20200219のvue.jsに関する記事は8件です。

  • 投稿日：2020-02-19T23:34:25+09:00

Ionic/vue/capacitorアプリ制作における環境の整備

はじめに

　ionic/vue/capacitorをすべて用いてプロジェクトを書こうという人はかなり少ないように感じられる。マルチプラットフォーム開発を目指してせっかくvue.jsとjavascriptを学んだのに、どのツールをどうやって導入すればいいかわからないから、初心者はなかなかJSコードを書くまでに至らない。こうした状況では環境整備のための初心者向け記事が望まれるところである。
　本来は数ある手法を網羅的に調査し、「どれをどう使えばどうプロジェクトの初期条件を揃えることができるのか」について概観的に説明することが必要であるのだが、今回はinoic/vue/capacitorによる手法を一つだけ紹介する。
　（いつか概説記事も書きたい）

用語の紹介

Vue.js

　JavaScriptフレームワーク。
　JavaScriptは非同期処理のために、大規模開発が難しいという特性がある。そのために生まれたフレームワークの一つ。類似の用途を持つものにAngular, Reactがある。
　中でもVue.jsは最も後発のもので、学習コストの低さと小～中規模での開発のしやすさに特性があると言われる。

Ionic

　マルチプラットフォーム開発のためのプロジェクトとツール群。かつて、PhoneGapやCordovaといったフレームワークが担ってきたマルチプラットフォーム開発を新しく刷新する取り組み。Webエンジニアにもありがたい美麗なHTMLコンポーネント・アイコン集や、アプリ開発のためのCapacitorなどの下位プロジェクトと連続している。

Capacitor

　ウェブ系の資産をアプリ開発にも活用するIonicのやり方に対して、そうしたプロジェクトにカメラやSMSといったスマホネイティブな機能のAPIを提供するためのIonic下位プロジェクト。Cordova / PhoneGapといった旧世代（←おい）プロジェクトの資産もデフォルトで使えるようになっている（一部例外有り）。

想定している開発目的

マルチプラットフォーム開発。または、web系の資産を流用しつつ、なおかつカメラやSMS機能などのネイティブ機能を活用しながらアプリ開発を行いたい。

　今回は、「Androidでもウェブでも動くカメラアプリ」を題材に、実装を進めていく。　以下、Vueのcliインストール、Android Studioのセットアップなどは済んでいると仮定する。

目標

  1. vueプロジェクト動作確認
  2. ionicインストール
  3. capacitorインストール
  4. ネイティブ機能プラグイン動作確認

著者の環境

  • Windows 10
  • Node.js v10.16.0
  • @vue/cli 4.2.2

1. vueプロジェクト動作確認

1.1 プロジェクト新規作成

　Vue.jsとionic双方を用いる場合、プロジェクト作成においては、以下の２つの手段がある

  • ionic init
  • vue create

前者の手法では、ionicの設定jsonファイルが用意されるだけで、初心者のプロジェクト開始方法としては非常に物足りない物がある。そのため、今回はvue createを用いる。
コマンド例。ただしWindowsなので注意。
ここで後々使うことになる各種のモジュールもインストールしている。

  1. vue create {プロジェクト名} // defaultでよい
  2. cd {プロジェクト名}
  3. vue add ionic
  4. npm i @ionic/vue vue-router @capacitor/core @capacitor/cli ionicons@4.5.9-1

1.2 動作確認

次に、vue環境のテストを行う
npm run serveで、localhostにテストサーバーが立つだろう。まずはそこでテストページが見れるかどうかをチェックしてみよう。

うまく表示されない場合は？

  1. ブラウザの開発者向けツール（の「コンソール」タブ）を見てみよう。
  2. npm run serveを実行したコンソールにエラーが表示されていないか？

もしエラーを見つけたら、そのエラーコードを知ってそうな人かGoogleかあたりに聞いてみるといい。

2 ionicインストール

2.1 ionicの組み込み

main.jsに以下を追記。

src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
+import Ionic from '@ionic/vue';
+
+Vue.use(Ionic);
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

（出典： @ganessa 「Capacitor を 試してみる(router & ionicあり)」, https://qiita.com/ganessa/items/d8452fd92335ea5c544a, 閲覧2020/02/19）

2.2 動作確認

　そうしたら、このページから好きなIonicコンポーネントを選んで組み込んでみよう。動作確認のためなのでなんでもよい。
　その際に、以下を変更しておくことを忘れない。

src/App.vue
<template>
  <div id="app">

    ...

  </div>
</template>

このdivタグを、ion-appタグに変更する。

src/App.vue
<template>
  <ion-app>  // ←

    ...

  </ion-app>  // ←
</template>

では、チェックしてみよう。
コマンドはnpm run serve

3. capacitorのインストール

3.1 capacitor初期設定

コマンド例

  1. npx cap init // 各種設定
  2. npm run build // Vueプロジェクトのコンパイル
  3. rename dist www // distフォルダをwwwにリネームする。
  4. npx cap add android // 適宜 iosもインストールのこと。

3.2 動作確認

アプリのエミュレーターを使って、アプリの挙動を検証する。
コマンド例

  1. npx cap open android
  2. Android Studioが表示されていれば、おそらく画面上の緑矢印が点灯しているはずだ。それをクリックする。
  3. プロジェクトがコンパイルされ、エミュレーターが起動し、アプリが起動するはずだ。

Android Studioをインストールしたり、エミュレーターで検証したりする手順については他を当たって欲しい。一般的なアプリ開発の下準備として紹介されている記事がたくさん見つかるはずだ。

エラーが起こった？以下を試してみよう。

  1. Android Studioを再起動する
  2. プロジェクトのandroidフォルダを消去して再びnpx cap add android
  3. エラーコメントを検索してみる

存外にもAndroid Studioの再起動で解決するケースは多い。

4. プラグインの動作確認

　カメラ機能プラグインは、Cordovaなどでも多くのツールが提供されているが、今回はcapacitor/coreが提供しているスマホ向けのカメラAPIを使おう。
　Web向けには、PWA-elementsというCapacitorの機能が優秀だ。

4.1 カメラプラグインの組み込み

　この、capacitorが提供しているカメラ機能を実装する。
　ついでに、PWA Elementsも実装してしまおう。手順をすべてすっ飛ばして、著者がうまく行ったソースコードを公開する。

src/App.vue
<template>
  <ion-app>
    <ion-content>
      <img :src="photo.webPath" />
      {{this.photo}}
      <ion-fab vertical="bottom" horizontal="center" slot="fixed">
        <ion-fab-button @click="takePicture()">
          <ion-icon name="camera"></ion-icon>
        </ion-fab-button>
      </ion-fab>
    </ion-content>
  </ion-app>
</template>

<script>
import { Plugins, CameraResultType } from "@capacitor/core";   // カメラ機能のロード
const { Camera } = Plugins;   // カメラ機能のロード
import { defineCustomElements } from '@ionic/pwa-elements/loader';   // PWA-elementsのロード

export default {
  name: "App",
  data() {
    return {
      photo: ""
    };
  },
  mounted(){
    defineCustomElements(window);  // PWA-elements呼び出し
  },
  components: {},
  methods: {
    async takePicture() {  // カメラ機能の呼び出し
      const image = await Camera.getPhoto({
        quality: 90,
        allowEditing: false,
        resultType: CameraResultType.Uri,
        saveToGallery: false
      });
      this.photo = image;
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4.2 動作確認

  1. npm i @ionic/pwa-elements // pwa-elementsのモジュールインストール
  2. npm run build
  3. rd /s www // 古いフォルダの消去
  4. rename dist www // distに生成されたデータをcapacitor所定のフォルダに移動
  5. npx cap sync // データ同期
  6. npx cap open android // 以降はAndroid Studioで

　ただし、ネイティブのカメラ機能は実機でないと実験できない。しかし、実は上記ですでにマルチプラットフォームに稼働するアプリが完成している。上記のコンパイル手法でなくても、npm run serveでリアルタイムにデバッグができる。

　カメラボタンを押してカメラを起動し、撮影したあと、画面に画像が表示されれば成功だ。
　以上。お疲れさまでした。

Future works 著者の宿題

　veutify/cordova/vueの組み合わせでもマルチプラットフォーム開発ができるらしい。Vueに限っても、検討するべき手段は非常に多くある。総括的な結論を得るにはまだ至っていない。

おわりに - この組み合わせの手触り

　Capacitor/Ionic/Vue.jsの組み合わせは、秀麗なアプリケーション開発をマルチプラットフォームに効率よく展開する事ができる。この利点は、自分のような時間のない学生には非常にありがたい。なぜなら、これさえ学んでおけば将来の活動幅が大きく広がるからだ。それは将来自分がやりたいことが変わったり、就職事情が変化したとしても、この技術が常に自分の中で輝きを失うことはおそらくない。僕はWebデザイナーも、フロントエンドエンジニアも、スマートフォンアプリデベロッパにもなれるし、逆に、学んだことをアプリでもウェブサイトでも表現できるという技術を学んでいる。これは投資としては非常に手堅い。
　とはいえ、この組み合わせならではの苦痛ももちろんある。この組み合わせでの開発は非常に文献が少ないし、そもそも要素技術が多いために、モジュール間でエラーが起こることもままある。おまけに、ionic/vueの組み合わせは未だに公式サポートされていない（公式ドキュメントはまだまだほとんどがAngular/Reactばかりだ）。おかげで僕は多大な時間をエラー処理に潰されたこともあった。
　それは、裏を返せばここが時代の先端ということでもある。多忙ながら、自分はこの未開の平野でやりたいことを自由に試しつつ、将来に意義のある地位を確保したいと思っている。そして、この組み合わせならそれができるはずだ。今後も苦労のあるたびに、積極的に記事を残していきたい。

参考記事

https://qiita.com/ganessa/items/d8452fd92335ea5c544a

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-19T23:16:47+09:00

firebaseから値を取り出すときに気をつけるポイント

今日、vue.jsを書いていた躓いたポイントについてです。

v-htmlでscriptのインスタンスを取り出そうとしたのですが、思うように取り出すことができず。

tweetsの中で uid のあう tweet の content を取り出そうとしていて、このようなコードを書いていました。
tweetsはfirebaseに保存しています。

<template>
    <div>
        <div class="content" v-html="tweet.content"></div>
    </div>
</template>

<script>
import { db } from '../main';

export default {
    props: ['uid'],
    data(){
        return{
            tweet: {}
        }
    },

    firestore(){
        return{
            tweet: db.collection('tweets').where('uid', '==', this.$props.uid)
        }
    }
}
</script>

propsで持ってきたuid を使って contents と照合し、uidのあうものを表示させるというものです。

どこが違うかわかりますでしょうか。
firebaseで返ってきた値は配列で保持されているため、tweet.contentでは取り出すことができないんですね。
ですので、先ほどの

<div class="content" v-html="tweet.content"></div>

というテンプレート部分を、

<div class="content" v-html="tweet[0].content"></div>

に変更すると、tweetの配列1番目のcontentということで、中身を取り出すことができます。

また1つ学びました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-19T19:14:15+09:00

【Vue.js】URLに直接アクセスすると404 Not Foundになる問題の解消方法

困ったこと

npm run build で生成した dist ディレクトリの静的ファイルを公開ディレクトリに設置したら、一部の画面遷移で404 Not Foundが発生するようになりました。また、ルーティングを設定しているURLに直接アクセスしても、設定していた画面が表示されずに404 Not Foundとなってしまいました。
Vue RouterはHistory Modeを設定しており、開発用に npm run serve で立ち上げていた環境では発生しません。

原因

RewriteRuleを設定していなかったことが原因でした。

解決方法

RewriteRuleの設定をWebサーバかコンテンツに設定します。今回はコンテンツ側で制御したかったので .htaccess ファイルを設置することにしました。
dist ディレクトリにそのまま設置したいファイルは public ディレクトリに設置します。Vue Routerのドキュメントを参考に public/.htaccess を設置しました。

public/.htaccess
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

これでビルドすると public/.htaccess が dist/.htaccess にコピーされるようになります。dist 以下の生成ファイルを公開ディレクトリに設置し直すと、404 Not Foundが発生しなくなりました。

参考

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-19T18:13:31+09:00

これからの時代、JQueryではなくVue.jsを使おう

Vue.jsとは？

そもそもVue.jsは、2014年にEvan You氏の個人プロジェクトとして開始された、
Reactに対抗する形の仮想DOMフレームワークです。
※仮想DOMに関しては、下の記事を参照ください。
なぜ仮想DOMという概念が俺達の魂を震えさせるのか
細かいことは置いといて、Vue.jsは仮想DOMや非同期処理の技術を導入しているので、普通のJSライブラリよりむしろ早いのです！
これこそまさしくJQueryさんの 穢れた DOMいじりに取って代わる救世主なのです！

Vue.jsの詳しい使い方

公式ドキュメントを見なさい。
なんか割と、日本語訳がすごいです。
しかも、なんとオフラインでも見られます！

JQuery vs Vue.js

シンプルレンダリングの場合

これが

jquery.html
<div class="app">
    <span class="dat">
    </span>
</div>
<script src="js/jquery.min.js">
</script>
<script>
$(function(){
    $(".app .dat").text("hello");
})
</script>

こうなる

vue.html
<div class="app">
    {{dat}}
</div>
<script src="js/vue.min.js">
</script>
<script>
new Vue({
    el:".app",
    data:{dat:"hello"}
})
</script>

まあ、これだけだとまだjQueryのほうが短いですよね。

カウンターアプリの場合

実用的な意味はないけど。
サンプルとしてはいかに有名であるか。

jquery.html
<div class="app">
    <div class="A">
        <div class="count">
        </div>
        <button>
            Plus!
        </button>
    </div>
    <div class="B">
        <div class="count">
        </div>
        <button>
            Plus!
        </button>
    </div>
    <div class="C">
        <div class="count">
        </div>
        <button>
            Plus!
        </button>
    </div>
</div>
<script src="js/jquery.min.js">
</script>
<script>
let A=0;
let B=0;
let C=0;
$(function(){
    $(".A button").click(function(){
        A++;
        $(".A .count").text(A);
    })
    $(".B button").click(function(){
        B++;
        $(".B .count").text(B);
    })
    $(".C button").click(function(){
        C++;
        $(".C .count").text(C);
    })
})
</script>
vue.html
<div class="app">
    <counter>
    </counter>
    <counter>
    </counter>
    <counter>
    </counter>
</div>
<script src="js/vue.min.js">
</script>
<script>
    Vue.component("counter",{
        data:function(){
            return {s:0}
        },
        template:"<div>{{s}}</div><button v-on:click='s++'>Plus!</button>"
    })
    new Vue({
        el:".app"
    })
</script>

確かにjQueryは冗長なところがありましたね。
それに比べVue.jsはより規格化されており、抜群の柔軟性があることがわかります。
※実はjQueryでももっと短く書けます。

すばらしいElement UIとともに

さて、Vueにも当然「デザインフレームワーク」が存在します。
Vuetify, Vue Bootstrap, Onsen UIなど色々ありますが、私の推しはElement UIです。

では、早速Element UIのサンプルを・・・と言いたいところですが、今回は他の記事をご覧ください。
※Element UIの記事は別な時に書く予定です。

Vue.jsのコンポーネント詰め合わせ「Element」がスゴかった
Element UI 公式サイト
Vue.js製のUIフレームワーク「Element」の使い方

最後に　そしてVueが去る時

Vueの新たなライバル、現る。
Vue.jsの50倍早いライブラリ！？「Svelte」
ReactとVueを改善したSvelteというライブラリーについて

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-19T18:03:23+09:00

valueで設定している初期値が表示されないつまずき

Before

<ul>
    <li>{{name}}</li>
    <li><input type="date" v-model="start" value="2020-01-01"></li>
</ul>

v-modelはvalueの値を無視するようです。

v-model は任意の form 要素にある value、checked または selected 属性の初期値を無視します。

After

<ul>
  <li>{{contract.label}}</li>
  <li><input type="date" v-bind:value="2020-01-01" v-on:input="start = $event.target.value"></li>
</ul>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-19T12:48:31+09:00

【Vue】radioボタンで初期値を設定する方法

普通に書いてみると、できてない

<input type="radio" v-model="ratio" value="600" checked>
<label>2倍</label>
<input type="radio" v-model="ratio" value="900">
<label>3倍</label>
<input type="radio" v-model="ratio" value="1200">
<label>4倍</label>

data(){
    return {
        ratio: null
    }
}

dataの値と初期値として設定したいvalueを同じにする

https://vuejs.org/v2/guide/forms.html#Radio-1

<input type="radio" v-model="ratio" value="600">
<label>2倍</label>
<input type="radio" v-model="ratio" value="900">
<label>3倍</label>
<input type="radio" v-model="ratio" value="1200">
<label>4倍</label>

data(){
    return {
        ratio: 600
    }
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-19T08:45:40+09:00

Vue.jsで翻訳も辞書引きもできるブラウザ拡張機能を作った話

?前置き

初記事なので前置きが長いです。本編を見たい方は?要件まで飛んで下さいね。

?これはなにか

javascriptにほんの少し慣れ、なにか実用性のあるものを作ってみようとし、?辞書+?️‍?翻訳の両方ができる器用貧乏な拡張機能を自作してみた記録

こんなんができました。

o.gif

辞書データをインポートし、選択した部分の単語が辞書内に存在すれば、その結果を表示します
単語or熟語が見つからなかったらGoogle翻訳に投げて、翻訳結果を取得します

GitHubリポジトリ
Chrome ウェブストア
Firefox Addons

?誰

  • かつて趣味でジオシティーズにHTML・JS・CSSを一つのファイルに書いてホームページを作り、隠しページを仕込み、魔法のiらんどやモバゲーで小説を読んでいたような人種
  • 特にやりたい仕事もなかったので、偶然居酒屋で初対面の人になんとなく誘われ、2年半前になんとなく新卒でなんとなく孫受けCOBOLerに
  • ちょうど1年程前に鏡に映った自分を見たら死んだ目をしていたので、脱出してベンチャーへ
  • 今はpythonとjavascriptとC++とWebGLと・・・あとなんだっけ・・・を書いています
    全部ちょっとずつかじった結果まだ1ミリくらいしか分かっていない
  • javascriptだけ2ミリくらい分かった気がするので、何かを作ってみるついでにQiitaにもアウトプットしてみようとしてみんとて、するなり。

?‍?作るものを決める

  • 調べ物をしていると、英語のほうが役に立つ資料が多いが、英語が1ミリもで読めない でも読めるようになりたい
  • ものぐさなのでGoogle翻訳を開いて、文章をコピペする手間すら惜しい

→ 難易度的にもお手軽そうなので、お手軽翻訳機を作ってみYO！

?要件

  • Webページ内で、選択した部分を(できればワンクリックで)パッと翻訳したい
  • 普段のブラウジングは邪魔してほしくない
  • 単語の意味も覚えたいので辞書も引きたい
  • ドイツ語やその他の言語も自動判別して翻訳できたらしたい

(・・・どんだけわがままやねん)

?偉大な先輩方が作ったものを覗いてみる

  • Mouse Dictionary
    辞書データを読み込んで、マウスオーバーした単語の意味を爆速で表示していってくれるツール
    もうこれ使えばいいんじゃないかと思うくらい完成されている・・・すごい・・・
    この作者さんが作ったゲームを昔めっちゃやり込・・・話が脱線するのでまたの機会にします
  • Simple Translate
    今までこれ使ってました
    これに辞書機能足せたらええなーと言うのが発端でもあります

この2つを合わせた拡張機能が作れたらめっちゃ便利なのでは・・・？？？？
(多分既にある・・・？私の調べ方が足りないだけな気がしている)

?基本的な仕組み

極力シンプルに作りました。

image.png

基本機能は2週間足らずで完成しましたが、

  • 途中から突然思い立ってvue-web-extensionを使うように変更したり、
  • 辞書データの管理にstorage APIを使ったら速度がとんでもなく遅くて無限に最適化が必要になったり、
  • ↑の挙動がFirefoxとChromeでぜんぜん違うので対応に苦労したり、
  • 権限周りのせいで拡張機能の審査に1ヶ月位待たされたり( これが一番時間かかった )

で残り１割の完成にものすごく時間がかかりました。

最初に設計をしっかりしなかったせいです。エンジニア失格ですね。

?‍?使い方

⚙️オプションを開く

オプションページはこんな感じになっています。
シンプルイズベストが信条なので、ゴチャゴチャ作り込むのはやめましためんどくさかったとも言う

image.png

  • chromeの場合
    アイコンを右クリックし、オプションを開く

image.png

  • Firefoxの場合
    アドレスバーに about:addonsと入力後、オプションを開く

image.png

?辞書データの登録

※ 現在は英辞郎データ ( 有料、https://booth.pm/ja/items/777563 )、ejdic-hand ( 無料、https://kujirahand.com/web-tools/EJDictFreeDL.php ) にのみ対応しています
需要があればJSONにも対応できればいいのですが、私自身の需要がないので未実装です

  1. 辞書データを選択します
    ※ 選択した時点で登録が開始します
  2. 暫く待つと登録が完了します
  3. 単語を選択すると、辞書に載っていた場合にその意味を表示できます

?️‍?翻訳機能

  1. Google App Scriptで翻訳スクリプトを作ります。
    Google翻訳APIを無料で作る方法
    3 分で作る無料の翻訳 API with Google Apps Script
    この辺りを参考にしてAPIを作ります。

下図はその一例です。

image.png

main.gs
function doPost(e) {
  const text = e.postData.getDataAsString();
  const translatedText = LanguageApp.translate(text, "", "ja");

  const output = ContentService.createTextOutput();
  output.setMimeType(ContentService.MimeType.TEXT);
  output.setContent(translatedText);
  return output;
}

確認はPowerShellでやりました。
curlだったら
$ curl -L -d "this is a pen." https://script.google.com/macros/s/[生成されたURL]
みたいな感じですかね。

check
> Invoke-WebRequest -Method Post -Body 'this is a pen.' https://script.google.com/macros/s/[生成されたURL]
StatusCode        : 200
StatusDescription : OK
Content           : これはペンです。
...
  1. 実行URLをオプションページのtranslate API settingsのテキストボックスに貼り付け、
    API動作テストボタンを押下します
  2. テストが行われ、成功した場合にそのURLが登録されます
    失敗した場合はその旨が表示されます
  3. 文章を選択すると、辞書に選択部分の単語が載っていなかった場合に翻訳を行い、その結果を表示します

?機能の一時停止

ちょっと邪魔！今は出てこないで！！！
っていう時に、拡張機能のアイコンを押すと、翻訳機能のオンオフが切り替えられるようにしました。
地味だけどあるとほんの少し便利なので加えました。

?おわりに

  • こういうのをサクッと見通しよく書けるVueってやっぱりすごいですね。
    ほんとにほんとに便利な時代になりました。
  • 辞書データの文字コード自動検出は、辞書データの最初の数文字を読み込んで、そのバイト列で判断するという仕様。
    もしその数文字が全部英語だったら勝手にUTF8になる。文字コード周りはどうやら闇が深いようなので戦うのをやめましたが、いつか直したい。
  • iframeに対応してなかったり、カスタマイズ性が低かったりするのはそのうち対応します。頭の悪いコードを書いてたら石を投げてください。
  • 昔の人間な上に何年もCOBOLを触っていたせいで、原始人が高度文明に触れて途方に暮れるみたいな気持ちで作っていました。
    作り上げるにあたって色んな壁にぶち当たってるので、いつかそういう技術内容の記事も書きたい。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-19T08:45:40+09:00

Vue.jsで翻訳も辞書引きもできるブラウザ拡張機能を作りました

?前置き

初記事なので前置きが長いです。本編を見たい方は?要件まで飛んで下さいね。

?これはなにか

javascriptにほんの少し慣れ、なにか実用性のあるものを作ってみようとし、?辞書+?️‍?翻訳の両方ができる器用貧乏な拡張機能を自作してみた記録

こんなんができました。

o.gif

辞書データをインポートし、選択した部分の単語が辞書内に存在すれば、その結果を表示します
単語or熟語が見つからなかったらGoogle翻訳に投げて、翻訳結果を取得します

GitHubリポジトリ
Chrome ウェブストア
Firefox Addons

?誰

  • かつて趣味でジオシティーズにHTML・JS・CSSを一つのファイルに書いてホームページを作り、隠しページを仕込み、魔法のiらんどやモバゲーで小説を読んでいたような人種
  • 特にやりたい仕事もなかったので、偶然居酒屋で初対面の人になんとなく誘われ、2年半前になんとなく新卒でなんとなく孫受けCOBOLerに
  • ちょうど1年程前に鏡に映った自分を見たら死んだ目をしていたので、脱出してベンチャーへ
  • 今はpythonとjavascriptとC++とWebGLと・・・あとなんだっけ・・・を書いています
    全部ちょっとずつかじった結果まだ1ミリくらいしか分かっていない
  • javascriptだけ2ミリくらい分かった気がするので、何かを作ってみるついでにQiitaにもアウトプットしてみようとしてみんとて、するなり。

?‍?作るものを決める

  • 調べ物をしていると、英語のほうが役に立つ資料が多いが、英語が1ミリもで読めない でも読めるようになりたい
  • ものぐさなのでGoogle翻訳を開いて、文章をコピペする手間すら惜しい

→ 難易度的にもお手軽そうなので、お手軽翻訳機を作ってみYO！

?要件

  • Webページ内で、選択した部分を(できればワンクリックで)パッと翻訳したい
  • 普段のブラウジングは邪魔してほしくない
  • 単語の意味も覚えたいので辞書も引きたい
  • ドイツ語やその他の言語も自動判別して翻訳できたらしたい

(・・・どんだけわがままやねん)

?偉大な先輩方が作ったものを覗いてみる

  • Mouse Dictionary
    辞書データを読み込んで、マウスオーバーした単語の意味を爆速で表示していってくれるツール
    もうこれ使えばいいんじゃないかと思うくらい完成されている・・・すごい・・・
    この作者さんが作ったゲームを昔めっちゃやり込・・・話が脱線するのでまたの機会にします
  • Simple Translate
    今までこれ使ってました
    これに辞書機能足せたらええなーと言うのが発端でもあります

この2つを合わせた拡張機能が作れたらめっちゃ便利なのでは・・・？？？？
(多分既にある・・・？私の調べ方が足りないだけな気がしている)

?基本的な仕組み

極力シンプルに作りました。

image.png

基本機能は2週間足らずで完成しましたが、

  • 途中から突然思い立ってvue-web-extensionを使うように変更したり、
  • 辞書データの管理にstorage APIを使ったら速度がとんでもなく遅くて無限に最適化が必要になったり、
  • ↑の挙動がFirefoxとChromeでぜんぜん違うので対応に苦労したり、
  • 権限周りのせいで拡張機能の審査に1ヶ月位待たされたり( これが一番時間かかった )

で残り１割の完成にものすごく時間がかかりました。

最初に設計をしっかりしなかったせいです。エンジニア失格ですね。

?‍?使い方

⚙️オプションを開く

オプションページはこんな感じになっています。
シンプルイズベストが信条なので、ゴチャゴチャ作り込むのはやめましためんどくさかったとも言う

image.png

  • chromeの場合
    アイコンを右クリックし、オプションを開く

image.png

  • Firefoxの場合
    アドレスバーに about:addonsと入力後、オプションを開く

image.png

?辞書データの登録

※ 現在は英辞郎データ ( 有料、https://booth.pm/ja/items/777563 )、ejdic-hand ( 無料、https://kujirahand.com/web-tools/EJDictFreeDL.php ) にのみ対応しています
需要があればJSONにも対応できればいいのですが、私自身の需要がないので未実装です

  1. 辞書データを選択します
    ※ 選択した時点で登録が開始します
  2. 暫く待つと登録が完了します
  3. 単語を選択すると、辞書に載っていた場合にその意味を表示できます

?️‍?翻訳機能

  1. Google App Scriptで翻訳スクリプトを作ります。
    Google翻訳APIを無料で作る方法
    3 分で作る無料の翻訳 API with Google Apps Script
    この辺りを参考にしてAPIを作ります。

下図はその一例です。

image.png

main.gs
function doPost(e) {
  const text = e.postData.getDataAsString();
  const translatedText = LanguageApp.translate(text, "", "ja");

  const output = ContentService.createTextOutput();
  output.setMimeType(ContentService.MimeType.TEXT);
  output.setContent(translatedText);
  return output;
}

確認はPowerShellでやりました。
curlだったら
$ curl -L -d "this is a pen." https://script.google.com/macros/s/[生成されたURL]
みたいな感じですかね。

check
> Invoke-WebRequest -Method Post -Body 'this is a pen.' https://script.google.com/macros/s/[生成されたURL]
StatusCode        : 200
StatusDescription : OK
Content           : これはペンです。
...
  1. 実行URLをオプションページのtranslate API settingsのテキストボックスに貼り付け、
    API動作テストボタンを押下します
  2. テストが行われ、成功した場合にそのURLが登録されます
    失敗した場合はその旨が表示されます
  3. 文章を選択すると、辞書に選択部分の単語が載っていなかった場合に翻訳を行い、その結果を表示します

?機能の一時停止

ちょっと邪魔！今は出てこないで！！！
っていう時に、拡張機能のアイコンを押すと、翻訳機能のオンオフが切り替えられるようにしました。
地味だけどあるとほんの少し便利なので加えました。

?おわりに

  • こういうのをサクッと見通しよく書けるVueってやっぱりすごいですね。
    ほんとにほんとに便利な時代になりました。
  • 辞書データの文字コード自動検出は、辞書データの最初の数文字を読み込んで、そのバイト列で判断するという仕様。
    もしその数文字が全部英語だったら勝手にUTF8になる。文字コード周りはどうやら闇が深いようなので戦うのをやめましたが、いつか直したい。
  • iframeに対応してなかったり、カスタマイズ性が低かったりするのはそのうち対応します。頭の悪いコードを書いてたら石を投げてください。
  • 昔の人間な上に何年もCOBOLを触っていたせいで、原始人が高度文明に触れて途方に暮れるみたいな気持ちで作っていました。
    作り上げるにあたって色んな壁にぶち当たってるので、いつかそういう技術内容の記事も書きたい。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧