くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

【小ネタ】webpackでhtmlも扱う

webpackでhtmlも出力したかったので、その時のメモ。


html-webpack-pluginhtml-loaderを使えばOK

ディレクトリ構成はこんな感じ。

.
├── src
│   ├── html
│   │   └── index.html
│   └── index.js
│
└── dist
    ├── js
    │   └── main.js
    └── index.html
インストール
$ npm install --save -D html-webpack-plugin html-loader
webpack.config.jsの設定
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports  = {
  entry:  `./src/index.js`,
  output: {
    path:  `${__dirname}/dist/js`,
    filename:  "main.js"
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        loader:  "html-loader"
      }
    ]
  },
  plugins: [
    new  HtmlWebpackPlugin({
      template:  "src/html/index.html",
      filename:  '../../index.html'
    })
  ],

参考にしたサイト様

Vue.jsでの配列・オブジェクト操作のお作法

Vue.jsでは、配列やオブジェクトの代入を、うまく検知できないらしい。。
お作法があるので、調べてみたとこの備忘録。

配列

// 追加: pushを使う
let addItem = ...
this.items.push(addItem);

// 変更: spliceを使う
let modifyIndex = 1;
let modifyItem = ...:
this.items.splice(modifyIndex, 1, modifyItem);

// 削除: spliceを使う
let modifyIndex = 1;
this.items.splice(modifyIndex, 1);

オブジェクト

// 例: this.obj.key = newObj;

// 追加・変更: Vue.setを使う場合
this.$set(this.obj, "key", newObj);
// もしくは、
Vue.set(this.obj, "key", newObj)

// 追加・変更: Object.assign()を使う場合
this.obj = Object.assign({}, vm.obj, {  
 key: newObj,  
})

// 削除
Vue.delete(this.obj, "key")

以上!!

【宣伝】複数言語へ一括翻訳できる文章・単語の管理アプリ『トランスノート』をリリースしました!

f:id:wannabe-jellyfish:20181123102921p:plain:w400

トランスノート|https://trans-notes.net/:plain

アプリやサービスの多言語対応をサポートしてくれるWebサービスです。

メッセージごとにIDをつけれるので、メッセージ一覧の作成・管理に利用できて、
AndoridのXML形式とか、ファイルをそのまま配置できるとこまでやってくれます。

詳しい内容はこちらの記事で。 wannabe-jellyfish.hatenablog.com

参考にしたサイト様

SEO/OGP関連のmetaタグをまじめに対応しようとしてみた。

リリースした新しいWebサービストランスノート]を公開するときに、
まじめにSEO関連を調べてみたので、その時の備忘録。

やらなきゃいけなことがたくさんあった。。

metaタグといっても、いろいろある。

  1. 検索関連の基本的な設定
  2. ファビコンやiPhoneAndroidのショートカットで表示されるタッチアイコン
  3. ソーシャル関連のメタタグ(OGP)
  4. Twitterカード用の設定
  5. Facebook用の設定

やることをまとめると以下の感じ。

SEOに対応するためにタスクリスト

  • 用意する
    • サイト名
    • タイトル(各ページ)
    • 著者名/Copyright
    • 説明文
    • キーワード
    • ファビコン用の画像(700×700のpngsvg)
    • OGP用の画像(縦630px横1200px。ただし、まんなかの630pxx630pxに収まるくらいがよい)
    • Twiterカード用の画像(OGP用の画像でもOK)
    • TwitterID
  • favicon generatorで画像を一括生成
  • 用意した文書と画像を元に、metaタグを設定
  • Google Search Console の設定(サイトマップの登録, robots.txt の登録)
  • Google Analyticsの設定(コンバージョン設定, Google Search Console との連携)

SEOのためのチェックリスト

確認用のツールがいろいろ公開されているので、それぞれ試してみる。

設定するmetaタグ

設定するタグは、以下な感じ。

SEO/基本要素

