月別アーカイブ 12月 2018

asaba 著者:asaba

【react】setectタグで生年月日フォームを作る

ハイブリッドアプリ必須の開発においてはhtml5の知識が必須になりますが、中でもinputタグには誰もがお世話になっていると

思います。そのinputタグのtype(属性)の一つであるdateについて語っていきます。

このdate属性なのですが、ブラウザやデバイスによって表示が変わる仕様になっており、デバイスに至ってはtext扱いに

なってしまい使えない場合があったりと中々癖が強いオブジェクトです。

iosでは、通常のdatepickerのように上下スクロールすることで数字を選べるようになっているのですが、android(特にエクスペリア)

ではカレンダーUIとして表示される仕様になっており、年配な方やせっかちな方にとってはなかなかに見にくい構成に

なっています・・・。

 

アプリの仕様上ユーザー登録画面で生年月日を出力したかったので、一番初めに目にするであろうページでいきなり

イライラさせてしまうことは開発者としては避けたいところ。

これではいけないと思い、date以外にも様々な属性を手探りで使ってみました。(ネタばれですが結果全部不採用w)

 

まず、type=”month”ですがこれは西暦と月はピッカーで表示されるのですが日にちは対象ではないので即対象外。

次にdateTime-localですが、こちらは西暦月日にち三点全部ピッカーとして表示されます。やったネ!と思ったのですが

よく見たら時刻も必ず入力しないといけないんじゃないですかー・・・。

hiddenで非表示にできないか頑張ったのですがダメでしたね、やっぱり入力しないといけないみたいです。

先ほども言った通り生年月日なので産まれた時間まではさすがに求めてないですよ・・・。

しかもIEやfirefoxでは対応していないという仕打ち。

そのほかにも試したのですが、全部撃沈しました。

 

結局selectで生年月日をずらーっと出すようなかたちに落ち着きそうです。

こちらをreactで実装するのは比較的簡単で、まずthis.stateにyear,month,dayをコンストラクタに設定して

mapでそれぞれ西暦月日にちの配列を作ってあげて表示をします。

ただ表示するだけならこれだけでできますが、2018/3/1のように生年月日が連結されたような疑似的にdateで出力される

ような見た目にしたかったのでこんな感じにしました。

<pre>    const year = this.state.year;
    const month = this.state.month;
    const day = this.state.day;
    const birthday = ( year + '/' + month + '/' + day );
</pre>

細かいことを気にしないならば連結するだけならこんな簡単にできてしまいます。

値もしっかりとれているのでandroidでカレンダー表示のUIは嫌だよーというかたは使ってみてくださいね。

 

本日はこんな感じで終了です。よいお年を!

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

1歩ずつ少しずつとGitのコミットメッセージの接頭辞

 プログラミングは、一度に、小さな1つのことを行います。
 1つずつ、少しずつ、小さな段の階段を上っていくように作業します。決して複数を相手にせず、1つずつ対処します。
 小さな作業を1つ行い、それをしっかり確認し、次の作業に移る、というサイクルを繰り返します。
上田勲. プリンシプル オブ プログラミング 3年目までに身につけたい 一生役立つ101の原理原則 (Kindle の位置No.4234-4237). 株式会社秀和システム. Kindle 版.

 ’1歩ずつ少しずつ’とは書籍プリンシプル オブ プログラミング内で述べられているプログラミングの原則の一つです。内容は上記で引用した通り一つ一つ小さな作業をこなしていくという方法を繰り返して大きなことを成すプログラミングをしましょう、ということです。
 プログラミングを行う過程で現れるものは積み重ねると複雑になりがちです。例えば、条件分岐、関数の依存関係。また機能追加、バグ修正、リファクタリング、テストといった作業も多岐に渡るため、一度に行うと何をしたのか、していたのか不透明になることがあります。こういった問題が現れないように、1歩ずつ少しずつ作業をした方がよいです。
 1歩ずつ少しずつとありましたが1歩をどう定義するかという問題があります。極端に言えば、ある製品を作る、あるモジュールを完成させる、といった何らかの単位を持つものに関して作業(動詞?)を一つ行ったならばとんでもない大股でも1歩です。もちろんプリンシプル オブ プログラミング内で述べられている原則における1歩はこれほど大股ではありません。Gitのコミットメッセージのルールを定めることによって、いくらかましな歩幅で1歩を刻めます。
 コミットメッセージのルールとして参考になりやすいのは大規模であったり、多人数で開発を続けているリポジトリのコミットメッセージのフォーマットです。例えばAngular.js の開発者ガイドのコミットメッセージガイドラインには次の様にあります。

