Huawei P10 Liteのカメラ

業務でAndroid端末が必要になって買いました。26000円。 動作はサクサク、ingressもサクサク動きます。

さてカメラをiPhone 6sと比較してみました:

f:id:thebaker:20180201195043p:plain

上がiPhone 6s、下がP10 Liteです。 パット見、P10 Liteのほうが綺麗ですよね。

ただ、暗部を見てみるとiPhoneのほうが解像しています:

左がiPhone 6s、右がP10 Lite:

f:id:thebaker:20180201195459p:plain

米国の州のSQLデータ

ご自由にご利用ください。country_idは1にしています:

INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (1,'Alabama','AL',1,990);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (2,'Alaska','AK',1,980);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (3,'Arizona','AZ',1,970);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (4,'Arkansas','AR',1,960);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (5,'California','CA',1,950);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (6,'Colorado','CO',1,940);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (7,'Connecticut','CT',1,930);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (8,'Delaware','DE',1,920);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (9,'Florida','FL',1,910);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (10,'Georgia','GA',1,900);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (11,'Hawaii','HI',1,890);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (12,'Idaho','ID',1,880);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (13,'Illinois','IL',1,870);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (14,'Indiana','IN',1,860);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (15,'Iowa','IA',1,850);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (16,'Kansas','KS',1,840);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (17,'Kentucky','KY',1,830);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (18,'Louisiana','LA',1,820);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (19,'Maine','ME',1,810);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (20,'Maryland','MD',1,800);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (21,'Massachusetts','MA',1,790);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (22,'Michigan','MI',1,780);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (23,'Minnesota','MN',1,770);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (24,'Mississippi','MS',1,760);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (25,'Missouri','MO',1,750);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (26,'Montana','MT',1,740);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (27,'Nebraska','NE',1,730);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (28,'Nevada','NV',1,720);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (29,'New Hampshire','NH',1,710);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (30,'New Jersey','NJ',1,700);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (31,'New Mexico','NM',1,690);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (32,'New York','NY',1,680);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (33,'North Carolina','NC',1,670);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (34,'North Dakota','ND',1,660);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (35,'Ohio','OH',1,650);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (36,'Oklahoma','OK',1,640);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (37,'Oregon','OR',1,630);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (38,'Pennsylvania','PA',1,620);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (39,'Rhode Island','RI',1,610);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (40,'South Carolina','SC',1,600);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (41,'South Dakota','SD',1,590);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (42,'Tennessee','TN',1,580);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (43,'Texas','TX',1,570);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (44,'Utah','UT',1,560);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (45,'Vermont','VT',1,550);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (46,'Virginia','VA',1,540);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (47,'Washington','WA',1,530);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (48,'West Virginia','WV',1,520);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (49,'Wisconsin','WI',1,510);
INSERT INTO states (id, name, abbrev, country_id,display_order) VALUES (50,'Wyoming','WY',1,500);

CakePHP3:URLのマッピング(ルーティング)

仮に、こちらのURLを:

/Japan/Posts/view/10

PostsControllerviewアクションにマッピングしたいとします。 (つまりJapanってのはURLに入っているけど捨てることになります)

