月別アーカイブ 5月 2019

著者:杉浦

デザイン法則を体感しながら確認できるwebページLaws of UXの紹介

Home | Laws of UX
 Laws of UXはユーザインタフェースを作る時に考慮するとよい法則を実際に表現しながら紹介してくれるページです。
 例えば近いもの同士をまとまっていると感じる近接の法則は、

 の様に画像付きで紹介されています。より詳しくは単体ページLaw of Proximity | Laws of UXにあり、概要、起源、参考文献などを示してくれます。
 デザイン法則は、そんなことは当然だ、と思わされる法則がいくつもあります。これはデザイン法則が人間の直感を明示的に言語化することによって生まれるためです。元々なんとなくはわかっている法則が多いのです。その様なモノを改めて全て考慮するというのは難しいです。しかし考慮せずに作られたものと考慮して作られたものを比べると、秩序の有無がはっきりします。デザイン法則を利用できるのであれば、利用するべきでしょう。

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

【Android】AndroidStudioのエミュレータが起動しない時の対処法

今回はAndroid Studio で発生したエラーについて。
エミュレータでアプリの動作確認をすることになり、新しくエミュレータ端末を作成して実行しようとしたところ、エラーが発生してエミュレータが起動できませんでした。
エラーメッセージは「Emulator: Process finished with exit code 1」というものでした。
が、こちらを調べてもよく分からず…後輩君に助けを求めたところ、下記の記事を教えてもらいました。

VT-x を有効にしたく て 3 日程できなかったのだが、Windows が余計なお世話をしてた件|ピックワールド(PIC World)
http://picworld.jp/2016/03/28/vt-x-を有効にしたく-て-3-日程できなかったのだが、Windows/

 

こちらの記事によると、VT-x を有効にしないとエミュレータを起動できないとのこと。
で、このVT-x を有効にするには Hyper-V を無効にすればいいとのこと。

こちらを無効にするには「Windows の機能の有効化または無効化」を開きます。
Windows のスタートメニューから検索すればヒットしますので、クリックして起動してください。
すると、下記のようなウィンドウが表示されるので、ここから Hyper-V という項目を探します。

あとは、これを無効にすればOKです。
これのチェックを外すと PC の再起動を促されますので、指示に従って再起動を行います。

以上で作業は完了です。
あとは、Android Studio でエミュレータを起動してみてください。
私の環境では、問題なく起動し、アプリを実行できました。

 

以上、Android Studio でエミュレータを起動できない時の対処法でした。
私だけだと、数日悩みそうだったので、後輩君のフォローはとても助かりました!

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

【jquery】セレクタ要素を減らして読み込みを速める方法

jqueryではセレクタを使って柔軟にcssを描画することができます。(webエンジニアさんはみんな使ったことありますよねすみません。)

最近はページ読み込みのチューニングに勤しんでいるのですが、scriptタグにasyncを付けてみたりlengthをキャッシュしたりと

色々手段を施したこともあり大分読み込みの調子が良くなってきました。あとなにができるかなーと探していたところどうやら

セレクタの余分な要素を切除することでjqueryの読み込み速度を少し向上させることができるみたいです。

こんな感じ。

 


※悪い例

$(<span class="hljs-string">'div.mark'</span>).css(<span class="hljs-string">'display'</span>,<span class="hljs-string">'none'</span>);

$(<span class="hljs-string">'div.paint'</span>).css(<span class="hljs-string">'display'</span>,<span class="hljs-string">'none'</span>);

 

分かりやすいですが、先頭にdivとつけてしまうと、div要素を探した後にまたもう一周div要素を探し続けるので多ければ多いほど

読み込みに不利な条件が付いてしまうという訳です。

divの部分を切除して$(‘mark’)や$(‘paint’)と定義しても問題なく動くのでページ速度の改善を望む場合はこちらの処理をすることを

おすすめします。

 

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

【Laravel】null値のプロパティ参照を避けるoptional関数

