月別アーカイブ 1月 2019

asaba 著者:asaba

【html-css-javascript】PureCSSで無骨なページをそれっぽくする

前回は、PureCSSで色々いじくり倒していましたが、今回はちゃんとしたアプリっぽい見た目で作ってみました。

今回は、imgタグとinput fileを使った画像を表示するページを作りました。備忘録ぽいですがご容赦ください。

input fileといえばボタンを押すと画像ギャラリーに飛ぶあのコンテンツです。

メジャーなので知らない人はいないと思いますが、そのままこいつを使うとどうも雰囲気が堅いというかなにも

手を付けていないようで野暮ったいです。

せっかくなので前回でも使ったこのPureCSSで今風のボタンにかえてあげましょう。

html↓

    <div class="thumb-wrapper">
      <img id='myImage'>
    </div>
    <div class="button-wrapper">
      <span class="label">
        画像アップロード
      </span>
        <input type="file" name="upload" id='upload' class="upload-box" placeholder="Upload File">
    </div>

CSS↓


/*画像が表示されるコンテンツの位置調整*/
    .thumb-wrapper {
      position: relative;
      height: 50px;
      text-align: center;
      margin: 20% auto;
    }
/*ボタンの幅と位置の調整*/
    .button-wrapper {
      position: relative;
      width: 150px;
      text-align: center;
      margin: 20% auto;
    }
/*ラベルの設定*/
    .button-wrapper span.label {
      position: relative;
      z-index: 0;
      display: inline-block;
      width: 100%;
      background: #00bfff;
      cursor: pointer;
      color: #fff;
      padding: 10px 0;
      text-transform:uppercase;
      font-size:12px;
    }
/*実際に働くボタン*/
    #upload {
        display: inline-block;
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 50px;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
    }

JavaScript。↓

    <script>
      const target = document.getElementById('upload');
      const img = document.getElementById('myImage');
      target.addEventListener('change', function (e) {
        const file = e.target.files[0]
        const reader = new FileReader();
        reader.onload = function (e) {
          img.height = 200;
          img.src = e.target.result;
          console.log(img);
        }
        reader.readAsDataURL(file);
      }, false);
    </script>

script側は従来の画像を表示させる機能だけなので割愛させていただきます。

今回使うオブジェクトは4つ。一つ目は画像が表示された時の場所を調整するCSSです。画面中央にくるように

してありますが、このコンテンツは特にPureCSSの恩恵を受けていないのでそこまで語るまでもないです。

二つ目のCSSははボタンの幅を調整しています。これもアップロードするボタンの位置を決めているだけで

こちらも特にPureCSSの影響は受けません。

三つ目のCSSですが、ここでボタンの基本的な部分を生成しています。

button-wrapper span.labelを指していますが、これはbutton-wrapperタグの中のspan.labelを操作しますよという意味合いに

なります。divの中にspanで定義されているので、それが操作の対象になります。

ここでbackgroundやwidthで調整するとこんな感じに仕上がります。

角があった従来のフォームよりクリーンな出来になりました。

 

最後の#uploadオブジェクトですが、こちらは本来あったあのフォームをposition: absoluteを使い

上のボタンで被せるような役割をもっています。

htmlのinput fileのIDにも書いてあるとおりこちらが本体となっており、前のフォームがラベルに隠れて作業をしていたと考えると

分かりやすいです。

最後にここで実装したフォームの全体画像を載せて終了になります。

 

今回も公式を参考にしたコードです。PureCSSに慣れるまでまだかかりそうなのでご容赦くださいまし。

 

 

  • この記事いいね! (0)
著者:杉浦

ソースコード間の関わりをシンプルにするFacadeパターン

Facade パターン – Wikipedia
 Facadeパターンはプログラミングのデザインパターンの一つです。Facadeは建物の正面を意味する語で、Facadeパターンは建物全体でなく正面だけを見ればよいようにコーディングを行う方法です。もし多数のクラス、関数、データが協調するプログラムを記述する際、すべてを同等に扱ったり散らかったままにすると、どこから何をどの手順で取ってくるのが良い方法か分かりにくくなります。ひどいことに、このクラスを呼ぶ前にはこの関数とあの関数をあらかじめ使っておき、データをどうこう加工しておく必要がある、なんてことにもなります。そういった事態を避けるために、モジュール間のやり取りをシンプルにする窓口を作るというのがFacadeパターンです。次の図は増補改訂版Java言語で学ぶデザインパターン入門に載っているFacadeパターンのクラス図です。ClientがシンプルなFacadeクラスという窓口を介することでClassA~Dを楽に扱えます。
 
 Laravelにはファサードという仕組みがあります。
