カテゴリーアーカイブ OS

takahashi 著者:takahashi

GoogleがPixel3aをついに発表!無印の半額で入手できる端末の性能が気になる。

先日開かれたGoogleのイベントで、以前から”Pixel3 Lite”として噂されていたPixel3シリーズの廉価版スマートフォン、Pixel 3a/3aXLが発表されました!!!

Google Pixel 3a – Google Store

無印のPixel 3/3XL は高精細かつ夜にも強いカメラ搭載、SoCもハイエンドのSnapdragon 845が搭載され、さらにOSには改造なしの純正のAndroid 9 pie が利用できるというものでした。

一方今回発表されたPixel 3a/3aXLは、カメラの性能はほぼそのままで、廉価版のSoC(Snapdragon 670)への変更や耐水性を落とす(その代わりにイヤホンジャックが追加)などの変更をする代わりに無印の約半額という価格で販売されるようです。

ただし、Pixel Visual Core™は非搭載になっているようなので、この差がどのように響いてくるのかがちょっと気になるポイントです。

Pixelシリーズのスペック比較ページ – Google Store

僕は前回発表された無印のPixel3が出たら必ず買おうと思っていたのですが、想像以上に高額で手が出ませんでした。
今回の3aシリーズの方は元値が5万円を切っているので、予算的にも十分購入可能な、現実的なお値段です。

そんなこともあり、今回はかなり購入を悩んでいます。

とりあえず、実機が出てきてから、触って動作をチェックしてから決めたいと思います。

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

【React】テキスト読み上げ機能を実装するためのパッケージ「speak-tts」

昨日の記事、【React】テキストを読み上げるためのコンポーネント「react-speech」 でも書いていた通り、react-speech というコンポーネントを触っていましたが、どうにも無理そうだと悟り、違うパッケージにも手を出してみました。
それが、「speak-tts」というパッケージです。

インストール手順及び実装方法については、こちらのページをご確認ください。

speak-tts – npm
https://www.npmjs.com/package/speak-tts

 

インストールは下記のコマンドを実行します。

npm install speak-tts

実行後は、下記でプロジェクトにインポートします。

import SpeechTts from 'speak-tts'

まずは、使用している環境が、音声合成をサポートしているかをチェックします。
チェック方法は下記を実行。

const speech = new SpeechTts();
if (speech.hasBrowserSupport()) {
    // サポートされている
}

で、サポートされていたら、下記で初期化を行います。

const speech = new Speech();
speech.init(
    'voice':'Google UK English Male',
    'lang': 'en-GB'
).then((data) => {
    // 初期化成功
}).catch(e => {
    // 初期化失敗
});

なお、init() 内で、上記のようにオプションを設定することも可能です。

あとは、任意のタイミングで下記コードを実行し、テキストを読み上げます。

speech.speak({
    text: '[読み上げさせたいテキスト]',
}).then(() => {
    // テキスト読み上げ成功
}).catch(e => {
    // テキスト読み上げ失敗
})

なお、上で紹介した初期化を実行しないで speak() メソッドを実行すると、警告が出るので注意してください。

 

こちらも簡単で使いやすいと思ったのですが…Cordova アプリには実装できませんでした…。
Android で実行したところ、サポートされていないとのこと。
PC の Google Chrome で動作したので、Android でも使えるかも!と期待したのですが、残念でした。

なお、昨日の react-speech コンポーネントもPC のブラウザで実行したところ、正常に動作しました…。
うーん、そういう落ちか…。

 

以上、テキスト読み上げを実装するためのパッケージ「speak-tts」のご紹介でした。
触った感じとしては、react-speech よりも speak-tts の方が使いやすそうな印象を受けましたね。
オプションや機能はほぼ同一なので、お好きな方を導入ください。

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

【Android】WebViewでフォントアイコンが表示されない【未解決】

以前投稿した、【Android】WebViewでLeafletのアイコンが表示されない【未解決】 について、若干の進捗があったのでご報告。
しかし、まだ解決までには至っておりません…。

 