この場合、routes.phpに次を追加します:

    $routes->connect('/:country/Posts/view/:id',
                     ['controller' => 'Posts', 'action' => 'view'],
                     ['id' => '\d+', 'pass' => ['id']]

3.4系の場合です。3.5系の場合は書式が異なります:

https://book.cakephp.org/3.0/ja/development/routing.html#id6

CakePHP3:モバイル端末を検出する

サーバ側でモバイル端末を識別するニーズがあり、MobileDetectというのを導入してみました:

mobiledetect.net

導入方法ですが、composerを使うと簡単です:

composer require mobiledetect/mobiledetectlib

Cakeの中のプログラムから利用するには、useを使います。 今回はMobileDetectのラッパーのコンポーネントを作成しました:

<?php
namespace App\Controller\Component;

use Cake\Controller\Component;
use Cake\Controller\ComponentRegistry;
use Mobile_Detect;

/**
 * MobileDetectWrapper component
 */
class MobileDetectWrapperComponent extends Component
{

    private $mobileDetect;

    /**
     * Default configuration.
     *
     * @var array
     */
    protected $_defaultConfig = [];

    public function initialize(array $config)
    {
        $this->mobileDetect = new Mobile_Detect;
    }

    public function isMobile()
    {
        return $this->mobileDetect->isMobile();
    }
}

あとはコントローラからこのように呼び出してあげると、モバイルか否かの結果が$isMobileに入ります:

$isMobile = $this->loadComponent('MobileDetectWrapper')->isMobile();

jQuery:Cycle2プラグインでスライダーを実現する

Cycle2というとても使いやすい、jQueryプラグインがあります。 幾つか詰まった点があったのでここで紹介します。

基本的な使い方

まず、jQueryとこのプラグインを読み込みます:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>

次に画像タグを以下のように<div>で括ります:

<div class="cycle-slideshow">
    <img src="http://malsup.github.io/images/p1.jpg">
    <img src="http://malsup.github.io/images/p2.jpg">
    <img src="http://malsup.github.io/images/p3.jpg">
    <img src="http://malsup.github.io/images/p4.jpg">
</div>

imgをaタグで囲みたい場合

data-cycle-slides属性を使って<a>タグをスライド対象にするように指定します:

<div class="cycle-slideshow"
     data-cycle-slides="a">
     <a href="#">
       <img src="http://malsup.github.io/images/p1.jpg">
     </a>
     <a href="#">
       <img src="http://malsup.github.io/images/p2.jpg">
     </a>
</div>

オーバーレイとキャプションを表示する

<div class="cycle-overlay"></div>を追加し、<a>タグの属性に表示内容を設定します:

<div class="cycle-slideshow"
     data-cycle-slides="a">
     <div class="cycle-overlay"></div>
     <a href="#"  data-cycle-title="タイトル1" 
            data-cycle-desc="説明1">
       <img src="http://malsup.github.io/images/p1.jpg">
     </a>
     <a href="#"  data-cycle-title="タイトル2" 
            data-cycle-desc="説明2">
       <img src="http://malsup.github.io/images/p2.jpg">
     </a>
</div>

<a>を使ってない場合、属性は<img>タグに指定してください

横にスライドする

data-cycle-fxでこのように指定します:

<div class="cycle-slideshow"
     data-cycle-fx="scrollHorz"
>

横にスライドするのが、aのタグだとうまくいかない場合

scrollHorzを指定すると、通常は画像が右から左にスクロールしますが、<img>タグを<a>タグで囲っている場合、 画像が右上から拡大する感じで広がります。これはどうもバグっぽいのですが、以下の次のCSSを追加すると治ります:

<style>
.cycle-slideshow a{
  width: 100%;
  height: auto;
}
</style>

WordPress:アクセス数の多いページをサイドバーに表示する

お客様より、アクセス数の多いページをサイドバーに表示したいとの相談があり、調査してみました。 Wordpress Popular Postsというプラグインを使うと、実現できます。

アクセス数を計測する対象を固定ページと投稿の両方、固定ページだけ、投稿だけから選べます。 固定ページの場合、カテゴリを限定できない、除外するページを選べないなど制限が多いです。

WordPress:固定ページをカスタマイズする

固定ページに投稿の一覧を差し込みたいな、と思っていてやり方を探っていました。 大きく分けて3つ、やり方があります:

1) page-ID.phpを作成する

wp-content/themes/テーマ名ディレクトリに移動すると、page.phpというファイルがあります。 これをコピーしてpage-ID.phpというファイルにします。IDは、固定ページのIDを指定します。

作成したpage-ID.phpを編集すれば、このページだけのカスタマイズを行えます。

2) page-スラッグ名.phpを作成する

1)と似ていますが、page.phpをコピーしてpage-スラッグ名.phpを作成し、編集します。 スラッグの値は固定ページを作成・編集する際に「表示オプション」から指定します。

3) page.phpをコピーしてテンプレートを作る

page.phpをコピーして、my-template.phpといったようなファイルを作成します。 そしてmy-template.phpの冒頭に次の行を記述します:

<?php
/*
Template Name: 俺のテンプレート
*/
?>

すると、固定ページの作成時にテンプレート一覧からこのファイルを選べるようになります。