月別アーカイブ 5月 2019

asaba 著者:asaba

【mapbox】mapboxをcssで修飾するときに気を付けること

mapboxはアプリケーション向けに開発された地図ライブラリです。地図ライブラリといえばgoogleMapやOpenStreetMapがありま

すがmapboxは高速かつ比較的自由度が高くコードで自分の好きなようにカスタマイズすることができるという点が評価され様々なアプリ

に使われています。

便利なライブラリですが、各osにつき若干期待された動作と違う動きをするみたいです。

例えばandroidで大丈夫だったはずのmapboxがiosで開いた場合ページを画面いっぱいに出してページスクロールをすると、ページごとス

ワイプしてしまいます。目的の場所を探している最中も常にページが監視され続けるのでこのままだと非常に使いにくいです。

このままでは煩わしいので一から疑わしいコードを索敵することに・・・すると意外とすぐに原因を見つけ出すことができました。

どうやら、mapboxを装飾する時に定義したcssに問題があったみたいで、cordovaのようなハイブリッドアプリとmapboxを組み合わせる

場合はcssでpotision:”absolute”と定義しなければ正しく機能してくれないみたいです。

なんだよそんなことかと思いつつもcssの基本を忘れかけていたので手放しには喜べませんでした。

 

</pre>
※iosでマップ固定するプロパティ

potision:"absolute,"
<pre>

 

次の課題はページの一部に表示されたマップをスワイプ検知を回避して固定するところまでです。ここをabsoluteするとページ自体が

マップより下にいかなくなるのでより捻って対策を模索する必要がありそうですね・・・。

 

 

 

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

エッセイ集「プログラマが知るべき97のこと」の紹介

 プログラマが知るべき97のこと
「プログラマが知るべき97のこと」はプログラマの様々な意見がまとまった文章の集まりです。元々は本であり、上記リンクはそれのエッセイ集の部分を抜き出したのだと思います。初版は2010年ですが特定の言語に依らないような内容が集まっており、今でも通用します。例えば、一つ目のエッセイ分別のある行動 | プログラマが知るべき97のことでは、その場しのぎの乱雑なコードをいかに早いうちに読みやすく扱いやすいコードに直すべきか、について述べられています。
 プログラマが知るべき97のことで述べられている話はマネジメントからコーディングまで多岐に渡る面白話でもあり、身につまされる話でもあります。

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

DoTとDoHのDNSサービス

IIJが開始したことでいろいろ見ていますが、TLSやHTTPS上でセキュアにDNS解決する為の技術の様です。

DoTやDoH は対応したブラウザなどが必要な様です。Firefox が対応している様なので試してみました。

FirefoxでDNS Over HTTPSを有効にする方法

https://blog.halpas.com/archives/12336

about:config から network.trr で絞ったところ mode が 0 だったので 3 に変更して実行してみました。
2 は DoT 優先もモードらしいので 3 で DoT のみへ変更してみました。

・・・・・・ なんだかもともと TRR が true のところがちらほらあったので、DoT 化できたか不明ですが、これでセキュアな DoT 通信になったわけですね?

というか 0 へ戻しても、ちらほら TRR が true のところが有るので、Firefox だと実際は使われているのかな。

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

【CSS】Cordovaアプリでスクロールがカクつく時の対処法

現在開発中のアプリで作成してもらったデザインを反映したところ、スクロールした時にガクガクと画面が揺れて、画面上と下にそれぞれ固定してあるヘッダーとフッターも一瞬ズレたりしたのでそれの修正方法についてです。
なお、実行環境は Android でした。

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

IEとEdgeのスクロールのガタつきは楽しくカスタマイズしながら直そう! – More⁺Design – ホームページ制作
https://moreplus-design.com/blog/blog02/

タイトルに、IE とか Edge とありますが、Cordova アプリにも適用できました。

 

修正方法は、htmlに overflow: hidden;、bodyに overflow: auto; を指定することでした。
CSS で記述すると下記のとおりです。

html {
  overflow: hidden;
}
body {
  overflow: auto;
}

これを追加して再度アプリを実行したところ、スクロールした時のカクつきが解消され、実にスムーズに動きました!
私の環境では、HTML には特に指定なしで、body に overflow: hidden; が指定されていたので、それが悪さをしていたんですね。

 

以上、Cordova アプリでスクロールがカクつく時の対処法でした。
どなたかのご参考になれば幸いです。

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

【eslint】eslintで警告を自動修正するオプション