<meta charset="utf-8">
<title>{{ タイトル }}</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="{{ 説明文 }}">
<meta name="keywords" content="キーワード,キーワード">
<meta name="author" content="{{ 作成者 }}">
<meta name="copyright" content="{{ コピーライト }}">

ファビコン/タッチアイコン

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="shortcut icon" href="/favicon.ico">

<!-- iPhone/iPad用 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">

<!-- Safari用 -->
<link rel="mask-icon" href="/safari-icon.svg" color="#FFFFFF">

<!-- AndroidのChrome用 -->
<link rel="icon" type="image/png" sizes="192×192" href="/android-chrome-192×192.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#FFFFFF">

<!-- Window8/10用 -->
<meta name="msapplication-config" content="/browserconfig.xml" >
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/mstile-144×144.png">

OGP(ソーシャルメタタグ)

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/ fb#">
<meta property="og:type" content="website" /> <!-- website/blog/article/profileなど -->
<meta property="og:title" content="{{ タイトル }}" />
<meta property="og:description" content="{{ 説明文 }}">
<meta property="og:url" content="{{ ページURL }}" />
<meta property="og:image" content="{{ 絶対パス }}/img/ogp.jpg" />
<meta property="og:site_name" content="{{ サイト名 }}" />

Twitterカード

<meta name="twitter:card" content="summary_large_image" /> <!- summary, summary_large_image, app, player cards ->
<meta name="twitter:site" content="@{{ twitter id }}" />
<meta name="twitter:creator" content="@{{ twitter id }}" />

Facebook

<meta property="fb:app_id" content="AppID">

インデックス対策: インデックスしてほしくないとき

<meta name="robots" content="noindex,nofollow"> <!-- クローラへの指示。indexしない、リンクを辿らない -->

以上!!

【宣伝】複数言語へ一括翻訳できる文章・単語の管理アプリ『トランスノート』をリリースしました!

f:id:wannabe-jellyfish:20181123102921p:plain:w400

トランスノート|https://trans-notes.net/:plain

アプリやサービスの多言語対応をサポートしてくれるWebサービスです。

メッセージごとにIDをつけれるので、メッセージ一覧の作成・管理に利用できて、
AndoridのXML形式とか、ファイルをそのまま配置できるとこまでやってくれます。

詳しい内容はこちらの記事で。 wannabe-jellyfish.hatenablog.com

参考にしたサイト様

【小ネタ】JavaScriptでクリップボードにコピーする(Async Clipboard API)

クリップボードにコピーするほう法を調べたので、その備忘録。

// Copy
navigator.clipboard.writeText("some text").then(function() {
    // Promise resolved successfully.
    console.log("Copied to clipboard successfully!");
}, function() {
    // Promise rejected.
    console.error("Unable to write to clipboard. :-(");
});

// Paste
navigator.clipboard.readText().then(function(data) {
    // Successful read.
    console.log("Read from clipboard: " + data);
}, function() {
    // Read failed.
    console.log("Failed to read from clipboard");
})

以前は、以下のようなのがあったらしい。 - document.execCommand(...) - clipboard.js - clipboard-polyfill.js

参考にしたサイト様

【新サービス】複数言語へ一括翻訳できる文章・単語の管理アプリ『トランスノート』をリリースしました!

f:id:wannabe-jellyfish:20181123102921p:plain

ひそひそと作り始め、ついにリリース。。!! とはいえ、ベータ版ですが。。

開発動機は、「めんどくさい。」

アプリの多言語対応は重要。でも、めんどくさい。

多言語対応やローカライズは重要。

でも、個人開発だと、翻訳者もいないし、コストも限界が。。
Google翻訳でも、いちいちコピペがめんどくさい。。
過去の結果も残ってなくて、毎回はじめから考え直さないと。。

つらい、つらすぎる。。

トランスノートで、多言語対応を、もっと簡単に。