Commit Message Format
<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

には以下のリスト中のいずれかをいれます。

  • feat: A new feature
  • fix: A bug fix
  • docs: Documentation only changes
  • style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
  • refactor: A code change that neither fixes a bug nor adds a feature
  • perf: A code change that improves performance
  • test: Adding missing or correcting existing tests
  • chore: Changes to the build process or auxiliary tools and libraries such as documentation generation

 このfix:などの様に接頭辞をつけることで一つのコミットで一種類の小さな作業しかできない様に1歩を縛れ、1歩ずつ少しずつを実現できます。接頭辞をつけることで次の画像の様な検索もできなかなか便利です。

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

【IoT】ロードバイクの盗難対策サービス「AlterLock(オルターロック)」

昨日の記事ですが、ロードバイク用の盗難対策デバイス「AlterLock」が発売されたとのことでしたのでご紹介。
振動検知アラーム + GPS + 通信機能を搭載した盗難対策デバイスです。
サイクリストの社員の悩みがこのデバイスの開発のきっかけとなったらしく、またプロダクトマネージャーもロードバイクを趣味にしているとのことで、かなり考えられたデザインになっています。
私もロードバイクに乗るので、かなり興味があります!
カギはチェーンタイプのカギを使っているのですが、やはり施錠には心配になる事もあり…購入を検討してもいいかもしれません。

私が見た記事はこちらから。

ロードバイクの盗難対策デバイスをSigfoxで実現、IoTで愛車を守る「AlterLock」発売 – INTERNET Watch
https://internet.watch.impress.co.jp/docs/column/chizu3/1160329.html

本体は自転車のボトルケージ(ドリンクホルダー)の台座部分に取り付ける仕組みになっています。
また、デバイスは左サイドに出っ張っているのですが、これは電波の吸収や反射を考慮しているのだとか。
出っ張る向きが右側ではなく左側なのは、自転車の写真は変速機などのパーツが見える右側から撮ることが多く、左側に広げるほうが目立たないから、とのこと。
…流石、実際にロードバイクに乗るからこその視点ですね。

「AlterLock」の公式サイトはこちらから。

AlterLock | サイクルガードサービス(スポーツ自転車の盗難防止/盗難抑止)
https://alterlock.net/

AlterLock の仕組みは上記サイトで分かりやすく紹介されているので、購入を検討している方はぜひご覧ください。

なお値段は、本体が8900円で利用料が月額390円/年額3900円です。
利用料はAmazonプライム会員の会費とほぼ同じですね。

また、デバイスのバッテリーは充電可能で最大1.5ヶ月動作するとのこと。
LPWAを利用しているので、低消費電力&遠距離通信を実現しているようです。

サービスの提供エリアは自転車盗難の多い主要都市で展開されており、またサイクリングロードのエリアカバーも確認中とのこと。
サービスエリアは下記から確認できます。

AlterLock サービス提供エリア(Sigfox サービス提供エリア)|AlterLock
https://alterlock.net/service-area/

 

以上、ロードバイク用の盗難対策デバイス&サービス「AlterLock」のご紹介でした。
ロードバイクは非常に高価なものもありますから、万一の時のためにご検討してはいかがでしょうか。

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

WebPをAdobePhotoshopで編集できるようにする方法

Googleが推奨するWeb向けの新しい画像形式 WebP ですが、現状あまり普及している印象はなく、ほどんどの主要な画像エディタでもデフォルトで対応していないなど、ちょっと扱いづらい感じがあります。

先日紹介したGreenifyを紹介するために、入手したWebP形式のアイコンを記事で使おうと思ってPhotoshopへ放り込んでみたのですが…

こんな風にエラーがでて開くことができません。
同じく画像エディタのGIMPでも試してみましたが、

こんな感じでエラーになってしまいます。

なんとか開く方法がないかなーと思っていろいろ調べたところ、Photoshopのプラグインで

AdobeWebM

というプラグインがあることを知りました。

今回はこのプラグインを使って、PhotoshopでWebPが開けるかどうかを試してみました。

まず、 GitHubのAdobeWebM のページへアクセスします。

下の方の説明書きのページのDownloadの項目にあるMacまたはWinのリンクから、自分が使用しているOS対応の物を選択します。

圧縮ファイル形式でダウンロードされるので、ダウンロード完了後展開します。

