月別アーカイブ 6月 2019

著者:杉浦

色々便利なフロントエンド技術の書いてあるFrontEndHandbook2019の紹介

 昨年度までは日本語訳したものがQiitaなどどこかしら分かりやすい場所に上がっていた様なのですが、今年度は見当たらないの本元を検索。githubにありました。
FrontendMasters/front-end-handbook-2019: [Book] 2019 edition of our front-end development handbook
Front-end Developer Handbook 2019 – Learn the entire JavaScript, CSS and HTML development practice!
 FrontEndHandbookには主にJavaScript、CSS、HTMLに関連するその時々の新しい技術と発行直前の流行り、何が出来れば効率よく品質の良いフロントエンドを作れるかなどが載っています。大体の記事は短めの話とリンク集で、そういったものが集まっています。リンクの先は結構がっつりした話が多いです。
 即物的に役立つのはChapter 5. Front-end Dev Toolsです。この章には、これ便利だよ、といった編集者らのおすすめ開発ツールが載っています。有名どころが多いですが、とにかく数が多い為何かしら知らない有益なツールを見つけられます。

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

Dropboxとデバイス

Dropbox のデバイス数が3デバイスと制限が入ったのを知っていたのですが、誤ってログアウトしてしまい追加できなくなってしまいました。

いろいろ悩んだ結果、用途別に別アカウントを用意してフォルダを共有することにしました。

面倒ですがこれでどうにかなります。

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

【androidstudio】遅くなったandroid studioの速度を改善する方法

タイトルの通りです。先週まで普通に開発に使っていたandroid studioが突然重くなりました。というかビルドの終わる時間が遅く

なりました。困った時のとりあえずクリーンビルドをしてみても変わらず。開いていた重そうなファイルを全部閉じて再起動しても

のろのろビルドのまま・・・。グレイドルのアップデートに必要なパッケージをたくさんインストールしたからでしょうか。

いずれにしろこのままでは気分が悪いので公式をのぞいたら答えが見つかりました。

どうやらdexというツールを使って変更したソースや再コンパイルの必要があるソースだけを再コンパイルすることで開発中のコンパイル

時間を短縮できるみたいです。といっても難しい処理は必要なくgradle.propertiesファイル内に以下のコードを記述するだけで改善できる

みたいです。

</pre>
<pre class=""><span class="pln">org</span><span class="pun">.</span><span class="pln">gradle</span><span class="pun">.</span><span class="pln">jvmargs </span><span class="pun">=</span> <span class="pun">-</span><span class="typ">Xmx2048m</span></pre>
<pre>

 

自分も試しに入れてみたところ期待した通り、一分くらいかかっていたビルドがいらいらを感じない程度には早くなりました。

(推定半分くらいかな?)早くなったのはいいけど偶にビルドできないのはなんででしょう。んー、これ解決と言えるか微妙なところですね・・・。

使っていて気分が悪いままだったら別の解決法を考えます。

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

