月別アーカイブ 10月 2018

村上 著者:村上

【Cordova】初回起動時にcordova-plugin-ibeaconが表示するAlertを非表示にする方法

タイトル通り、cordova-plugin-ibeacon プラグインが表示しているアラートを非表示にする方法です。
実際に表示されるアラートはこちら。

表示されているメッセージ自体は「このアプリケーションがビーコンを検出できるようにアクセスを許可してください」なので、これ自体に問題はないのですが、文章はプラグインの中で指定されているものですし、このアラートとは別に、位置情報の取得許可を求めるダイアログが表示されるので、表示させないほうが綺麗かなと思います。
表示/非表示はお好みかもしれませんが、私の場合、現在開発中のアプリは日本語表記のみなので、英語のアラートは非表示にしようと思います。

 

さて、このアラートを表示させないようにする方法ですが、このプラグインを追加した時に追加される LocationManager.java というファイルの中を修正します。

で、このLocationManeger.java の302行目辺りに、AlertDialog の設定をしている記述がありますので、そこを確認します。
AlertDialog もしくは、アラートメッセージの「Please grant location access so this app can detect beacons.」で調べれば、すぐに見つかると思います。
そして、その記述の下の方に、builder.show(); という記述があり、ここで Alert を表示しています。
なので、これをコメントアウトします。

作業としては以上です!
あとは、一旦アプリを削除して再インストールするか、Android の設定 > アプリ からこのアプリの設定を開き、データを削除してから再度起動すれば、アラートが表示されないことを確認できるかと思います。

 

以上、cordova-plugin-ibeacon が表示しているアラートを非表示にする方法でした。
良かったら参考にしてください。

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

フラットデザインのシンプルなボタンを作れるwebサービス2.5dBUTTONの紹介

2.5dBUTTON – NOHT CO.,LTD.

hoverででっぱり、on_clickでへっこむフラットなボタン。
ジェネレータで自由なデザインのボタン素材が作れる。

 引用元:NOHT
 2.5dBUTTONはwebページ上で簡単に調整しながら動作付きのフラットデザインなbutton elementを作ることのできるサービスです。フラットデザインは一見飾りの少ないシンプルな見た目を作ることによって、webページを見やすく使いやすくするを目的とするデザイン手法です。使い方は画像から連想できる通り、ボタンを見ながらレンジ等の入力欄をいじるだけです。出来上がったらにコードをコピペして完成です。


 なんとなくカチカチしたくなる様なデザインです。
 NOHTは他にもTURNBOX.js – NOHT CO.,LTD.といったアニメーション満載のデザインを公開しています。

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

Nexus7(2012)を充電時に自動でOSを起動するようにしてみた

最近、使ってなくてほこりをかぶっていたタブレット…Nexus7の2012年モデルを、車のナビ専用端末に仕立てようといろいろセットアップしていたのですが、車のナビにする以上、エンジンと連動して起動したり、停止したりしてほしいのですが、元々汎用用途であるAndroidタブレットだとなかなかその挙動が難しかったりします。

SmartConnectというアプリを使うと何かの”きっかけ”(例えばイヤホンケーブルにつないだ時、とか、充電機器に接続したとき、とか)をもとにして自動でアクションをさせられるので、OS起動後にBluetooth機器に接続されたときなどにナビアプリの自動起動と音楽の再生、接続が切れた時(=エンジンを切ったとき)にホームへの移行や、音楽の停止などを行わせる所まではできたのですが、唯一タブレットの電源onについてはOSが起動する前の挙動なので、アプリではなかなか変更が難しいところです。

ただ、出かける前にタブレットを台に乗せてケーブルをつないで、さらに電源もONにするとなると、埋め込み型のナビと比較してかなりめんどくさいので、何か一つだけでも自動化できないかといろいろ調べていたところ、こちらの記事を発見。

nexus7で充電開始時に自動で電源オンにする設定(root不要)- hycko.blog

root化不要でこんな設定ができただと…
なんでもブートローダーの設定をPC(ADB)経由で変更してやることで、充電専用ケーブル・通信用ケーブル関係なく充電器と接続した時点でAndroidが自動起動してくれるようになるとのこと。

…でも、ブートローダーなんてroot化やROM焼きなんかに出てくるあれだよね…そんな簡単に触れるもんなのか…と疑心暗鬼になりながらも、とりあえず試してみましたところ….