中身を展開すると、プラグイン本体と説明書が入っています。
このうちの”WebP.plugin”をコピーし

Adobe Photoshop CC 2019フォルダ内のPlug-insフォルダ内にコピーします。

その後、一度Photoshopを再起動し、他の画像と同様にWebP画像を読み込ませると…

ちゃんと認識してくれました!
あとは普通通りに編集したり。任意の形式で書きだしたりすることができます。

WebP画像の扱いでお困りの方は試してみてください。

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

行儀の悪いAndroidアプリには眠ってもらおう。 アプリのバックグラウンド動作を制御できるアプリ”Greenify”

Androidを長期間使っていると悩まされるのが端末の動作の低速化。
動作がサックサクなフラグシップモデルのスマホを買ったはずなのに、いつの間にか常にCPUをフル稼働させ、一つの動作に数秒かかり、スクロールすらままならない状態に…なんてことになってしまうことがあります。

その原因に、バッテリーや内部部品の経年劣化とか、そもそもアプリが要求するスペックが上がってきた…とかいうどうしようもない場合(そもそもAndroidの仕組み上どうしても重くなりやs…ゲフンゲフン)もあるのですが、大抵の場合、一度端末を初期化すると嘘のように改善したりすることもよくあります。

初期化すれば治るということはソフトウェア的な原因…つまり端末を購入してから今までにインストールしたアプリにある…という可能性を考える必要が出てきます。

実際、Androidのアプリは権限が比較的自由なこともあり、一見常駐する必要のなさそうなアプリがガンガン常駐してることもあります。

特にスーパーや飲食店、衣料品店などの会員アプリは広告をだしたり、何か情報を取得するために常駐してたりします。他にも”まさかこのアプリが…?”っていうようなアプリが常駐してることも結構あるようです。

そんな常駐アプリに対して、前はタスクキラー系のアプリが有効とのことで一時期よく使われてましたが、最近のアプリはタスクキルしてもすぐに再起動する”ゾンビアプリ”が多く、タスクキラーでは再起動が走る分却って重くなってしまう状況でした。

そこで、”そもそもアプリが勝手に起動しないようにブロックしてしまおう”という発想から出てきたのが、今回紹介するGreenifyというアプリです。

Greenify
Greenify
開発元:Oasis Feng
posted withアプリーチ

Greenifyは、現時点でバックグラウンドで動作しているアプリを一覧化して表示してくれ、停止させたいアプリを個別に停止させることができるようになっています。

右上の+をタップすると

このように、現在バックグランドで動作中のアプリが一覧で表示されます。

今回は例で、LINEを自動起動させないようにしてみたいと思います。
LINEの項目を選択して、右下の✔ボタンをタップすればOK。

休止リストに追加されました。

これで、自分で明示的に起動しない限り、LINEがバックグラウンドで動かなくなりました。

実際に自分のスマホにGreenifyを入れて使っていますが、体感そこそこ端末の動作が軽くなりました。

一部アプリはGreenifyで対処できないのもありますが、リストアップされることでどのアプリが負荷を与えているかを知ることができるので、それだけでもかなりありがたいですね。

スマホが重くて悩んでいる方は是非一度試してみてください。

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

【Cordova】カメラを起動orギャラリーから写真を選択するプラグイン「cordova-plugin-camera」

ちょっと今更な感じはありますが、アプリでカメラを起動する、またはギャラリーから写真を選択できる「cordova-plugin-camera」のご紹介です。

GitHubのページは下記からどうぞ。

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

Qiitaの記事ではこちらがおすすめです。

[*Cordova*] カメラプラグインを使ってみる – Qiita
https://qiita.com/cigalecigales/items/b81e95065982acb8aede

少し古い記事ですが、とても分かりやすいです。

 

さて、使い方です。
まずインストールですが、こちらのコマンドを実行します。

cordova plugin add cordova-plugin-camera

で、カメラを起動する場合は下記のように記述します。

// カメラを起動
navigator.camera.getPicture(
    cameraSuccess, 
    cameraError, 
    {
        quality: 100,  // 写真のクオリティ(0~100)
        destinationType: Camera.DestinationType.DATA_URL,  // 戻り値のフォーマット
        sourceType: Camera.PictureSourceType.CAMERA  // カメラで撮影
    }
);