アプリやサービスの多言語対応をサポートしてくれるWebサービス

  1. 複数の言語へ一括翻訳
  2. 翻訳した結果の保存・管理
  3. 保存した翻訳結果のエクスポート

をしてくれます。

メッセージごとにIDをつけれるので、メッセージ一覧の作成・管理に利用できて、
AndoridのXML形式とか、ファイルをそのまま配置できるとこまでやってくれます。

翻訳が必要なメッセージは、トランスノートで管理すればOK!

使い方

使い方は、シンプル。3ステップ。
1. 翻訳したい言語を選ぶ 2. 文章を一括翻訳 3. エクスポートして配置

1. 翻訳したい言語を選ぶ

f:id:wannabe-jellyfish:20181123121742p:plain:w200

まずは、ベースの言語と翻訳したい言語を選んで「ノート」を作成。
文章や単語のグループを「ノート」と呼びます。フォルダみたいなもの。

ノート作成画面はこんな感じ。

f:id:wannabe-jellyfish:20181123121716p:plain:w400
  • 「デフォルトの言語」に、翻訳元の言語を選択
  • 「翻訳する言語」に、翻訳先の言語を選択

2. 文章を一括翻訳

f:id:wannabe-jellyfish:20181123121756p:plain:w200

作成したノートには、翻訳したい「テキスト」を一括翻訳した結果と合わせて、保存できます。

テキスト作成画面はこんな感じ。

一括翻訳もできるし、気に入らなければ、個別に翻訳し直しも。

3. エクスポートして配置

f:id:wannabe-jellyfish:20181123121906p:plain:w200

翻訳したテキストは、CSVJSONAndroid Resource XMLGoogle Play Consoleの形式で、ノート単位でエクスポートできます。
Android Resource XMLGoogle Play Console形式では、ファイルをそのまま配置でき、リリースも簡単に。

こんな感じのノートの場合、それぞれこんな感じでエクスポートできます。

f:id:wannabe-jellyfish:20181123122616p:plain
CSV

1テキスト1行で書く翻訳結果を書き出し。

ID,ja,en,zh-CN,zh-TW,ko
hello,こんにちは,Nice to meet you,您好,您好,안녕하세요
morning,おはよう,Good morning,早上好,早上好。,안녕
JSON

1テキスト1オブジェクトとして、オブジェクトのリスト形式で書き出し。

[
  {
    "id": "hello",
    "ja": "こんにちは",
    "en": "Nice to meet you",
    "zh-CN": "您好",
    "zh-TW": "您好",
    "ko": "안녕하세요"
  },
  {
    "id": "morning",
    "ja": "おはよう",
    "en": "Good morning",
    "zh-CN": "早上好",
    "zh-TW": "早上好。",
    "ko": "안녕"
  }
]
Google Play Consoleのリリースノート

Andoridをリリースするときのリリースノートの形式で書き出し。

<ja-JP>
こんにちは
おはよう
</ja-JP>

<en-US>
Nice to meet you
Good morning
</en-US>

<zh-CN>
您好
早上好
</zh-CN>

<zh-TW>
您好
早上好。
</zh-TW>

<ko-KR>
안녕하세요
안녕
</ko-KR>
Android リソース XML

zipファイルで書き出し。中身はこんな感じ。

f:id:wannabe-jellyfish:20181123122648p:plain:w400

各strings.xmlの中身が、それぞれの翻訳結果になる感じ。

res/values-en
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="hello">Nice to meet you</string>
  <string name="morning">Good morning</string>
</resources>
res/values-ja
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="hello">こんにちは</string>
  <string name="morning">おはよう</string>
</resources>
res/values-ko
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="hello">안녕하세요</string>
  <string name="morning">안녕</string>
</resources>
zipを展開して、そのまま配置できる形。あぁ楽ちん!

正式リリースに向けて

まだ入れたい機能とか、あるけれど、一旦はリリースしてみました!
一定期間稼働させてみて、良さそうであれば、正式版にしようかなと。