先週、同僚さんからeslintで間違った警告を修正する方法に–fixというeslintのオプションをつけて修正する方法を知りました。

eslintはバグの温床となりうるコーディングや書き方がレガシーなコードを検知すると状況に応じた警告を吐きまくります。

ぽちぽち潰すのも正解ですが、中にはそうでない警告も存在します。eslintの警告自体も頻繁に更新されている訳でないのでそんな中で

膨大なコードの場合は何もオプションを付けずに修正するとなると骨が折れます。

 

冒頭で紹介した–fixオプションは、短い記述でエラーを指摘する警告が間違っている場合に順番に修正してくれるのでこれを上手く使う

ことができればムダな警告の修正をすることなくコーディング時間をせつやくすることができます。

こんな感じでpackage.jsonのコマンドに追加します。これで設定は完了です。

 

<pre>"scripts": {
   "test": "echo \"Error: hoge\" && exit 1",
<span class="gd">   "lint": "eslint src/script.js"
</span><span class="gi">   "lint": "eslint src/script.js --fix"
</span>  },</pre>

 

このように万能な子ですが、全ての警告を修正できるという訳ではないみたいです。

では警告対象ってどうやって確認するかというと、まず公式に飛びます。ずらっとeslintが並んでいる中でレ点の隣にペンチのマーク

がついているものが修正可能eslintになります。

 

 

eslintは使ったことがあるのですが何のエラーがなんの理由で出ているか読み飛ばしていたので今回の–fixはエラーの中身を知るいい機会になりました。

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

【Laravel】LaravelでDataTables.jsを楽に使うためのパッケージlaratablesの紹介

 freshbitsweb/laratables: Ajax support of DataTables (Laravel 5.5 – Laravel 5.8) Demo @
 JavaScriptにはDataTables.jsというリッチな表を簡単に作成するライブラリがあります。

DataTables | Table plug-in for jQuery

お手軽に機能付きテーブルを作るJavaScriptライブラリDataTables – 株式会社シーポイントラボ | 浜松のシステム開発会社
 DataTables.jsの基本的な使い方は、あらかじめHTMLコード上にtableタグで値を埋め込んで置き、DataTables.jsを適用して並び替え機能、絞り込み機能、ページネーション機能をつける、です。これは本当に1時間もかからずにリッチな表を作れる様なシンプルないい造りのライブラリなのですが問題がありました。それはあらかじめHTMLに埋め込む以上、初期読み込みにとても時間がかかりやすい点です。常に総数の実体をブラウザの初期段階で取得する必要があるため、総数が万件ある様なデータを対象にすると長い読み込み時間や崩れたデザインが現れだします。
 この問題を解決するには、ajaxを用いて適宜必要なデータのみを取得する基本的でない使い方をするのが良い方法です。しかしこの場合、サーバ側でDataTables.jsの提供するインタフェースに合わせたデータ処理のロジックを作る必要がでてきます。せっかく楽できるライブラリであったのに残念なことです。laratablesはこのDataTables.js用のロジックをLaravel内で簡単に記述するためのパッケージです。
 使い方は簡単。composerでプロジェクトに追加して、

composer require freshbitsweb/laratables

 Bladeに次の様にHTMLにテーブルのヘッダ、DataTablesにajaxの宛先と取得データのプロパティ名を記述、

<table id="simple-datatable-example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Mobile</th>
            <th>Email</th>
            <th>Gender</th>
            <th>Country</th>
        </tr>
    </thead>
</table>

@push('scripts')
    <script>
        $(document).ready(function() {
            $('#simple-datatable-example').DataTable({
                serverSide: true,
                processing: true,
                responsive: true,
                ajax: "{{ route('simple_datatables_users_data') }}",
                columns: [
                    { name: 'first_name' },
                    { name: 'last_name' },
                    { name: 'mobile' },
                    { name: 'email' },
                    { name: 'gender' },
                    { name: 'country' }
                ],
            });
        });
    </script>
@endpush

 ajax宛先のコントローラに次の様にLaratables::recordsOf();を検索対象のモデルクラスを呼ぶだけです。

    /**
     * return data of the simple datatables.
     *
     * @return Json
     */
    public function getSimpleDatatablesData()
    {
        return Laratables::recordsOf(User::class);
    }

 これだけで次のデモページの一部、Simpleのテーブルの完成です。

Laratables
 デモページにある様に、データに無関係なカラム、データの格納されたテーブルに関連したテーブルのデータも使えます。全てを把握できていませんがgithubの説明の文量からしてDataTablesそのものより多機能そうです。