// 写真撮影 成功
function cameraSuccess(result){
    // 成功時の処理
    var img = document.getElementById("image");
    img.src = "data:image/jpeg;base64," + result;
}
// 写真撮影 失敗
function cameraError(error){
    // エラー時の処理
}

カメラを起動する場合は、navigator.camera.getPicture() を実行します。
そして関数の第一引数では実行成功時に実行する関数を、第二引数では実行失敗時に実行する関数を指定します。
第三関数では関数のオプションを設定します。
今回は、写真のクオリティ・戻り値のフォーマット・ソースタイプを指定しています。
ソースタイプは、今回は Camera.PictureSourceType.CAMERA をしており、こちらは端末のカメラを起動しています。
なお、写真のライブラリを起動する場合は Camera.PictureSourceType.PHOTOLIBRARY で、アルバムを起動する場合は Camera.PictureSourceType.SAVEDPHOTOALBUM を指定します。
…写真ライブラリとアルバムはどう違うのか…今後検証したいと思います。

オプションはほかにもあり、外側 or 内側のカメラのどちらを起動するかや、写真撮影後に端末に画像を保存するかどうかも指定できます。
このあたりは、上で挙げた GitHub のページか Qiita の記事をご確認ください。

 

カメラプラグインの基本的な使い方は以上です。
が、個人的にはカメラ起動かギャラリー起動かを選べるとなおいいのですが…そういうプラグインは見つけられず…。
何かいい方法はないものか、現在模索中です。

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

自宅のプロバイダを知る方法

自分の使っているプロバイダを変更したい、若しくは知っておきたい時に使えるtipsです。

 

確認の方法はすごく簡単で、自分の登録しているメールアドレスの@の後ろの部分を確認するだけ!です。

例えば、hogehoge@ocn.ne.jpだった場合は、プロバイダーはOCN

foofoo@ybb.ne.jpだった場合はプロバイダーはYahoo!BB

 

簡単に確認することができますね~。

 

すみません、最近はプログラミングと関係ない話題が続きますが、年明けにまたフレッシュなプログラミングの情報を

提供出来たらなと思っています。

 

 

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

webページのデザインツールであるChrome拡張機能VisBugの紹介

VisBug – Chrome ウェブストア
 VisBugはChromeの拡張機能でページのデザインに関する作業を様々な方面から助けてくれます。使い方は色々あるのですがVisBug自身が次の動画の様に、機能内でデモを流して簡単な説明と共に使い方を教えてくれます。
 
 VisBugの大部分はページの見た目をその場で編集する機能(要素の配置、マージンやパディングの調整、テキストの変更、影の付与など)ですが、詳しい情報を見る機能もあります。
 Inspect機能は要素のスタイルを簡単に次々見ることが出来ます。Local Modifications内ではVisBug自身で編集したデザインを表示しています。横着ですが、ここで作ったデザインの値をそのままコンポーネントなどのスタイルにあてることで深く考えずに自在なデザインを作れます。

 Accessibility機能はその要素が人間の目にとってどれぐらい見やすいかを表示してくれます。数字が大きいほど見やすく、図の白字に黄色なんかはとてもよろしくないです。AA、AAAといった指標はWeb Content Accessibility Guidelines (WCAG) 2.0に定められた閾値です。

 Searchではdocument.querySelector()かのように要素を検索し画面上に表します。

 デザインにおいてもなにかと開発者ツールを使うことが多いですが、VisBugを用いると使うまでもないことが増えて幾分か楽が出来ます。

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

IPFSにファイルをアップロードしてみた!

前回の記事で、IPFSのインストール方法についてご紹介しました。
今回は実際にIPFSに対してファイルをアップロードしてみたいと思います。

前回までの操作で、ipfsコマンドがどのユーザー・どのディレクトリからでも叩ける状態になっているはずです。
今回は、自分が撮影した画像で、IPFSに上げても問題なさそうなものを使用してみました。
IPFSに一度アップロードしたファイルは基本的に二度と削除することは出来ませんので、アップロードする際は十分注意してください。

まず、IPFSにアップロードしたいファイル(形式はなんでも大丈夫ですが、あまり大きくない方がよさそうです。)をipfsコマンドを動かす環境上に用意します。

ファイルを準備したら、実際にアップロードを行ってみます。

ipfs add ファイル名

するとファイルに紐づく一意のID(ハッシュ値)が生成されます。

$ ipfs add hoge.txt

added Qm678e851755589c2ed8905b10e0e8302a694af7e40ee86abacfa4bddfba859bb1 hoge.txt