フィードバックは、随時募集中です!!

ブログコメント・Twitter(@MemoryLoverz)・問い合わせフォームからぜひぜひ。
取り込めそうなものは、ガンガン取り込んで行く予定ですので、

どうぞよろしくおねがいします。

以上!!

trans-notes.net

CSSの国旗アイコンライブラリ(flag-icon-css)がよかった。

Webサイト内で、国旗を表示したいなと思ってたら、flag-icon-cssという、いい感じのCSSアイコンがあったので、その時の備忘録。

f:id:wannabe-jellyfish:20181122010506p:plain

NPMでインストール

$ npm install flag-icon-css

使い方。簡単。

<span class="flag-icon flag-icon-jp"></span>
<span class="flag-icon flag-icon-kr"></span>

ただ、国旗は標準サイズが決まってないらしく、アスペクト比が異なる。。

以上!!

【宣伝】複数言語へ一括翻訳できる文章・単語の管理アプリ『トランスノート』をリリースしました!

f:id:wannabe-jellyfish:20181123102921p:plain:w400

トランスノート|https://trans-notes.net/:plain

アプリやサービスの多言語対応をサポートしてくれるWebサービスです。

メッセージごとにIDをつけれるので、メッセージ一覧の作成・管理に利用できて、
AndoridのXML形式とか、ファイルをそのまま配置できるとこまでやってくれます。

詳しい内容はこちらの記事で。 wannabe-jellyfish.hatenablog.com

参考にしたサイト様

SSRなNuxt.jsで、DOM要素を参照するライブラリをインポートする

Nuxt.jsでSPAからSSRに変更しようとしたら、そのままでうまくいかず。。 import時にエラーが出てしまうのに対処したときの備忘録。

状況

使っていたのは、ScrollRevealというアニメーションライブラリ。 その中で、document.documentElementを参照しているので、サーバサイドレンダリングでエラーになる。。

変更前はこんな感じ。

import ScrollReveal from "scrollreveal";

export default {
  mounted() {
    ScrollReveal().reveal(".animate");
  }
}

変更後

export default {
  mounted() {
    this.$nextTick(() => {   // DOMが更新されるのを待って
      if (process.client) {  // クライアント側の場合
        const sr = require("scrollreveal"); // requireで読み込んで使う
        sr.default().reveal(".animate");
      }
    }
  }
}

$nextTickがないと、DOMが更新されてないときにアニメーションを設定してしまうので、無効化されてしまう。。

プラグインを使う場合

他にもプラグインを使うやり方も。

こんな感じで、nuxt.config.jspluginsssr: falseを設定しておく。

plugins: [
  {src: "~/plugins/scrollreveal.js", ssr: false }
],

~/plugins/scrollreveal.jsは、こんな感じ。コンテキストにScrollRevealを注入しておく。

import Vue from  'vue'
import ScrollReveal from "scrollreveal";

Vue.prototype.$sr = ScrollReveal

pageコンポーネントの中では、同じような感じ。process.clientのときに、this.$srを使う。

export default {
  mounted() {
    this.$nextTick(() => {   // DOMが更新されるのを待って
      if (process.client) {  // クライアント側の場合
        this.$sr().reveal(".animate");
      }
    }
  }
}

以上!!

【宣伝】複数言語へ一括翻訳できる文章・単語の管理アプリ『トランスノート』をリリースしました!

f:id:wannabe-jellyfish:20181123102921p:plain:w400

トランスノート|https://trans-notes.net/:plain

アプリやサービスの多言語対応をサポートしてくれるWebサービスです。

メッセージごとにIDをつけれるので、メッセージ一覧の作成・管理に利用できて、
AndoridのXML形式とか、ファイルをそのまま配置できるとこまでやってくれます。

詳しい内容はこちらの記事で。 wannabe-jellyfish.hatenablog.com

参考にしたサイト様