Google Chrome の機能で WebView の詳細なデバッグができるようになったので、発生していた jQuery のエラーは解決できました。
なお、デバッグ方法については、【Android】Google Chromeを使ってWebViewページのデバックを行う方法 を参考にしていただければと思います。

また、上司のアドバイスにより、バグが発生しているのが Leaflet ではなく、フォントアイコンであるらしいことも分かりました。
が、ここで行き詰まる…。
エラーメッセージが発生しないエラーなので、解決方法を調べにくく、まだこれだ!という方法を見つけられていません。

なお、使用しているフォントアイコンはこちらの「WebHostingHub Glyphs」です。

WebHostingHub Glyphs
https://www.webhostinghub.com/glyphs/

 

とりあえず、ブラウザではフォントアイコンが表示されるのに、WebView になった途端、アイコンが四角形になってしまい、正しく表示されないことは分かりました。
エラーは発生してはいないので、フォントアイコンの指定の仕方などが原因かなとは思います。
だんだんと絞り込めてきたので、もうひと頑張りしたいと思います。

以上、Android の WebView でフォントアイコンが表示されない不具合についてでした。

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

Windowsのbashコマンドで起動するWSLのディストリビューションを切り替える方法

Windows Subsystem on Linux(WSL)では、複数のディストリビューションをインストールすることが可能になっていますが、cmdのbashコマンドから直接起動できるディストリビュージョンは1つのため、自分が使いたいディストリビュージョンがbashコマンドに紐づけされていない場合はちょっと不便です。

通常は一番最初に導入したディストリビュージョンがbashコマンドに 紐づけされますが、wslconfig コマンドを使うことで
紐づけるディストリビューションを切り替えることができます。

まず、現在の設定を確認してみます。

wslconfig /l
Windows Subsystem for Linux ディストリビューション:
kali-rolling (既定)
Ubuntu-16.04

このように、インストール済みのディストリビューションの一覧が表示されます。
このうち、(既定)と書かれているものがbashコマンドで起動するディストリビューションです。

これを切り替えるには、次のように入力します。

wslconfig /s ディストリビューション名

今回の場合は、例えば次のように指定してみます。

wslconfig /s Ubuntu-16.04

もう一度確認します。

> wslconfig /l

Windows Subsystem for Linux ディストリビューション:
Ubuntu-16.04 (既定)
kali-rolling

> bash -c "cat /etc/os-release"

NAME="Ubuntu"
VERSION="16.04.6 LTS (Xenial Xerus)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 16.04.6 LTS"
VERSION_ID="16.04"
HOME_URL="http://www.ubuntu.com/"
SUPPORT_URL="http://help.ubuntu.com/"
BUG_REPORT_URL="http://bugs.launchpad.net/ubuntu/"
VERSION_CODENAME=xenial
UBUNTU_CODENAME=xenial

無事切り替わりました。

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

[備忘録]dockerインストール手順(CentOS7)

参考:CentOS7にDockerをインストールする – Qiita
Docker Composeのインストール方法(CentOS7.3) – Qiita
CentOS7 に pip と awscli をインストール -set setting reset

#docker-ce
sudo yum remove docker docker-common docker-selinux docker-engine
sudo yum install -y yum-utils device-mapper-persistent-data lvm2
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
sudo yum makecache fast
yum list docker-ce.x86_64 --showduplicates | sort -r
sudo yum install docker-ce-17.06.0.ce-1.el7.centos
sudo yum install docker-ce
sudo systemctl start docker
sudo systemctl enable docker
sudo docker run hello-world #動作テスト

#docker-compose
sudo yum install epel-release
sudo yum install python-pip
pip install docker-compose

殆ど上記のコマンドをそのまま実行するだけで最低限のセットアップはできました。

すんなり入ってくれたのでうれしいですね。

#Core OSも試してみたのですが仮想マシン上でのブートでコてたので、こっちの方が簡単かもですね…

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

【Android】Google Chromeを使ってWebViewページのデバックを行う方法

今後も使えそうだと思ったので、備忘録としてまとめ。
Google Chrome ブラウザを使って Android の WebView ページをデバックする方法についてです。
ブラウザ 上で見ると正常に動いているのに、Android の WebView で開くとマップのアイコンが表示されない不具合に悩まされていたので、早速導入。