freshbitsweb/laratables: Ajax support of DataTables (Laravel 5.5 – Laravel 5.8) Demo @

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

ついにHUAWEIがGoogleにAndroid関連のサポート停止を言い渡される

今朝、衝撃のニュースが飛び込んできました。

Google、Huawei端末へのサービス提供を一部停止 既存端末には影響なし – ITMedia

アメリカでHuaweiの締め出しが決まってから様々な動きがありましたが、とうとう今後発売されるHuawei製端末へのGoogleによるAndroid向けの基本サービス群(Google Playや開発者サービス、GmailなどのGoogle謹製サービス)の提供が停止されることになったようです。

よくよく考えてみれば、Googleはアメリカに本社のある企業なのでこういった規制もあり得る話ではあったのですが、プラットフォームの提供元による名指しでの提供停止というのはなかなか聞いたことがなかったので、とても驚きました。

ちなみにMicrosoftもアメリカに本社を置く企業ですが、万が一Microsoftもこの流れに追従することになった場合、Huaweiに対するWindows OSの提供が停止することも考えられるため、もしそうなった場合は事実上Huaweiが自社製のPCを製造できなくなることになります。(Linuxディストリや独自のOSを積むのであれば別ですが…)

もっともHuaweiは”自給自足”をして対抗するとのことで、今後どのような対策を打ってくるのかは非常に興味深いです。

Google公式サービスへのアクセスがブロックされたとはいえ、Android自体はオープンソースのOSであり、今回の規制に影響されることなく引き続きソースの入手は可能なので、Amazon KindleのようにAndroidベースの独自のエコシステムを構築する可能性も十分考えられます。

とりあえず、現在販売されている端末までは今まで通りGoogleの公式サービスを受けることができるようなので、既にHuawei製スマホを購入したユーザーは、心配する必要はなさそうです。

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

【Cordova】「Current working directory is not a Cordova based project」エラーの対処法

新しいパソコンで現在開発中のプロジェクトを実行しようとしたときに遭遇したエラーです。
初期化されたPCだったので、色々設定などがされておらず、1から設定をし直していました。
で、Cordova アプリだったので、プラットフォームを追加しようと、下記のコマンドを実行した時にこちらのエラーに遭遇しました。

cordova platform add [プラットフォーム名]

エラーは「Current working directory is not a Cordova based project」というもので、要は現在のディレクトリは Cordova プロジェクトではないと言っています。

 

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

“Current working directory is not a Cordova based project”のエラーが表示されたらとりあえずルートにwwwフォルダを作成する。 – overmorrowのコメント / はてなブックマーク
http://b.hatena.ne.jp/entry/306218340/comment/overmorrow

GitHub で全く同じエラーについての投稿があったようで、それに対するコメントでした。
これによると、「Current working directory is not a Cordova based project」エラーに遭遇した場合、プロジェクトのルートディレクトリに「www」というディレクトリを作成すると解決できるとのこと。
そう言えば、このディレクトリが無かったですね…。

ということで、指示に従って www ディレクトリを作成後、再度 cordova platform add [プラットフォーム名] を実行したところ、問題なく実行できました!
…まあ、他のエラーが発生しましたが、これはこのエラーとは無関係なので割愛します。

 

以上、Cordova コマンドが実行できなかった時の対処法でした。
一発解決できる投稿にたどり着けて良かったです。
ご参考になれば幸いです。

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

【javascript】ページ読み込みを加速させるツール・LazyLoad

LazyLoadとは、scriptタグに定義することでグリッドなどで画像を大量に含んでいるページをその画像が位置している場所までスクロール

したところで初めて読み込むよう制御することができる便利なライブラリです。

 

画像を多用するサイトでは、よくjavascriptやcssを圧縮して読み込ませていますがそれでもまだ遅い若しくは画像が出てこないなど

難儀な問題が多く降りかかってきます。しかも数十枚の画像を一気に読み込むことでページがフリーズして動かなくなったりして

最悪そのページから離脱してしまうユーザーも少なからず存在します。サーバーにとっても多量の画像を送ることは多大な負担につながる

のでこのままではサーバーもユーザーも誰も得をしない宙ぶらりんな状態になってしまいますね。

LazyLoadライブラリは、ページスクロールをしてレイアウト上の範囲のみ画像を送るように命令することで余計な画像を読み込まずに

容量を確保することができるので上手く使うことができればページ速度の改善に大きく貢献してくれそうです。