【Laravel】Laravelのレスポンスは暗黙の型変換が強い

 Laravelはコントローラが何を返そうがサーバがクライアントにレスポンスを返せる様にがんばります。暗黙の型変換を行うPHPの鑑ですね。
 Laravelはミドルウェア、ルートバインディングをなんやかんや通って、コントローラのメソッドを実行、返り値をレスポンスにします。
 肝心のレスポンスはvendor/laravel/framework/src/Illuminate/Routing/Router.phpのtoResponseメソッドで整形されます。

    /**
     * Static version of prepareResponse.
     *
     * @param  \Symfony\Component\HttpFoundation\Request  $request
     * @param  mixed  $response
     * @return \Illuminate\Http\Response|\Illuminate\Http\JsonResponse
     */
    public static function toResponse($request, $response)
    {
        if ($response instanceof Responsable) {
            $response = $response->toResponse($request);
        }

        if ($response instanceof PsrResponseInterface) {
            $response = (new HttpFoundationFactory)->createResponse($response);
        } elseif ($response instanceof Model && $response->wasRecentlyCreated) {
            $response = new JsonResponse($response, 201);
        } elseif (! $response instanceof SymfonyResponse &&
                   ($response instanceof Arrayable ||
                    $response instanceof Jsonable ||
                    $response instanceof ArrayObject ||
                    $response instanceof JsonSerializable ||
                    is_array($response))) {
            $response = new JsonResponse($response);
        } elseif (! $response instanceof SymfonyResponse) {
            $response = new Response($response);
        }

        if ($response->getStatusCode() === Response::HTTP_NOT_MODIFIED) {
            $response->setNotModified();
        }

        return $response->prepare($request);
    }

 $responseの型を判定し、適したメソッドを呼ぶか、適したオブジェクトに変換してます。見るからにレスポンスにできるものはレスポンスにする、という貪欲さが見えます。とりあえず特長的なのは普通にhogehogeResponseという型で判定していない部分である次の条件文です。

        } elseif (! $response instanceof SymfonyResponse &&
                   ($response instanceof Arrayable ||
                    $response instanceof Jsonable ||
                    $response instanceof ArrayObject ||
                    $response instanceof JsonSerializable ||
                    is_array($response))) {
            $response = new JsonResponse($response);
        } elseif (! $response instanceof SymfonyResponse) {

 とりあえずjsonにできるならなんでもいい、arrayでもいい、という条件文です。これのおかげでControllerの中でのアダプターを作る手間がいくらか省けます。

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

【AndroidStudio】「Gradle DSL method not found: ‘implementation()’」エラーの対処法

今回は、Android Studio で発生したエラーについて。
以前開発していたアプリを開いたところ、「ERROR: Gradle DSL method not found: ‘implementation()’」というエラーに遭遇しました。
Android Studio のバージョンを上げたような気もするし…それが原因かな。

で、エラーを検索したところ、下記の投稿がヒットしました。

android – Gradle DSL method not found: ‘implementation()’ – Stack Overflow
https://stackoverflow.com/questions/45838173/gradle-dsl-method-not-found-implementation

 

投稿によると、implementation() を利用するには、

  1. gradle plugin を Android 3.0.0 以上に更新
  2. gradle のバージョンを 3.4 以降に

上記が必要とのことでした。

そのため、まず build.gradle を下記の記述のように変更します。

buildscript {
    repositories {
        ...
        // 下記を追加
        google()
    }

    dependencies {
        // ここのバージョンを 3.0.0-beta1 に変更
        classpath 'com.android.tools.build:gradle:3.0.0-beta1'
    }
}

次に、gradle-wrapper.properties を開き、下記を追加します。

distributionUrl=https\://services.gradle.org/distributions/gradle-4.1-rc-1-all.zip

もし既に違うバージョンのファイルが指定されている場合は、コメントアウトなどをしてください。
消しても問題ないとは思いますがが、私は念のためコメントアウトで対応しました。

あとは、Sync now をクリックして実行すればOKです。
なお、私の環境では、この後さらにバージョンアップを促されたので、それも実行しました。
作業は以上です。
他のエラーが発生していなければ、問題なくビルドが実行できると思います。

 

以上、「ERROR: Gradle DSL method not found: ‘implementation()’」エラーの対処法でした。
Stack Overflow には大分お世話になっていますので、今後も困ったらこちらをのぞいてみたいと思います。

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

【javascript】TypeError: n.map is not a functionを始末する

mapを使って取得したjsonを順に表示させるテクニックはjavascript界隈では常套手段ですが、なんか書き方が多くしかもどのコードで

書いても動作が変わらないので筆者はあまり好きではありません。(reactではforeachより優先順位は上だけどなんででしょう。)

mapを嫌い嫌われている関係なので今回もTypeError: n.map is not a functionで足元をすくわれました。

mapするページに遷移したとたんtoastでTypeError: n.map is not a functionと表示させるのでいらいらが凄まじかったです、はい。

(なぜかandroidStudioも激重になっていたのでそのせいでもある)

 

解決法は、=>の後ろに書いたカッコを消して解決。そんなことなのか・・・。とりあえずここで悪い例と良い例を載せておきます。

 

ダメ↓

</pre>
{prizesList.map((prizes, index) => (

<li key={index}

//ここに取得したjsonを記述します。

</li>

))}
<pre>

 

良い例↓


{prizesList.map((prizes, index) =>
  <li key={index}
    //ここに取得したjsonを記述します。
  </li>
)}

カッコがついていても動いたコードもあったので、全部が正しい訳ではないですがシンプルなmapを書きたい時はカッコを外したほうが

無難な動きをしてくれるみたいです。

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

【PHP】「Trying to get property of non-object」エラーが発生する原因と対処法

前回に引き続き、PHP で発生したエラーの対処法についてです。
今回は「Trying to get property of non-object」というエラーです。

検索したところ、全く同じエラーにお悩みの方を発見。

エラー”Trying to get property of non-object”を解決したい|teratail
https://teratail.com/questions/76134

 

で、こちらの記事によると、エラーの原因は存在しないオブジェクトのプロパティを呼び出そうとしているためのようです。
もしくは、null の値を参照した時にも同様のエラーが発生数するとのこと。

そのため、このエラーの対処法としては、下記のあたりを調べてみるのが良いかと思います。

  1. 呼び出そうとしているプロパティ名が正しいか?
  2. オブジェクトがに値が存在するか?

2 については、isset()isnull() の関数で、使用しようとしているオブジェクトをチェックすることをおすすめします。

 

以上、「Trying to get property of non-object」エラーが発生する原因とその対処法についてでした。
タイプミスでプロパティ名を間違えるとかはうっかりやらかしそうなので、皆様も十分お気を付けください。

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

【Laravel】Eloquent自動生成ライブラリeloquent-model-generatorの紹介

krlove/eloquent-model-generator: Eloquent Model Generator
 LaravelのEloquentモデルをORM(オブジェクト関係マッピング)として自在動かすにはDB中の1テーブルに対して1モデルを定義、更にテーブル間の関係をメソッドに記述、とする必要があります。これはいつも同じことを記述する上、大量に必要となるため面倒です。eloquent-model-generatorはこれを解決します。
 eloquent-model-generatorはDB中の定義からEloquentモデルを生成するライブラリです。例によってcomposerでインストール、

composer require krlove/eloquent-model-generator --dev

 artisanから起動できます。基本は次です。

# モデル名を指定(テーブル名はモデル名の複数形)
php artisan krlove:generate:model User
# モデル名とテーブル名を指定
php artisan krlove:generate:model User --table-name=user

 これだけでリレーション、fillableをはじめとした様々なオプション付きのモデルが生成されます。
 テーブル名らをコピペして、コマンドを量産して叩くだけでも便利ですがconfigを使うとさらに便利になります。

<?php

return [
    'namespace' => 'App\Models', // namespaceの冠詞
    'base_class_name' => \Illuminate\Database\Eloquent\Model::class, // Modelの継承元
    'output_path' => '/full/path/to/output/directory', // Modelの出力先ディレクトリ
    'no_timestamps' => true, // created_at, updated_atを使わないか使うか
    'date_format' => 'U', // datetimeカラムからデータを取得する時のフォーマット。nullだとCarbon
    'connection' => 'other-connection', // 不明
    'backup' => true, // 元々あるモデルを壊さないか否か
];

 Eloquent共通の設定が出来ます。
 さらに、この記事を書いている時点(2019/06/10)のプルリクに全てのモデルを生成するコマンドがあります。
Create Command To Generate All Models by tprj29 · Pull Request #46 · krlove/eloquent-model-generator
 このプルリクにあるコマンドファイルをコ用いて、 artisan krlove:generate:all-modelsを実行すると、DB中のテーブルを全て読み取り、全てに対応するEloquentモデルが生成されます。
 さらにこれをartisan ide-helper:modelsartisan test-factory-helper:generateと組み合わせることで素のEloquentが更に充実します。

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

【PHP】「Error: Undefined offset: 2」が発生する原因と対処法

今回遭遇したPHPの「Error: Undefined offset: 2」というエラーとその対処法について。
初めてみたエラーだったので少し身構えましたが、そこまで難しいものではありませんでした。

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

「Notice: Undefined offset」と表示されるとき|PHPプログラミングの教科書 [php1st.com]
https://php1st.com/569

 

上記の記事によると、まずこのエラーが発生した原因は「配列で存在しない位置のインデックスを参照しようとしたこと」らしいです。
例えば、要素が 2つしかない配列の、存在しない 3番目を参照しようとしたときですね。
コードを確認したところ、確かに空の配列から 2番目の要素を取得しようとしていました。
そのため、配列が空でないかをチェックするか、確実に配列に要素が入るようにするなどの対応を行えば解決できました。

 

以上、PHP で「Error: Undefined offset: 2」が発生した時の対処法でした。
ケアレスミスなので、気を付けたいです。

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

Chromeのtextareaでスクロール位置の変更が上手くいかないことがある

 次のデモはVueを使ったtextarea中のクリック、キーアップ、キーダウンに反応してscrollTopを取得、表示するデモです。
 
 これを動かすと少々直感的でない動作とそのscrollTopの値が現れます。例えば次です。デモはclick, key up, key downそれぞれについていますが動画はclick, key downをまとめた一つのみです。

 screenTop:339になってからEnterを押して改行を実行すると、textareaのカーソルが画面内のてっぺんになり、screenTopが更新されません。どういうわけか度々この現象が起きます。マウスでスクロールぐりぐり、上下に余裕のある場所へクリックでカーソル配置、改行で度々再現します。
 これに近い正常な現象は次の様にすると見えます。カーソルをセット、画面外に追いやってからEnterで改行をすると、textareaのカーソルがtextarea内のてっぺんになります。こちらの場合はscrollTopが更新されます。

 この二つから推測されるのは、「何らかの原因で期待するscrollTopがとれず、仮にscrollTop=0と扱って改行を実行。正常な動作同様にtextareaのカーソルが画面内のてっぺんになるようにscrollTop変更。」という動作です。Chrome自体のコードは非公開ですし、詳しい内容はわかりませんがなかなか面白い現象です。
 余談ですがChromeのscrollTopは少数以下も取っていますがFireFox, Microsoft Edgeは少数以下を切り捨ててInt型の様に振る舞っていました。また、Operaは少数ありでした。加えてOperaもカーソルの挙動が不穏でした。少数絡みで何かしらあるのかもしれませんね。

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