ヘルパ 5.5 Laravel#optional
 optionalはLaravelのヘルパ関数のひとつです。次の様な使い方でnull値のプロパティを参照しようとする致命的エラーを防げます。

return optional($user->address)->street;// address===nullでもstreetを参照せずにnullをretuenする

{!! old('name', optional($user)->name) !!}// $user===nullでもnameを参照せずにnullをoldの第二引数にする

 これは特にプロパティの連鎖するリレーションで強力です。このヘルパ関数は一見素晴らしいですがその実用性は程々です。issetよりいくらかまし程度です。具体的に何が問題化というと

optional($user->address->city)->name // addressがnullだと引数生成時点でnullのプロパティ参照を行おうとして致命的エラー
optional($user->address)->city->name // cityがnullだとnull値のnameプロパティ参照を行おうとして致命的エラー

 の様に3段先を見る時点で安全性が担保されなくなります。

optional(optional($user->address)->city)->name

 とすると無駄に長くなりissetと変わりません。これはoptional関数が行っていることが、Optionalクラスのインスタンスを生成し、そのマジックメソッドを用いて通常のアクセスに代わって直下のメソッド、プロパティの参照ミスをnull値に書き換える、という処理のみであることが原因です。
 Optionalクラスのファイルはvendor/laravel/framework/src/Illuminate/Support/Optional.phpにあります。任意の型の引数を自由に操るためのクラスというだけあってなかなかの抽象度ですが、100行程の短いクラスにまとめられています。これを参考に自前で再帰optional関数を作るのもよいかもしれません(おそらく呼び出された時点のコードから先を実行前に読み取るか、プロパティもoptional型に加工することになる)。
 

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

【react】dupilicate declaration of methodの対象法と意味

他のクラスのライブラリを使いたかったのでimportでどしどし入れてビルドしようとすると題名のようなエラーに見舞われました。メソッ

ドだから関数名がダブっているのかと思ったのですが被りはなし。どこで同じ題名のメソッドを入れたのか悩んでいるとよく考えたら勢い

に任せて投入したライブラリ群が上にあるじゃないか、ここが怪しいと思い探したらやっぱりありました。

同じメソッドというか同じクラス名がダブって入っていたので怒られていたみたいです。


※悪い例

import travel from './travelPage';

import travel from './travelPage';

一番後ろの参照名を全部小文字で書いてしまってエラーになることはあるのですが、今回のエラーは初めてお目にかかったので

忘れない様にメモをしておきます。

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

[小ネタ]bootstrapのバージョンを調べる方法

簡単にリッチな画面デザインを表現できるフロントエンドライブラリの一つにBootstrapというのがあります。

Bootstrap

BootstrapはTwitterが中心に開発しているデザインフレームワークです。

Bootstrapには機能を拡張できるプラグインが複数存在しているのですが、Bootstrapのバージョンごとに使えるプラグインが異なっていたりすることがあります。
一方Bootstrapは単体での配信だけでなく、Laravelなどのフレームワークにバンドルされて配布されていたりすることもあります。

そういった場合、”一体どのバージョンのBootstrapが入っているのかわからない…”といった場合も出てきます。

Bootstrapには特にcuiツールとかないですし、どうやってバージョン調べるんだろう…と疑問に思い、調べてみました。
すると、簡単に調べられることがわかりました。

Smarty、Bootstrapのバージョンを確認する – misc.log

Bootstrapを構成しているファイルに、”bootstrap.css”というファイルがあるのですが、このファイルの先頭部分に