想像以上に簡単でした\(^q^)/

(※写真はNexus7 2013ですが、実際はNexus7 2012で検証しました。なお、Nexus7 2013もブートローダーの起動までは同じ手順でできました。)

簡単に手順をまとめると、下記のようになります。(※メーカーの修理を受けれなくなる可能性のある内容です。試される場合は自己責任の下行ってください。)

1.Androidの設定->開発者ツールから、USBデバッグを有効にします。
(※開発者ツールはデフォルトでは非表示になっています。こちらの方法で開発者ツールを表示させてください。)
2.PCにUSBで接続し、次のコマンドを実行します。(Android Studioをあらかじめインストールしている必要があります。)

adb reboot bootloader

Nexus7が再起動して、ドロイドくんのおなかの蓋があいている絵のある画面が出てきます。

これが”ブートローダー画面”のようです。
この画面が出てきたら、次のコマンドを入力します。

fastboot oem off-mode-charge 0

すると自動でNexus7が再起動され、いつも通りAndroidが立ち上がります。
Androidの起動が完了したら、一旦USBケーブルを抜いた状態で電源を切り、充電専用のUSBケーブルで充電器とNexus7をつないでみます。

すると、電源ボタンを押さなくても電源が自動で入るようになりました!
なお、再び充電専用ケーブルと充電器をつないでも起動しないようにするには

fastboot oem off-mode-charge 1

とすればよいようです。

自分はもう使わなくなったタブレットを再利用してるので設定変更を行いましたが、簡単にできるとはいえ通常はブートローダーの設定を変更すること自体かなりリスキーな作業になります。
お手元のNexus7(2012)で試される際は自己責任のもと、慎重に行っていただきますようお願いします。
(ブートローダーの起動自体は他のAndroid端末でも行えるかもしれませんが、設定の変更については正常にできる保証はない(機種によってはメーカーがブロックしている可能性がある)ので、確証がない限り試さないことをお勧めします。)

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

JavaScriptを試し、公開するwebサービスJSFiddleの紹介

 Create a new fiddle – JSFiddle
 JSFiddleはオンラインのJavaScriptテスト環境です。JSFiddleにはコードを簡単に書き、共有できるような環境が整っています。JSFiddleを開いた画面が下です。
 
 赤で囲ったチェックボックスだけでjQuery、Vue、React等のモダンなjs,cssにコンパイルされる言語、フレームワークの環境を整えてくれます。右下のresultとある部分に実行結果が出力され、リアルタイムに更新をかけるようにも設定できます。このおかげで規模によってはローカルよりも楽にコーディングができます。
 コードを保存し、リンクに貼ること、webページに埋め込むことも簡単です。Embedを開くだけで、リンク、簡潔な完成した状態のiframeタグが出力されます。
 
 Vueのテストコードを埋め込んだ結果が次です。
 https://jsfiddle.net/ken3desu/oyhefw6j/
 iframe出力もあっさりできます。
 

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

【AndroidStudio】bodyを含めたOkHttp通信

久々にandroidJavaの記事を書きます。今回はOkHttpを使った非同期通信についての記事になります。

androidの非同期通信と言えばURLConnectionが代表的に挙げられ、自分も今までURLConnectionで非同期通信をしていましたがこれが

中々長ったらしくてactivityを分けて書いたりと面倒くさいことづくしでした。

これ毎回書くの嫌だなーって思ってたのですが、最近になってOkHttpという非同期通信の存在を知りました。

リファレンスを見ると、重くなりがちな通信を既存のメソッドを減らすことで速度を向上させるために作られたライブラリみたいです。

メソッドが減るということは当然可読化も改善して作りやすくなったってことですよね。という訳で試しにOkHttpを使った非同期通信を

書いてみました。javaScriptでajaxやfetchで慣れ親しんできた自分としてはすごく楽になったなーと感じるコードになりました。

public class MainActivity extends AppCompatActivity {

    private EditText Text1,Text2;
    private static String TAG = "try";


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Text1 = findViewById(R.id.Text1);
        Text2 = findViewById(R.id.Text2);

        Button button = findViewById(R.id.LoginBtn);