参考にさせていただいたサイトはこちら。

Chromeを使ったAndroid WebViewページのデバッグ|レコチョクのエンジニアブログ
https://techblog.recochoku.jp/2445

 

まず、Chrome でのデバックを行うために、Android の WebView ページに下記の設定を追加します。

WebView.setWebContentsDebuggingEnabled(true);

なお、WebView のページは、多少バグはあるにしろ、既に Web ページが表示できているものとして扱っています。

参考サイトでは、下記のように書かれていましたが、その通りに書いたところ、Android Studio から、その if 文で囲む必要はない!と怒られてしまったので削除しました。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

アプリへの設定は以上です。
あとは通常通りの手順で、ビルド → 実機で実行します。

アプリが実行出来たら、Google Chrome で chrome://inspect にアクセスします。
すると、下記のような画面が表示されると思うので、デバックしたい端末のモデル名に一致する項目の「inspect」を選択します。

そうすれば、見慣れたデバックツールのウィンドウが表示されるので、それを使ってデバッグを行います。

これで Web ページ部分のエラーのみを確認できるので、かなり便利です。
またこれにより、不具合があるページでどうやら jQuery が読み込めていないのではという疑惑が浮上。
…WebView で表示しているページをブラウザで見てもこんなエラーは発生していないのに!
ということで、引き続きデバック頑張ります。

 

以上、Google Chrome で Android の WebView ページのデバックを行う方法でした。
導入も Android アプリに一行追加するだけなので、とても簡単です。
WebView のデバックでお悩みの方がいましたら、参考にしていただければ幸いです。

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

【Android】WebViewでLeafletのアイコンが表示されない【未解決】

タイトルにもある通り、未解決です…。
Android の WebView で地図が含まれている Web ページを表示しているのですが、何故かアイコンが表示されません。
Web ページをブラウザで表示してみると、正しく表示されるので、恐らく Android の設定かな?と思い、調べています。

 

で、試してみたのが WebSettings での設定変更です。

WebSettings|Android Developers
https://developer.android.com/reference/android/webkit/WebSettings.html

JavaScript を有効にする setJavaScriptEnabled メソッドは指定されていたので、それ以外を調査。
で、他の記事を参考にしながら、下記の 3つを追加しました。

webSettings.setAllowFileAccessFromFileURLs(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);
webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

上記の設定では、file スキームによるアクセスを許可にし、https/http 混在コンテンツを表示できるようにしています。
…が、これでもダメでした…。

ブラウザ上では発生しない、「Uncaught ReferenceError: jQuery is not defined.」エラーがあったので、てっきり何かがブロックされているのが原因かと思ったのですが…。
次は jQuery のエラーから攻めてみたいと思います。

 

以上、Android の WebView で地図が含まれている Webページを表示できないエラーでした。
引き続き調査し、解決出来たら改めて紹介したいと思います。

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

Windows Subsystem on Linux(WSL)版Ubuntuを日本語化する方法

MicrosoftストアからインストールするだけでLinux環境(CUI)が使えてしまう画期的なWindows Subsystem on Linux(WSL)ですが、初期状態では

このようにすべて英語になっています。

もっとも、慣れている方であれば、英語表記であったとしても恐らくあまり問題はないかと思いますが、初心者の方や、何らかの理由で日本語で表示させたいこともあるかと思います。

ありがたいことに、Linux(特にUbuntu)はもともと日本語のサポートが結構手厚いことが多いので、簡単に日本語化できます。

まず、bashコマンドやWindows側のショートカットなどでWSL(Ubuntu)を起動します。

次のコマンドを入れます。

#日本語パッケージをインストール
sudo apt -y install language-pack-ja

システムのデフォルト言語を切り替え
sudo update-locale LANG=ja_JP.UTF8
sudo update-locale --reset
sudo update-locale LANG=ja_JP.UTF-8 LANGUAGE=ja_JP.UTF-8

ここまで完了したら、WSLのウインドウを開きなおします。
これでセットアップ完了です。

こんな風に、コマンドの表記が日本語に変わっていることがわかるかと思います。