/*!
 * Bootstrap v4.1.0 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

こんな風にバージョンが書かれていました…w

こんな風にコメントにも大事な情報が載っていることがあるので 、必要ないからと言って削除してしまうのはよろしくありません。

ちなみに動作を変更したい場合は、CSSやオブジェクト指向の言語などであればコードを別ファイルに追記することで動作を上書きすることができますので、なるべくそういった方法を使うようにしたいですね。

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

【Android】FCM導入時にFirebaseInstanceIdServiceがエラーになった時の対処法

Cordova アプリを開発中に遭遇した FCM のエラーについて。
ちょっとしたトラブルで、一度プラットフォームを削除し、cordova-plugin-fcm を再インストールしたところ、Android Studio でアプリを起動した際にエラーが発生しました。
なんでも、FirebaseInstanceIdService が廃止予定で、使用が非推奨になったためでした。

今回の修正で参考にさせていただいた記事はこちらから。

FirebaseInstanceIdServiceがDeprecatedになった件 – Qiita
https://qiita.com/keijumt/items/d45ea0da3dfa6284ad90

 

対処法としては、まず非推奨の FirebaseInstanceIdServiceFirebaseMessagingService に置き換えます。
私の環境では、別のクラスに extends で継承されていたため、こちらを下記のように書き換えました。

public class MyFirebaseInstanceIDService extends FirebaseMessagingService {
    ...
}

次に、MyFirebaseInstanceIDService クラス内で、onTokenRefresh() をオーバーライドしていたのですが、FirebaseMessagingService では、この関数のかわりに onNewToken() が用意されているので、こちらも変更します。

public class MyFirebaseInstanceIDService extends FirebaseMessagingService {
    @Override
    public void onNewToken(String old_token) {
        ...
    }
}

さらに、onNewToken()(旧 onTokenRefresh())内では、FirebaseInstanceId.getInstance().getToken() が使われていましたが、こちらも非推奨らしく、コードに打ち消し線が引かれてしまったため、併せて修正します。
と言っても、引数を追加して、try/catch で囲むだけなんですけどね。
修正後のコードは下記のとおりです。

String sender_id = [FCM の送信者ID(数字12桁)];
String refreshedToken = null;
try {
    refreshedToken = FirebaseInstanceId.getInstance().getToken(sender_id, "FCM");
} catch (IOException e) {
    e.printStackTrace();
}

修正は以上で完了です。
あとは、通常通り Build → Run を実行したところ、エラーも発生せず、問題なく起動できました。
ただ、その時は起動確認だけを行っただけなので、FCM の機能については、これから入念にチェックしたいと思います。

 

以上、FCM の FirebaseInstanceIdService がエラーになったときの対処法でした。
導入したプラグイン等については、定期的に関数の廃止などをした方が良さそうですね。

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

【Laravel】report関数で例外を握りつぶさない様にする

 この記事において”例外を握りつぶす”とは次の2の意味を転じて”例外の情報を記録しないまま処理を終端まで続ける”という動作を意味します。

[動サ五(四)]

1 強く握ってつぶす。「粘土を―・す」

2 意見・提案などを手もとに故意にとどめ、処置しないままにして、うやむやにする。「要求を―・す」
握り潰す(にぎりつぶす)の意味 – goo国語辞書

 つまり、真に握りつぶす

try{
  // 色々な処理
} catch (Exception $exception) {}

のみでなく

try{
  // 色々な処理
} catch (Exception $exception) {
  return JsonResponse::create('hoge');
}

といった例外を記録しない例外処理のことも、例外を握りつぶしている、と扱います。
 Laravelはデフォルトで例外処理をよしなに処理してくれます。具体的にはキャッチしてログに残し、例外発生直後は例外の理由と原因を示すリッチなエラー画面を見せてくれます。Laravel謹製の機能ならばより適した個別の処理もしてくれます(バリデーションならエラーメッセージ付きリダイレクト、など)。内部を詳しく知りたい方はエラー画面やAPIエラーから独自エラーまで! フローチャートでちゃんと理解するLaravelの例外処理とケーススタディ – Qiitaなどを読むとよいです。
 なにもせず放っておけばいい感じになるのですが、try, catchしなければいけない時もあります。例えば、画面遷移するフォームにおける例外処理は400番台エラーページにユーザを飛ばすのでなく、特定のページにリダイレクトさせたいです。Exception\Handlerに記述を逐一増やすことでリダイレクトを対応する方法がありますが、これは危険な密結合をしている巻物コードが生まれやすいです。コントローラ毎にtry, catchすることになるでしょう。
 コントローラ内でtry, catchしてリダイレクトさせるならば次の様なコードが考えられます。

        try {
             // いろいろな処理
        } catch (Exception $exception) {
            return redirect()->route('宛先')->with([
                'msg' => '保存に失敗しました' // エラーメッセージ
            ])->withInput(); // リクエストで送られてきた入力を差し戻す
        }

 このようにすると、ユーザに謎の遷移を見せずに済みます。しかし、これだけでは最初に挙げた”例外を握りつぶすコード”そのものです。Laravelの例外処理を一切通さずいきなりレスポンスを返しているため、ログに何も残りません。デバッグは困難になり、プログラムの運用者、保守者は絶句することでしょう。
 Laravelのreport関数は簡単にこの問題を解決します。

        try {
             // いろいろな処理
        } catch (Exception $exception) {
            report($exception);// 例外の内容を詳しくログに残す

            return redirect()->route('宛先')->with([
                'msg' => '保存に失敗しました' // エラーメッセージ
            ])->withInput(); // リクエストで送られてきた入力を差し戻す
        }

 例外処理の頭にreport($exception);と加えただけです。これだけで例外に適したログをLaravelが残してくれます。

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

スマートフォンのカメラで文書をPDF化できるアプリ “Adobe Scan”

僕が普段から愛用しているEvernoteには、カメラで撮ったホワイトボードや書類を見やすい画像に自動で加工して保存してくれる機能があります。

これと同じような機能を持つアプリをAdobeもリリースしていることはご存知でしょうか。

Adobe Scan

Adobe Scan

Adobe Inc.無料posted withアプリーチ

このAdobe Scanですが、PDFを開発した本家ということもあり、書類を写真で撮るだけで、PDFファイルに変換してくれるようです。

試してみました。

まずはAdobeにログインします。

カメラへのアクセス権限を求められるので許可します。

カメラが起動したら、書類をカメラで写します。

すると文書を認識して、四隅にマーカーが表示されます。
この状態でしばらく待ちます。

認識が完了するとこんな感じで境界線があっているか聞かれるので、もしずれていた場合はここで調整して”続行”をタップします。

するとこのように取り込んだ文書が表示されるので、内容に問題がなければ”PDFを保存”をタップ

自動でAdobe Document Cloudにアップロードされ、OCRによる文字認識が行われます。

一度Adobe Document Cloudにアップロードしておけば…

同じアカウントでログインしたPC版のAdobe Acrobat Readerなどからもファイルを見ることができます。

文書も文字認識されているので

OCRなので一部不完全ではありますが文字としてコピペも可能です。

とても便利なので、気になった方は是非試してみてください。

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

【Laravel】Laravel公式ニュースサイトLaravelNewsの紹介

Laravel News
 Laravel NewsはLaravelに関する最新の情報や特にメジャーな情報が配信されているLaravel公式のニュースサイトです。主なコンテンツはブログ、チュートリアル、パッケージ紹介、です。
 ブログはなんというか雑多なモノをまとめています。tagはあるので探しやすいですが、とにかく広範にわたって記事が載っています。
 チュートリアルは実践的というか中級者向けというかニッチな操作のチュートリアルになります。Laravelの狭い範囲を深く扱ったり、SPAなどの特定の設計での扱い方であったり、外部ツールやパッケージとの連携であったりという、Laravelの外部や深部に関するよい手法が載っています。
 パッケージはその名の通り、パッケージ紹介です。githubのstarが多いパッケージやcomposer, npmでダウンロードが多いパッケージやLaravelメイン開発者、LaravelNews運営者本人が作ったパッケージなどの紹介をしています。

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