ファサード 5.7 Laravel
 このファサードの中身を見ていくとFacadeパターンを体現しています。例えばAuthファサードは次です。雑多なAuth関連クラスである@see以下の4つをまとめ上げて、21の関数のアクセス方法を見せています。これを使うことが出来ると大変わかりやすく、便利です。これを使わず雑に、@see以下を読んでは継承で上書きしてテスト、読んでは上書きしてテスト、を繰り返すコーディングをするとあっという間に難解なコードになり後の修正やリファクタリングがとても面倒になります。

/**
 * @method static mixed guard(string|null $name = null)
 * @method static void shouldUse(string $name);
 * @method static bool check()
 * @method static bool guest()
 * @method static \Illuminate\Contracts\Auth\Authenticatable|null user()
 * @method static int|null id()
 * @method static bool validate(array $credentials = [])
 * @method static void setUser(\Illuminate\Contracts\Auth\Authenticatable $user)
 * @method static bool attempt(array $credentials = [], bool $remember = false)
 * @method static bool once(array $credentials = [])
 * @method static void login(\Illuminate\Contracts\Auth\Authenticatable $user, bool $remember = false)
 * @method static \Illuminate\Contracts\Auth\Authenticatable loginUsingId(mixed $id, bool $remember = false)
 * @method static bool onceUsingId(mixed $id)
 * @method static bool viaRemember()
 * @method static void logout()
 * @method static \Symfony\Component\HttpFoundation\Response|null onceBasic(string $field = 'email',array $extraConditions = [])
 * @method static null|bool logoutOtherDevices(string $password, string $attribute = 'password')
 * @method static \Illuminate\Contracts\Auth\UserProvider|null createUserProvider(string $provider = null)
 * @method static \Illuminate\Auth\AuthManager extend(string $driver, \Closure $callback)
 * @method static \Illuminate\Auth\AuthManager provider(string $name, \Closure $callback)
 *
 * @see \Illuminate\Auth\AuthManager
 * @see \Illuminate\Contracts\Auth\Factory
 * @see \Illuminate\Contracts\Auth\Guard
 * @see \Illuminate\Contracts\Auth\StatefulGuard
 */
class Auth extends Facade
  • この記事いいね! (0)
takahashi 著者:takahashi

セレクトボックスを少しリッチにするselect2jsでプルダウンにない値を入力可能にする方法

HTMLのセレクトボックスに機能を追加してリッチにしてくれる”select2“というライブラリがあります。

使い勝手がそこそこいいので、自分も一部のWebアプリで使っていたりします。

具体的にselect2を使うとどうなるかというと

こんな風に、セレクトボックスの選択肢に書式を適用したりできます。

さらに上に見ているテキストボックスですが、

文字を入力するとリアルタイムに選択肢をフィルタしてくれます!

勿論、multipleなセレクトボックスにも対応しています。


これだけでも素晴らしいのですが、折角入力欄があるのでセレクトボックスにない新しい項目も追加できたらいいなぁとふと思ってしまったのですが、調べたところ…

Dynamic option creation – SELECT2

その機能もSelect2に入ってました\(^q^)/

どうやるかというと、
Select2は

$("セレクトボックスのセレクタ").select2();

のように指定することで有効化するのですが、

$("セレクトボックスのセレクタ").select2({
    tags: true
});

という風に引数にオプションを追加すると

入力欄に入力した項目が一覧になかった場合でも、検索ボックスに追加することができます!

この場合、どうなるかというと、select2()をかけた要素のセレクトボックスのvalueの値に、入力した文字がそのまま反映されるので、通常の値の処理と同様に扱うことができます。

ただし、表示上の値とvalueの値を別のものにしているプログラムの場合は、新しく追加された値だけ表示上もvalueの値も入力されたものになりますので注意が必要です。

多機能なセレクトボックスを実装したい方は是非参考にしてみてください。

  • この記事いいね! (0)
村上 著者:村上

【PHP】Slim3初心者に!プロジェクトのひな型を作成できるパッケージ「slim/slim-skeleton」