IPFSでは、このハッシュ値こそがHTTPでいうURLのような、絶対的なパスとなります。

なぜハッシュ値が使われるのかというと、もしIPFS上に全く同じファイルが存在した場合、重複したファイルを同じファイルとして扱うことができる(IPFS上では単に目的のファイルを閲覧できればいいので、何処で上げたか、誰が上げたかは区別されない)上、内容が少しでも異なっていれば違うハッシュ値になるという特性からコンテンツの内容とハッシュ値が1:1で対応するからです。

ipfsではアップロードしただけではファイルの永続性が保証されないので、ipfsコマンドで”pin”をしてファイルを永続化させます。

ipfs pin add コンテンツのハッシュ値

あとは
https://gateway.ipfs.io/ipfs/コンテンツのハッシュ値
のようにIPFSゲートウェイから参照すると、自分が先程アップロードしたコンテンツの内容がブラウザ上で表示されるはずです。

なお、実際にIPFSでWebサイトなどを公開しようとした場合を考えた時、コンテンツの更新時に毎回異なるハッシュ値が生成されることになるので、毎回リンク先が変わってしまうことになります。

これでは不便なので、IPFSには”IPNS”という仕組みが備えられています。
IPNSはIPFS上にアップロードしたコンテンツに対してランダムな名前(エイリアス)を付けることができる仕組みです。

IPNSを利用することで、元のコンテンツを更新しても、IPNS名を使えば同じ名前で更新後のコンテンツへアクセスすることができるようになります。

コンテンツをIPNSと紐づけるには

ipfs name publish コンテンツのハッシュ値

のようにコマンドを実行します。

紐づけたコンテンツは

https://gateway.ipfs.io/ipns/上のコマンドで出力されたipns名

のように各IPFSゲートウェイから参照できます。

実際にIPFSを触ってみた感想として、IPFSのアイデアはとても面白いと感じました。

特に、一度IPFS上にアップロードしてしまえば、どのIPFSゲートウェイノードからでも同じコンテンツが参照できてしまうのはなかなか面白い仕組みだと思います。

一方で、IPFS自体にはまだ認証システムが備わっておらず、アップロードしたファイルはハッシュ値さえ知られてしまえばだれでも閲覧可能であったり、
IPFS上にアップロードしたファイルはアップロードした本人ですら削除できないため、誤って重要なファイルをIPFSにアップロードしても取り消せなかったり、また使用されなくなったファイルがゴミとしてIPFS上に残り続けてしまう、などといった弱点も見えてきました。

完全に一般公開するようなコンテンツであれば現状でも問題ありませんが、HTTPをIPFSで置き換える為には、やはり認証の問題は避けては通れないと思います。

この辺りがもう少し解決されれば、いよいよ実用的に利用できる段階になっていくのではないかな、と思いました。

是非今後の展開に注目したいですね。

参考:

IPFSを触ってみた

IPFSを使って無料で静的サイトをホスティング(公開)してみる

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

【HTML】Android4ではinput type=”file”で画像選択時にカメラかギャラリーかを選べない

同僚さんに以前、相談というかこんな現象が起こっているとの報告を受けていたのですが、ようやく多少時間が取れたので確認中。

なんでも、Android 4以降の端末では、HTML の <input type="file" />で画像を選択する際、カメラもしくはギャラリーのどちらか一方でしか画像を選べないとのことでした。
試してみましたが、確かにその通りの挙動に!

 

で、調査している中、こちらの記事を発見。

Androidの input type=”file” accept=”image/*” 事情 – みかづきブログ その3
http://kimizuka.hatenablog.com/entry/2016/12/01/215013

全く同じことにお悩みの方がいらっしゃいました…!

記事内では、「Android4.4.2でも再現する機種としない機種があるのが謎で、Chromeのバージョンに依存するバグなのか、機種依存のバグなんだと判断しました。」とのこと。
ということは、Androidのバージョンは関係ないのかな?

どうにかならないか、と調べたところ、inputタグのcapture属性を使うとカメラを起動できるようでした。

/* リアのカメラを起動 */
<input type="file" accept="image/*" capture="environment" />

この機能を使って、それぞれ「ギャラリーから選択」と「カメラで撮影」を分けて用意するしかないのかなと考えています。
この辺は、要検討です。

 

以上、HTML の <input type="file" /> の挙動についてでした。
参考にした記事では、カメラの起動をあきらめる。とのことだったので、それも検討したほうが良いのかも知れません。

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