        button.setOnClickListener(new View.OnClickListener() {
            @RequiresApi(api = Build.VERSION_CODES.N)
            public void onClick(View view) {


                String url = "http://ここに叩きたいAPI.php";

                String yourname = Text1.getText().toString();

                String yourcountry = Text2.getText().toString();

                RequestBody formBody = new FormBody.Builder()
                        .add("name", "yourname")
                        .add("country", "yourcountry")
                        .build();


                Request request = new Request.Builder()
                        .url(url)
                        .post(formBody)
                        .build();

                OkHttpClient client = new OkHttpClient();

                Call call = client.newCall(request);

                call.enqueue(new Callback() {
                    @Override
                    public void onFailure(Call call, IOException e) {
                        System.out.println("fialer!!");
                    }

                    @Override
                    public void onResponse(Call call, Response response) throws IOException {
                        System.out.println("response: " + response.body().string());
                    }
                });
            }
        });

        }
    }

 

まず、String urlで叩きたいAPIを宣言します。どの形式にしろ必須です。

次に、postしたいeditTextを変数に格納しています。画像や音声ファイルでも送信は可能ですが、ここではテキストにしています。

次のRequestBody formBody = new FormBody.Builder()ですがここが肝になってきます。

キーに該当するテキストのワードを送って、最後にrequestBodyに送れるようにbuild()しています。これがないとrequestで送る時に

bodyに定義できないので、必ずここでビルディングしておきましょう。

最後にrequestBuilderオブジェクトでurlとpostを定義して送信準備完了です!コールバックのところはそのまま公式からとってきたので省

略します。(すみません)

 

フルコードで載せたので、androidStudioのバージョンが極端に古くなければ動くと思います。

これからOkHttp通信を実装するか考えてるけどどのサイトも書いてあることが断片的で分からない!という方はこれを参考にしていただ

ければ幸いです。それではまた。

 

 

 

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

【Cordova】現在の位置情報を取得できる「cordova-plugin-geolocation」プラグイン

タイトル通り、Cordovaで開発中のアプリで現在地の緯度・経度を取得する方法です。
今回使用したプラグインはこちら。

GitHub – apache/cordova-plugin-geolocation: Apache Cordova Plugin geolocation
https://github.com/apache/cordova-plugin-geolocation

このプラグインでは、現在の位置情報を1度だけ取得したり、もしくは定期的に位置情報をし続けることができます。

インストールコマンドはこちら。

cordova plugin add cordova-plugin-geolocation

実際のコードはこちら。

// 成功した時の処理
var onSuccess = function(position) {
    console.log('Latitude: ' + position.coords.latitude);
    console.log('Longitude: ' + position.coords.longitude);
};
// 失敗した時の処理
function onError(error) {
    console.log('code: ' + error.code);
    console.log('message: ' + error.message);
}

var option = { timeout: 30000 };
// 現在の位置情報を1度だけ取得
navigator.geolocation.getCurrentPosition(onSuccess, onError, option);

成功時の処理、失敗時の処理に加えて、オプションを追加することができます。
上記のコードではタイムアウトの時間を指定しています。
他にも、enableHighAccuracy : true を指定すると、高精度な位置情報を取得できます。
もし、なるべく正確な位置情報を取得したい場合は、こちらのオプションを追加してください。

定期的に位置情報を取得し続けたいときは、navigator.geolocation.watchPosition() を使います。
なお、引数は navigator.geolocation.getCurrentPosition() と同じです。

 

ちなみにおまけですが、2点間の距離を求める方法について、リンクを張っておきます。

地球上の2点間の直線距離を求める – Qiita
https://qiita.com/s-yoshiki/items/b0a6f2143db0e1a191e8

主に自分の備忘録のためのメモですが、恐らく緯度・経度を取得した時に行うことが多い処理ではないかなと思います。
こちらも是非参考にしてください。
 
以上、Cordovaのアプリで現在地の緯度・経度を取得する方法でした。

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

GoogleChrome 70 がリリース HTTPページの警告の厳格化やPWAの正式対応などが追加

いつの間にかGoogleChrome Ver.70がリリースされていたようですね。

New in Chrome 70 – Google Developers

米国現地時間の10月16日にリリースされたVer.70では、幾つか大きな変更がされているようです。

・非SSLサイトで文字入力を行うと、アドレスバーに赤文字の”保護されていない通信”が表示されるように変更