昨日の記事で、Slim3の導入方法について紹介しましたが、「slim/slim-skeleton」パッケージを使った方が、特に初心者にはわかりやすいと思ったので、そのご紹介です。
私はテンプレートの導入方法で若干詰みかけていたのですが、このパッケージで作成したプロジェクトには既にテンプレートファイルが導入済みだったので、とてもありがたかったです。

参考にさせていただいた記事はこちらから。

Slim3のスケルトンプロジェクト、slim/slim-skeletonの解説 – akamist blog
https://akamist.com/blog/archives/815

主要なファイルを全て解説してあって、大変分かりやすかったです。
初心者にはおすすめの記事ですね。

GitHub のページはこちらから。

GitHub – slimphp/Slim-Skeleton: Slim Framework 3 skeleton application
https://github.com/slimphp/Slim-Skeleton

 

プロジェクトの新規作成には、下記のコマンドを実行します。

composer create-project slim/slim-skeleton [プロジェクト名]

あとは放っておけば、プロジェクトが作成されるので、コマンドが終了したら下記を実行。
なお、cd コマンドで、作成したプロジェクトのルートディレクトリに移動しておくのをお忘れなく。

php -S localhost:8080 -t public public/index.php
// または
composer start

必要なファイルは自動的に生成されるので、詳細についてはコードを参照ください。
なお、ルーティングファイルとして src/routes.php はありますが、コントローラーファイル等はなく、パスごとの処理は src/routes.php ファイルに直書きされているので、状況に応じてコントローラーファイルを作成し、処理を分けてください。

また、機能の記事にも書きましたが、Slim3 は必要最低限の機能しかないため、CSRF 対策を行いたい場合は、別途「slimphp/Slim-Csrf」を導入してください。
なお、ミドルウェアの導入は、src/middleware.php に記述します。
コメントにサンプルコードが書かれているので、参考にしてください。

 

以上、プロジェクトのひな型を作成してくれる「slim/slim-skeleton」パッケージのご紹介でした。
近いうちに「slimphp/Slim-Csrf」の紹介もしたいと思います。

なお、あまり参考になるかは分かりませんが、昨日の記事はこちらから。

【PHP】軽量フレームワーク「Slim3」の導入方法
https://cpoint-lab.co.jp/article/201901/【php】軽量フレームワーク「slim3」の導入方法/

紹介しているリンク先の記事はとても参考になりますので、ご活用ください。

  • この記事いいね! (0)
村上 著者:村上

【PHP】軽量フレームワーク「Slim3」の導入方法

現在、PHPの軽量フレームワークで「Slim3」というものを試してみています。
こちらのフレームワークは必要最低限の機能しかないため軽量で、学習コストも低くて済みます。
当然、基本機能以外は開発者が実装しなければいけませんが、その分カスタマイズ性が高いという利点もあります。

ちなみに、この「Slim3」を選んだ理由は、「PHP フレームワーク 軽量」と調べたときに、候補の一番最初に表示されたからという理由です。
でも、触ってみた感じは、(今のところ)なかなか分かりやすくておすすめですね。

今回参考にさせていただいた記事はこちら。

PHP軽量FrameworkのSlim3 – Qiita
https://qiita.com/Syo_pr/items/b55e18a8361b3ff882b5

こちらの内容に沿って、実装を行いました。

 

まず、ディレクトリを作成します。
名前は任意でOKですが、私はミス防止に、サンプルの名前をそのまま使っています。

mkdir testSlim
cd testSlim/
mkdir public
cd public/

ディレクトリをつくったら、次に index.php を用意します。

vim index.php

index.php の内容はこちら。

<?php
use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;

require __DIR__ . '/../vendor/autoload.php';

$app = new \Slim\App;
$app->get('/hello/{name}', function (Request $request, Response $response) {
    $name = $request->getAttribute('name');
    $response->getBody()->write("Hello, $name");

    return $response;
});
$app->run();

最後に、一つ上のルートディレクトリに戻り、下記を実行します。

composer require slim/slim "^3.0"

なお、環境によっては Composer コマンドが使えないこともあるので、その場合は Composer をインストールします。
案の定、私の環境では使えなかったため、下記のサイトを参考にしてインストールを行いました。

Composer を Windows にインストールする手順|WEB ARCH LABO
https://weblabo.oscasierra.net/php-composer-windows-install/

インストール後、composer -V を実行して、バージョンが表示されれば成功です。