自分は実装する前はnpmから取ってくるのかなとか実装するの大変そうとかめんどくさいイメージが纏わりついていましたが

とても簡単だったのでさくっと実装することができました。

とりあえずgithubからライブラリを入手。緑色のボタンを押してクローンをしてください。

 

jquery_lazyload-master.zipというファイルがダウンロードできたと思います。この中にあるjquery_lazyload-masterというフォルダの中に

lazyload.jsとlazyload.min.jsというファイルが入っていると思いますがそこはどっちを使ってもいいみたいです。

自分は無難にlazyload.jsファイルにしました。JQueryと一緒にheadタグの間に埋め込みます。JQueryはバージョン2以上が望ましいです。

 

<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
	
	<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
	
	<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"./lazyload.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>

 

これでLazyLoadを使うことができます。コード量が少ないので実装も楽々できました。とるあえずjavascriptでは実装することはできたの

ですがこれをreactと組み合わせたらもっと負担減らせるのにな~と考えております。

そもそもreactではほとんどのオブジェクトをpropとstateで扱うので出番はあるのかなと思っていますが実装することができれば

ネイティブにも遅れをとらない軽量アプリの開発できるのでぜひとも取り込む技術は取得しておきたいものです。

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

【Laravel】マイグレーションで扱うカラムにつける属性メソッドの読み取り

 Laravelにはデータベース定義を記述し、作成、ロールバックなどを行えるマイグレーション機能があります。このマイグレーションによるテーブル定義時にはカラムの属性を定義することが出来ます。
データベース:マイグレーション 5.5 Laravel#カラム修飾子
 例えば次です。

Schema::table('users', function (Blueprint $table) {
    $table->string('email')->nullable();
});
<a href="https://readouble.com/laravel/5.5/ja/migrations.html#column-modifiers">データベース:マイグレーション 5.5 Laravel#カラム修飾子</a>より引用

 これでメソッドnullableの動作によりカラムemailはnullを許すカラムになります。しかしnullable()メソッドの実態を見つけることは少し苦労を要します。
 素晴らしいide_helper(皮肉でなく本当にすごく便利)を生成する
barryvdh/laravel-ide-helper: Laravel IDE Helper
 を用いても、IDEはこのnullableへの道を見つけることが出来ません。
 これはメソッドnullrableが接続先のDBの種類によって動的に生成されているメソッドであるためです。
PHP: オーバーロード – Manual#メソッドのオーバーロード
 具体的に何が起きているかがわかる場所は、string()、integer()などの各カラム基本定義メソッドの返り値、ないし返り値が継承しているクラスvendor/laravel/framework/src/Illuminate/Support/Fluent.phpの中、そしてvendor/laravel/framework/src/Illuminate/Database/Schema/Blueprint.phpの中にあります。
 先のコードは

Schema::table('users', function (Blueprint $table) {
    $fluent = $table->string('email');
    /** @var Fluent $fluent */
    $fluent->nullable();
});

 となっており、Fluent内にnullable()は実装されていません。実装されていないメソッドが呼び出されようとする時、__call()が記述されているならば、__call()内部に記述された動作が実行されます。Fluentの__call()は次です。

    /**
     * Handle dynamic calls to the fluent instance to set attributes.
     *
     * @param  string  $method
     * @param  array   $parameters
     * @return $this
     */
    public function __call($method, $parameters)
    {
        $this->attributes[$method] = count($parameters) > 0 ? $parameters[0] : true;

        return $this;
    }

 Fluentのインスタンス内に与えられた属性を保持するのみです。この仕組みが理由で次の様なコードを書いてもバグは起きません。