今回はUbuntuで試してますが、Linuxであれば何かしらの日本語化方法は用意されているかと思いますので、”英語がネックで…”という方は調べてみると使いやすい環境が手に入るかもしれません。

こちらのブログでも、また他のディストリビューションの日本語化方法も紹介したいと思います。

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

【android】機内モードを使って消失した現在地アイコンを復活させた話

gpsを使って現在地を読み取るアプリを作っていたのですが、今まで普通に映っていた現在地アイコンが急に消えてしまう事案に

遭遇しました。プロジェクトクリーンやリビルドも何回かしたのですが依然アイコンは消えたまま・・・!

ここまでコードをロールバックしても動かなかったので、視野を広げて飛行機ちゃんこと機内モードに白羽の矢を立てました。

機内モードにするとbluetoothやwi-fiといった通信機能が一時的に使えなくなります。こいつをタップして一度全てリセットした状態でも

う一回起動してみようと思い試してみました。が変わらず・・・。さてどうしましょうと考えていたらなんといきなり現在地アイコンが復活しました!

読み込みに時間がかかっていただけのようで、その後何回か再起動したのですが問題なく現在地アイコンを出すことができました。

iphoneユーザーですからっていい訳は死んでも使いたくないのでここで解決できて本当に助かりました。

設定方法→①まずホーム画面に戻ります。②上から下にスワイプすると、下のような画面が出てきます。③左下にある機内モード(飛行機のマーク)を押します。すると、wi-fi、bluetooth、位置情報といった通信手段が一斉遮断され、アプリなどの連携を断ち切ります。

ここで、もう一回機内モードを押して停止させましょう。すると、今までオフだった通信手段が全部白色になりオンの状態に

なります。とりあえずこれで解決・・・・。

 

 

コードやライブラリ周りを見てもまだ現在地が出てこなかった場合は、こちらが怪しいと目をつけてみてください。

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

【Cordova】cordova-plugin-media使用時の音楽ファイルパスの指定について

dちょっとハマりかけたので、備忘録としてまとめ。
昨日ご紹介した、Cordova アプリで音楽ファイルを扱うためのプラグイン「cordova-plugin-media」の音楽ファイルのパスの指定方法についてです。

なお、昨日の記事はこちらから。

【Cordova】音声ファイルを扱うためのプラグイン「cordova-plugin-media」

 

で、ハマりかけたのは、Android での音楽ファイルのパスの指定方法についてです。
単純に、画像ファイルなんかと同じように、www ディレクトリ以下のパスを指定すればOKかと思ったら、それでは動かず、Code: 1 のエラーが発生しました。
なお、エラーコード 1 は、MediaError.MEDIA_ERR_ABORTED というエラーとのことです。
Aborted は「中止」という意味なので、エラーで途中で中断したという感じかな?

で、色々検索したところ、下記の記事がヒットしました。

【Monaca】Mediaプラグインを使う時に気をつけたいこと【Cordova】|webico
https://blog.webico.work/monaca-cordova02

その中で、下記のようにファイルパスを取得している関数があり、それを音楽ファイルの頭につけていたので、それを参考に修正しました。

// パス取得の関数
function getPath() {
    let str = location.href;
    let i = str.lastIndexOf('/');
    return str.substring(0, i+1);
}

私の場合、Android の時は音楽ファイルの頭に file:///android_asset/www/ を付けるようにしたら問題なく動作するようになりました!
なお、iOS の場合、単に www ディレクトリからのパスだけでOKだったので、cordova-plugin-device を利用して、プラットフォームごとに処理を切り替えるようにしましょう。

最終的なコードは下記のようになりました。

playMedia() {
  let src = '[www からの音楽ファイルのパス]';
  if (window.device.platform == 'Android') {
    src = 'file:///android_asset/www/' + src;
  }
  let media = new window.Media(src);
  media.play();
}

なお、前の記事でも書きましたが、Android の場合はリリースの処理をきちんと行いましょう。
私は…今から追加します。

 

以上、cordova-plugin-media の音楽ファイルのパスの指定方法でした。
お困りの方がいましたら、参考にしていただければと思います。

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