そして、下記のコマンドを実行し、ビルトインウェブサーバーを起動します。

php -S localhost:8080 -t public public/index.php

サンプル通りに作成した場合は、http://localhost:8080/hello/test にアクセスし、Hello, test と表示されれば成功です。

上で紹介した参考サイトでは、Routes.php とコントローラーファイルを作成し、Laravel 風のルーティングテーブルを作成する方法についても記述されていました。
こちらを導入すると、index.php や Routes.php がすっきりするため、おすすめです。

 

なお、Slim3 は最低限の機能しかないため、CSRF 対策を行う場合は、別途 slimphp/Slim-Csrf を導入する必要があります。
GitHub のページはこちらから。

GitHub – slimphp/Slim-Csrf: Slim Framework CSRF protection middleware
https://github.com/slimphp/Slim-Csrf

インストール方法から導入の手順まで載っているので、是非参考にしてください。
slimphp/Slim-Csrf の導入については、後日記事にまとめたいと思っています。

 

以上、軽量フレームワーク「Slim3」の紹介と導入方法でした。
現在は、slimphp/Slim-Csrf の導入の途中まではできたので、引き続き開発を行っていきたいです。
テンプレートを用意して、それを読み込んだりもしたいですね。
公式のドキュメントでは、slim/twig-view が紹介されていたので、こちらを導入してみたいと思います。

  • この記事いいね! (0)
takahashi 著者:takahashi

ポッキーでプログラミング!?グリコが開発したプログラミングの考え方が学習ができるアプリ”GLICODE”

ふと買ってきたポッキーのパッケージを開けようとしたところ、パッケージの側面に名に書かれているのを見つけました。

ポッキーで…プログラミング…???

どういうこっちゃと思いつつ調べたところ、公式のティザーサイトを発見。

GLICODE – グリコ

このサイトにあった動画を見たことで、”ポッキーでプログラミング”の意味が分かりました。

ポッキーを並べることでキャラクターの動きを”制御”してみよう!
ということのようです。なるほどなるほど…

どんなアプリなのか実際に確かめてみたくなったので、実際にインストールしてみました。

GLICODE®(グリコード)
GLICODE®(グリコード)
開発元:EZAKI GLICO CO.,LTD.
無料
posted withアプリーチ

ちなみに、”GLICODE”と検索してしまうと英語版がヒットしてしまうので、日本語で”グリコード”と検索するのがおすすめです。

タイトル画面。

Level 1

このアプリではプログラム言語を覚えておく必要は一切ありません。

すべてポッキーの並びだけでコーディング(?)します。

このキャラクターの名前は”ハグハグ”というのか…

ポッキーの向きで、”ハグハグ”に動きを指示するようです。

左下のカメラアイコンをタップするとアプリ内でカメラが起動。

おてほんどおりにポッキーを並べてみます。

なんとポッキーが画像認識されているではありませんかwww

ポッキーの向きを元に”右にうごく”という命令が入力されました。

この命令でOKな場合は右下の”めいれいをけっていしよう”と出ているボタンをタップすることで、入力した命令が確定される、という流れのようです。

確定したらステージに戻ります。

再生ボタン(?)をタップすると、確定した命令が実際に実行されます。

動き出すハグハグ…

女の子のもとへ到着。

ギュッ…

それとなくホラー感を感じる流れな気がしなくもないですが、なるほど確かにポッキーでキャラクターを制御できました。

Level 2

今度は横移動に加えて縦移動が必要になるようです。

Level 1ではポッキーを使ってハグハグを横に動かすことができました。

では縦に動かすにはどうすればいいのでしょう…?

そうです。ポッキーを使います…!

グリコードでは、おなじ平面上に複数本のポッキーを並べることで、ハグハグに続けて複数の動作をさせることができます。

今度は右に1マス動かした後、下に2マス動かす必要があるので、ポッキーを3本用意して

→ ↓ ↓

とすると目的の動作になるはずです。

早速入力して…

実行!

ハグハグが指示された通りに動き…

ギュッ…

ステージクリアです。

ポッキーで与えた命令は、必ず順番通りに実行されます。

これは与えた命令は必ず順番に実行されるというシーケンス(=じゅんばんにじっこう)というものですと説明。

そう、ポッキーでプログラムの基本的な要素の一つである”逐次(順次)実行”をわかりやすく説明してしまいました。

グリコード…恐るべし…