ついに、SSL通信(アドレスがhttps://から始まるもの)に対応していないサイトで、フォームなどのテキストボックスに文字を入力すると、無効なSSLが設定されたサイトと同様にアドレスバーの”保護されていない通信”の表示が赤文字に変化するように変更されました。

これは以前から予告されていた変更で、Chromeの”常時SSLが基本”という考え方を反映した物にするために、段階的に変更されてきたものです。

Moving towards a more secure web – Google Security Blog

入力フォームのない非SSLサイトでは、黒文字の”保護されていない通信”が表示されるだけですが、入力フォームの存在する非SSLサイトの場合は入力フォームに一文字でも何か文字を入力した時点で、アドレスバーの”保護されていない通信”が無効なSSL証明書を搭載したサイトと同様に赤文字に変わります。

事情を知っているユーザーならまだしも、こういった事情を知らない一般ユーザーからすると、セキュリティ的に問題のあるサイトとして見られてしまう可能性があります。

そもそもChromeがこういった対応をする前から、ユーザーになにか情報を入力させる機能を提供する場合はSSLに対応するのが常識でしたし、最近はLet’s Encryptのような無料のSSL証明書もでていますので、まだSSLに対応されていないサイトをお持ちの方はすぐにSSL対応化していただくことをお勧めします。

・Windows版ChromeがPWAに正式に対応

いままで実験的機能として実装されていたPWA(プログレッシブウェブアプリ)ですが、ついにWindows版Chromeで正式に有効化されたようです。
PWAとはWebアプリとして提供されているインターネット上のWebサイトを、あたかもネイティブ(OSにインストールしたような)アプリとして動いているかのように動作させるできることができる機能です。

通常、Webサイトとして作られたWebアプリは、インターネットにつないでいないと起動できないうえ、ユーザーがWebサイトを開かないと何もできない受動的な仕組みでした。
PWAが有効になることで、こういったWebサイトをPWAに対応させることで、対応ブラウザを通してOSのアプリの一つとしてインストールできたり、インターネットに接続していなくても起動できたり、Webサイトを閉じていても通知が受け取れたり、といった恩恵が受けられるようになります。
またPWAの本質はWebサイトなので、各OS用にプログラムを書き直したり、ビルドし直したり、といった作業をほとんどすることなくクロスプラットフォームアプリを作れるのも大きな利点です。

有名どころでは、現時点でTwitter LiteGoogle PhotoなどのサービスがPWAに対応していますので、早速体験してみたい!という方は是非試してみてはいかがでしょうか。

Twitterにアクセスできなくなった「Twitter for Mac」の代わりはChromeのPWAで「Twitter Lite」を使うのが最適? – AAPL.Ch

なお、公式ブログによると、macOS版ChromeではVer.72で正式対応予定とのことですが、早く試したいという方は従来通り実験機能を有効にすることで現時点でも利用できるようになります。(有効化の方法は上記記事をご覧ください。)

・WebWorkerで実装した各処理に名前を付けることが可能に。

WebWorkerとは、javascriptの処理をバックグラウンドで行わせることができる仕組みです。

Javascriptは少し特殊で、基本的にすべての処理をメインスレッド(メインのプロセス)だけで行います。
そのため、Javascriptで書いたプログラムのどこかで重い処理を行ってしまうと、その処理が終わるまでほかの処理を行うことができないため、結果的にWebアプリがフリーズしたような状態になってしまうことがありました。

こういった処理にWebWorkerを使用することで、その部分の処理はメインスレッドとは別のスレッド(プロセス)で行わせることができるため、重い処理を行わせてもWebアプリがフリーズしにくくなり、快適な動作をさせることができます。

今回のアップデートで、WebWorkerで書かれた各処理ごとに名前が付けられるようになったようで、これにより複数のWebWorkerを使用した場合のデバッグがしやすくなるようです。

ほかにも多くの修正が行われたChrome Ver.70。
今回は魅力的な機能もいくつか正式実装されているようですので、Chrome使いの皆さんは変更点を是非チェックしてみてください。

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

【Android】「The minSdk version should not be declared in the android manifest file. You can move the version from the manifest to the defaultConfig in the build.gradle file.」エラー【未解決】

タイトル通り未解決のAndroid Studioのエラーについてです。
いくつかヒットした解決策を試したのですが解消されず…。

エラーはこちら。

The minSdk version should not be declared in the android manifest file. You can move the version from the manifest to the defaultConfig in the build.gradle file.

minSdk の指定を AndroidManifest.xml ではなく build.gradle で指定するようにという内容です。
なので、この指示通りに minSdkVersion を build.gradle に書き直したのですが…それでも解消せず。

記述箇所はこのような感じです。

android {
  ...
  defaultConfig {
    ...
    minSdkVersion 14
    targetSdkVersion 24
  }
  productFlavors {
    main {
      ...
    }
    afterLollipop {
      ...
      minSdkVersion 21
    }
  }
}

ちなみに、この内容は Android Developers のページを参考にしました。

アプリのバージョニング|Android Developers
https://developer.android.com/studio/publish/versioning?hl=ja

Cordova で作成した環境だから、というのもありそうですが、まだわかってはいません。
また、このエラーがあっても別にビルドや実機での実行は試すことができるので、今のところ、一旦放置しています。
が、ずっとウィンドウ上部に「Try Again」が表示されているのもうっとおしいので、早めに解決したいところですね。

 

解決策が判明したら、改めてご紹介したいと思います!

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

Vue.jsの単一ファイルコンポーネント

 Vueはwebページを部分部分に分け、管理することができるJavaScriptフレームワークです。Vueはコンポーネントという単位で、下の画像の四角に当てはまる部分それぞれのHTML、JS、CSSを管理します。小さな四角を集めて大きな四角を作る形です。この手法は関数を小さく分割し、繋げて、積み重ねる、という手法に似ており私は大変好みです。

 単一ファイルコンポーネントはこのコンポーネントを一ファイル一コンポーネントで扱う仕組みです。大本のbodyからtemplateがtemplateを呼び、大きなwebページを管理しやすく作ります。具体的な1コンポーネントコードは例えば次の画像です。

 template内にHTML、script内にJS、style内にCSSときれいにわかれて一つのパーツを作れます。この分割によって改良されたことがシンタックスハイライト、文字の色分けです。HTML中にJS、CSSを直書きしようとした場合、3言語の文法が入り乱れて実に読みにくいです。ここからここまでJS、ここからここまでCSS、という区分で背景色を色分けするエディタはありましたが、余分に色を使う、短文が入ると斑模様になって結局分かりにくい、ということになりました。また、細かい単位、パーツ単位での単体テストが容易になりました。Vueは管理しやすく、記述しやすい便利なフレームワークです。

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

【react-cordova】即時関数以外でJSXで条件文を定義する

 

少し前にJSX内で即時関数を使ってifを使う記事をかきましたが、良い点と悪い点があるということを書き忘れてしまったので補足します。

良い点はそのままjavascriptを使える点です。初心者のかたはreactの書き方自体まだおぼつかないという方もいると思います。

しかし、即時関数でカッコを複数付けるだけで定義したifの一文を配置したいコンポーネントが命令を読み込んでくれるという初心者のか

たにとっては変更が少なく感覚的に理解しやすい実装方法として使われていました。

次に悪い点の説明ですが、この関数のデメリットはやはりカッコー>{(())}が多くなり可読性に欠けてしまうという点です。

プロジェクトで機能の変更があり即時関数周りの修正が必要になった時とかは特に顕著で、まずカッコの境界線を切り分けた後に修正を

加えないといけなくなり、これにかなり神経を使ってしまうのではと感じました。これが自分ならまだしも他のチームメンバーが見たら

混乱してしまいますよね・・・。

デバッグ前に事前に説明するかコードをもっと簡潔に書いてあげるかしてできればストレスフリーで作業したいですしね。

自分も後からコードを読み返してなんとか気を使えないか悩んだ結果後者を選びました。下のコードを見てください。

 

render() {
const num = this.state.num;
return (
{ num=="1" && <select onChange={ e => this.setState({ward: e.target.value}) }  defaultValue="">

{ this.ward.map( d => <option  value={d.value}>{d.label}</option>)} </select>
 }
);
}

[/java script]

ひいき目でみても綺麗とは言えないですが、カッコの数を減らしてシェイプアップさせました。&&を付けて変数numが1ならばselectタグ

を生成するように定義しています。カッコを消したことで格段に見やすくなりましたね。

 

1人でアプリを作るのにはなんてことはないのですが、大規模なプロジェクトではこのように細かいコードを修正する時でさえ

気を使わないと他のメンバーからなにこれ!みたいに突っ込まれかねないので、reactに慣れてきたなというかたは一度自分のコードを

見てみてください。小さいですが自分のプログラミングの技術向上にもなるので、気づいたらこれはおいしいと思って楽な気持ちで

取り組むといいかもですね。

 

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