Schema::table('users', function (Blueprint $table) {
    $table->string('email')->hogehoge();// 好きな名前でメソッドを呼び出せる
    $table->string('name')->nulable();// タイポしても気付かないかもしれないので、善し悪し
});

 $table->string(‘email’)->nullable();の様なカラム定義が繰り返される度にBlueprintのインスタンスである$tableはカラム定義のインスタンスであるFluentのインスタンスを新たに持ちます。クロージャ内の処理が終わった後、Schema::table()はBlueprint->build()を実行します。Blueprint->build()の中ではBlueprint->toSql()が実行されます。Blueprint->build()とBlueprint->toSql()の中身は次です。

    /**
     * Execute the blueprint against the database.
     *
     * @param  \Illuminate\Database\Connection  $connection
     * @param  \Illuminate\Database\Schema\Grammars\Grammar  $grammar
     * @return void
     */
    public function build(Connection $connection, Grammar $grammar)
    {
        // $connectionにデータベースとの接続、$grammarにデータベースの文法が入っている
        foreach ($this->toSql($connection, $grammar) as $statement) {
            $connection->statement($statement);
        }
    }
    
    /**
     * Get the raw SQL statements for the blueprint.
     *
     * @param  \Illuminate\Database\Connection  $connection
     * @param  \Illuminate\Database\Schema\Grammars\Grammar  $grammar
     * @return array
     */
    public function toSql(Connection $connection, Grammar $grammar)
    {
        $this->addImpliedCommands($grammar);// 文法クラスGrammarの中に入っているコマンドを取得する

        $statements = [];

        // Each type of command has a corresponding compiler function on the schema
        // grammar which is used to build the necessary SQL statements to build
        // the blueprint element, so we'll just call that compilers function.
        $this->ensureCommandsAreValid($connection);// SQLite用処理

        foreach ($this->commands as $command) {
// 文法クラス中のcompileから始まる名前のメソッドらの中に、要求された命令に対応するメソッドがあるならばそれを実行してSQL文の元の配列に追加
            $method = 'compile'.ucfirst($command->name);

            if (method_exists($grammar, $method)) {
                if (! is_null($sql = $grammar->$method($this, $command, $connection))) {
                    $statements = array_merge($statements, (array) $sql);
                }
            }
        }

        return $statements;
    }

 Bladeと同じです。特定のクラス中の特定の名前のメソッドがそのまま対応文法になっています。
【Laravel】Bladeの制御構文の探し方 – 株式会社シーポイントラボ | 浜松のシステム開発会社
 まだ終わりません。これでcompileCreateTable->getColumns->addModifiersと動きます。これが次です。

    /**
     * Create the main create table clause.
     *
     * @param  \Illuminate\Database\Schema\Blueprint  $blueprint
     * @param  \Illuminate\Support\Fluent  $command
     * @param  \Illuminate\Database\Connection  $connection
     * @return string
     */
    protected function compileCreateTable($blueprint, $command, $connection)
    {
        return sprintf('%s table %s (%s)',
            $blueprint->temporary ? 'create temporary' : 'create',
            $this->wrapTable($blueprint),
            implode(', ', $this->getColumns($blueprint))
        );
    }

    /**
     * Compile the blueprint's column definitions.
     *
     * @param  \Illuminate\Database\Schema\Blueprint $blueprint
     * @return array
     */
    protected function getColumns(Blueprint $blueprint)
    {
        $columns = [];

        foreach ($blueprint->getAddedColumns() as $column) {
            // Each of the column types have their own compiler functions which are tasked
            // with turning the column definition into its SQL format for this platform
            // used by the connection. The column's modifiers are compiled and added.
            $sql = $this->wrap($column).' '.$this->getType($column);

            $columns[] = $this->addModifiers($sql, $blueprint, $column);
        }

        return $columns;
    }

    /**
     * Add the column modifiers to the definition.
     *
     * @param  string  $sql
     * @param  \Illuminate\Database\Schema\Blueprint  $blueprint
     * @param  \Illuminate\Support\Fluent  $column
     * @return string
     */
    protected function addModifiers($sql, Blueprint $blueprint, Fluent $column)
    {
        foreach ($this->modifiers as $modifier) {
            if (method_exists($this, $method = "modify{$modifier}")) {
                $sql .= $this->{$method}($blueprint, $column);
            }
        }

        return $sql;
    }

 このaddModifiersでやっと終わりです。compileHogeHoge同様にmodifyHogeHogeが動きます。modifyHogeHogeがカラムに属性を追加するメソッドになります。modifyHogeHogeは文法クラスに詰まっています。文法クラスはvendor/laravel/framework/src/Illuminate/Database/Schema/Grammars以下に詰まっています。この中から使えるメソッドを抜き出し、ide_helperに追加すればIDEの自動補完が使えるようになります。例えばMySQLならば、次の様になります。

namespace Illuminate\Support{
    /**
     * @method Fluent after()
     * @method Fluent charset()
     * @method Fluent collate()
     * @method Fluent comment()
     * @method Fluent default()
     * @method Fluent first()
     * @method Fluent increment()
     * @method Fluent nullable()
     * @method Fluent srid()
     * @method Fluent storedAs()
     * @method Fluent unsigned()
     * @method Fluent virtualAs()
     */
    class Fluent {}
}

 よく使うuseCurrent()が抜けているので不完全です。少なくともこれで多少はカバーできます。

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