とまぁこんな感じで、プログラミングをする前に学んでおくべき考え方を、ポッキーを使って学習することができるという、かなり画期的な内容になっています。

このアプリでは、プログラムの

・処理の逐次実行

・処理の繰り返し

・処理の場合分け

の三つの考え方をポッキーを使って学習することができるようです。

子供向けの教材といえば、LEGO社が出しているMindStormという製品があります。

こちらも(普通のものと形状が違うが)おもちゃのブロックという子供が親しみやすいものと、プログラムの要素をブロックパーツにしたものをくっつけていく、という視覚的にコーディングができる開発環境になっているので、初めてプログラムを触る子供にとっても入門しやすい内容になっています。

しかしながら、ロボットを扱うという部分がある以上、ちょっと難易度は高め(ある程度の難易度があるので、MindStormを使ったロボットコンテストが開催されています)で、思い通りに触れるようになるまでに少し時間がかかるかもしれません。

一方、今回のグリコードは内容としてもMindStormよりもシンプルかつ基本的な部分ですが、ブロックよりもより慣れ親しみやすい”お菓子”を使ってプログラムの基礎を学ぶことができる、というのはとても画期的なアイデアではないかな、と思いました。

…ちなみに、今回の記事を書くにあたって、実際に会社のオフィスで
一人ポッキーを並べてスマホをかざす…ということをしていたのですが…

周りの人の目にはどのように映っていたのか。
考えかけてやめました。ええ。

  • この記事いいね! (0)
著者:杉浦

Date.prototype.getDate()と動的な日付候補を持つプルダウン

Date.prototype.getDate() | MDN
 Date.prototype.getDate()はDateオブジェクトの日を返します。これだけならば便利な関数で終わるのですがJavaScriptのDateオブジェクトの持つ月日の形式の特徴によりもっと便利な使い方が出来ます。
 JavaScriptのDateオブジェクトは月日を循環する形で持ちます。これは下の画像の様に最終日、最終月をまたぐとまた1から始まるというものです。

 この循環を用いると次の様に1の一つ前である0を指定することで月ごとの最終日を取得できます。

 この最終日を取得する方法によって次の様に任意の日付のリストを取得できます。

    /**
     * 現状態の年月のselect用日付リストをゲット
     * @return {{day: *, selected: boolean}[]}
     */
    getDays: function() {
      const days = [null]; // 未選択状態を定義
      // 最終日、転じてその月の日数
      const daysNumberOfMonth = new Date(this.selectedYear, this.selectedMonth, 0).getDate();
      // 選択候補の配列を作成
      for (let i = 1; i < daysNumberOfMonth + 1; i++) {
        days.push(i);
      }

      // select用に{day: *, selected: boolean}の形に加工
      // 現状態で選択されている日が新たな年月でも選べるならば選択状態を維持
      return days.map((day) => {
        return {day, selected: days === this.selectedDay};
      });
    },

 このコードと現状態に合わせて描画を変更するイベントを用いることで次のプログラムの様に選択された年月によって日の選択範囲を動的に変更するプルダウンが作れます。

  • この記事いいね! (0)
asaba 著者:asaba

【html5,CSS】Pure.CSSを少しかじる

開発においてhtml5とCSSを使う機会が増えてきたので、この際その周辺の

フレームワークの使い方でも覚えておこうかなと考えております。

今回使うフレームワークはPure.CSSです。

だけどフレームワークと言ってもまず数が多くどれを使ったらいいか迷いがちです。

一般的(html5やJavaScriptを触ったことがある人)にはCSSのフレームワーク

といえばbootStrapが浮かびますが

このpureCSSというフレームワークは、それよりも軽量で機能もごちゃごちゃしていないので

webでのwebでの開発の幅を広げたいというかたやbootStrapを始めたけど使いにくいというかたにはおすすめだなと感じました。

筆者もCSSのフレームワークに触れることはほぼなかったので学習もかねてブログに跡を残していきたいと思います。

 

例えば、なにも手を付けていない状態だと、大きな画像はブラウザを狭めたときに横にスクロールされてしまいページ枠から飛び出してしまいます。

 

 

このままでは一定の大きさで表示することができないので、さっそくPure.CSSで修正してみました。

<head>の中に<link rel=”stylesheet” href=”https://unpkg.com/purecss@1.0.0/build/pure-min.css”>を入れて

<body>に<img src=“apple.jpg” class=“pure-img”>と記述してみましょう。

すると、見事にブラウザの大きさに合わせてリサイズするようになりました!androidやreactで悩んでいたことがこんな簡単に

できるとは正直考えもしなかったです。classにpure-imgを設定するだけで柔軟に対応できるのですごく使い勝手がいいなと

感じました。

 

これで満足してしまいそうでしたが、まだhtmlの基本でもあるフォームを作っていないことを思い出したので

とりあえず公式のサンプルを見ながら書いてみました。

※コードは、公式に似たようなものがあるのでそちらをご覧ください。

各フォームとセレクトボタンを作ってみました。従来のhtmlで作るボタンと比べると角がないというか今どきの

フォームっぽくて安心感がありますね。(某就活サイトとかブログの新規登録ページとかがこんな感じでした。)

これだけでも達成感がでてしまいましたが、更に掘り進んでテキストとかボタンの色を変えてみたいなとか思いついたので

送信ボタンの色を変えてみました。

ほんとにサンプルで書かれたものに数行スパイスを加えた程度のコーディングでしたが、特にこれといって難しい問題は

見つからずにいい意味でさっぱりとしたフォームだと思いました。

この次はinput type = “file”やimgタグをいじってみようかと思います。もしこっちでも使用感がよければ

主要フレームワークとして使っていきたいなと思います。

  • この記事いいね! (0)
著者:ym

DNS flag day

JPRS から案内がありましたが、2月1日からイベントが始まる様です。

DNS flag dayに関する文書の公開と対応状況の確認について

2019 年 2 月 1 日は主要な DNS ソフトウェアベンダーとパブリック DNS サービス事業者が参加する 「DNS flag day」の開始日です。DNS flag day は、その日(2019 年 2 月 1 日)以降にリリースする DNS ソフトウェア・サービスから EDNS0 に関するワークアラウンド処理を削除することで、DNS の品質・パフォーマンスの向上と、新機能の導入・拡張機能の推進を図るためのイベントです。
DNS flag day の対象は、2019 年 2 月 1 日以降に参加組織からリリースされる DNS ソフトウェアとパブリック DNS サービスです。運用中の DNS ソフトウェアの動作は、2019 年 2 月 1 日以降も変わりません。

https://jprs.jp/tech/notice/2019-01-21-dns-flag-day.html

2月1日以降にリリースされるDNSソフトウェアを使ってということですが、古いバージョンを使っているので変わり無いですね。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】テキストの音声読み上げ機能を実装できるプラグイン「cordova-plugin-tts」

言わずもがな、ほぼ私のための備忘録ですが…今回はテキストの音声読み上げ機能を実装するためのプラグイン「cordova-plugin-tts」のご紹介です。
読み上げの言語や、読み上げのスピードなんかも細かく設定できます。

GitHub のページはこちらから。

GitHub – vilic/cordova-plugin-tts: Cordova Text-to-Speech Plugin (Maintainer WANTED!)
https://github.com/vilic/cordova-plugin-tts

 

さて、実装方法ですが、まずインストールには下記のコマンドを実行します。

cordova plugin add cordova-plugin-tts

で、サンプルコードは下記のとおり。

TTS
    .speak({
        text: '[読み上げたいテキスト]',
        locale: 'ja-JP',  // 言語
        rate: 1  // 読み上げスピード
    }).then(function () {
        // 読み上げ成功時の処理
    }, function (reason) {
        // 読み上げ失敗時の処理
    });

なお、言語や読み上げスピードを指定しない場合は、下記のようにシンプルな書き方もできます。

TTS
    .speak('[読み上げたいテキスト]').then(function () {
        // 読み上げ成功時の処理
    }, function (reason) {
        // 読み上げ失敗時の処理
    });

音声再生を停止する場合は、.stop() を使います。
具体的には下記のとおりです。

TTS.stop();

が、調べてみると、この .stop() が正常に働かないという投稿もちらほら…。
私の環境では動いたのですが、何が原因なのでしょうか。

 

以上、テキストの音声読み上げ機能を実装するためのプラグイン「cordova-plugin-tts」のご紹介でした。
なお、こちらのプラグイン、端末によっては、漢字の読み間違えをすることもあるので、読み上げたいテキストには、All ひらがなのテキストを指定したほうが良さそうです。
とにかく、どのように再生されるかは一度チェックすることをおすすめします。

  • この記事いいね! (0)