月別アーカイブ 10月 2019

著者:ym

HTTPS ページでの HTTP/HTTPS 混在

Google Chrome 79.0以降では、https (SSL) ページ上で http コンテンツがある場合は、動作を停止するようになるらしいです。

今までは鍵マークの異変だけでしたが、今度は JavaScript や、iframe 等を http (non SSL) でコンテンツを引用している場合もそもそも動作しなくなる形。

安全性も上がるし、スッキリして良いですね。

混合コンテンツの防止

https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content?hl=ja

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

【androidjava】xmlレイアウトの非表示プロパティについて

androidでは、レイアウトを非表示にしたい場合はinvisibleを使います。

これとinvisibleを組み合わせることで融通の利くUIを作ることが出来る

便利なやつなのですが、最近になってgoneプロパティの存在と

使い方を知りました。

 

どんな役割を持っているかというとまずinvisibleは、

レイアウトを見えなくするだけで実際にはそのレイアウトには

存在するのですが、goneはレイアウトそのものを消しています。

つまり消えた領域にはgoneになったレイアウトの

次のレイアウトが表示させることになります。

xmlではこのように記述します。

</pre>
<RelativeLayout
android:id="@+id/relativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:ignore="MissingConstraints">
<ImageView
android:id="@+id/image"
android:visibility="gone"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:layout_marginStart="80dp"
android:layout_marginEnd="80dp"
android:src="@drawable/image_icon" />
</RelativeLayout>

&nbsp;

//この後ろのレイアウトが押し出されて表示される
<pre>

今開発しているアプリはimageviewは真ん中

に置いているのですが、普段何もしない場合は表示しないようにしています。

view.invisibleを使うことでimageviewを消すことは

できるのですが、そのimageviewが見えなくなることで

スペースに不自然な空白が生まれ、アプリとしては

かなり不細工な出来になってしまいます。

ここでinvisible以外のプロパティであるgoneを指定すると

imageviewの次のレイアウトが押し込まれて隙間がなくなり

すっきりした見た目にすることができるのです。

 

ただしデカいandroidで表示させると灰色の余白ができるので

背景色を余白と一緒にするなど工夫も必要になってきます。

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

【Linux】xxdコマンドでバイナリファイルを16進数で表示、16進数からバイナリファイルを構築

 バイナリファイルを扱う時、特に面倒なのは読み書きにバイナリ専用の道具が必要になることです。16進数表記のテキストにすることで一気に操作しやすくなります。Linuxのコマンドを用いるならば次のようにこれを実現できます。リンクはDebianですが大体同じ感じで他の色々なLinuxデストリにも入っているようです(手元のGit Bashでもできました)。
xxd(1) — xxd — Debian unstable — Debian Manpages

xxd -p ファイル名

 これを使うだけで次の様にバイナリファイルが16進表記で表示されます。これを読みやすい様2^n文字区切りにして保存すればそれでOKです(自分の場合、リダイレクトでファイル化→手元のサクラエディタで弄る、としています)。そうすればバイナリファイルのフォーマットのリファレンスと快適ににらめっこして作業を進められます。

 似たような16進表記用コマンドにhexdump, odというものもあります。
 編集した後の16進表記ファイルをバイナリファイルに再構築する必要もあります。これは次のコマンドでできます。

xxd -r -p 16進表記ファイル名 出力されるバイナリファイル名

 オプションもろくに覚える必要もなく実に簡単です。

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

LaravelでIntervention/image で圧縮した画像をファイルに保存せずにバイナリで取得する方法

Laravelで画像ファイルの変換処理を行いたい場合、Intervention/image というComposerパッケージを使用すると非常に楽です。

詳しいセットアップ方法は、下記のサイトを参考にしてみてください。

さて、このIntervention/imageですが、使い方を解説している多くのサイトで、下記のように変換した画像を Intervention/image のsave()メソッドを使った保存方法を紹介しているところが多いです。

...
$image = Image::make(画像ファイルのパス); //画像をパスから取得
$image->resize(500, 500);

...

しかし今回僕が行いたかった処理は”元ファイルを変換して保存する”のではなく、”元画像を圧縮してサムネイル画像を作成してRestAPI経由でbase64でクライアントに投げる”ということをしたかったため、ファイルの保存は不要でした。

そこで色々調べたところ、 Intervention/image にファイルへ保存ではなく、バイナリストリームをそのまま吐き出すメソッドが存在していることを知りました。

Cannot save image intervention image. NotWritableException in Image.php line 138 -StackOverflow

$img = Image::make(画像ファイルのパス)->resize(500,500)->stream('jpg', 50)

このようにすると、$img変数に変換後の写真バイナリデータが吐き出されるため、あとはこのバイナリデータを

$img_base64 = base64_encode ( $img  );

のようにすると、base64に変換されたデータが入手できます。

これで、目的の動作をさせることがきました。

なお、Laravelでは

$image->save(画像の保存先パス);

すると権限の問題でエラーになってしまいます。

 NotWritableException in Hoge.php line 138: Can't write image data to path path/to/image.jpg 

Laravelで変換後のファイルを保存したい場合は、上の方法でバイナリデータを取り出した後、

Storage::put('保存先ファイルパス', $img);

のようにすれば、 Laravel上でも Intervention/image を使用して データを保存することができます。

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

【Cordova】create-react-appコマンドでCordovaアプリの開発環境を作る

今更感はありますが…備忘録としてまとめ。
タイトル通り、create-react-app コマンドと cordova のコマンドを使って、Cordova アプリの開発環境を作る方法です。
色々な記事がありましたが、個人的に一番良いと思ったのがこちらの Qiita の記事です。

Create React App & Cordovaでアプリをつくる環境を整える 2018年4月時点 – Qiita
https://qiita.com/bathtimefish/items/113154e89650b351b5b7

 

作成方法ですが、まずは create-react-appcordova をインストールします。

npm install -g create-react-app
npm install -g cordova

インストールが終わったら、任意の場所で下記のコマンドを実行します。

create-react-app [プロジェクト名]
cd [プロジェクト名]
npm run eject 

こちらのコマンドを実行すると、Create React App プロジェクトが作成できます。

3行目のコマンドは、react-scripts をディレクトリに展開するとのことでしたが…よく分かりませんでした。
なお、こちらを実行すると、? Are you sure you want to eject? This action is permanent. (y/N) と聞かれるので、問題なければ y を入力します。

上記のコマンドが完了したら、config/paths.js を開きます。
こちらのファイルに、appBuild: resolveApp('build') という記述があるので、ここを appBuild: resolveApp('www') に変更します。
次に package.json を開き、"homepage": "./", を追加します。
追加する場所は、"dependencies": { …… }, のすぐ上あたりです。

上記が全て完了したら、一旦一つ上のディレクトリに戻り、下記コマンドで cordova の環境を作成します。

cordova create [ディレクトリ名] [Bundle identifier/アプリケーションID] [プロジェクト名]

なお、ディレクトリ名は create-react-app コマンドで指定したプロジェクト名とは異なるものを指定してください。

こちらを実行したら、このプロジェクト内の config.xml を、上で作成した Create React App プロジェクトのディレクトリの直下にコピーします。

public/index.html を開き、下記の 3行を head 内に追加します。

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">

なお、1行目の meta http-equiv="Content-Security-Policy" は環境にあわせて適宜変更してください。

そして、同じく Create React App プロジェクト の src/index.js を下記のように修正します。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

const startApp = () => {
  ReactDOM.render(<App />, document.getElementById('root'));
  registerServiceWorker();
};

if(window.cordova) {
  document.addEventListener('deviceready', startApp, false);
} else {
  startApp();
}

なおこのままビルドすると、上記のコードにある registerServiceWorker.js がなくてエラーになるので、src ディレクトリ内に下記の内容で作成します。

// In production, we register a service worker to serve assets from local cache.

// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.

// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.

const isLocalhost = Boolean(
  window.location.hostname === 'localhost' ||
    // [::1] is the IPv6 localhost address.
    window.location.hostname === '[::1]' ||
    // 127.0.0.1/8 is considered localhost for IPv4.
    window.location.hostname.match(
      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
    )
);

export default function register() {
  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
    // The URL constructor is available in all browsers that support SW.
    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
    if (publicUrl.origin !== window.location.origin) {
      // Our service worker won't work if PUBLIC_URL is on a different origin
      // from what our page is served on. This might happen if a CDN is used to
      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
      return;
    }

    window.addEventListener('load', () => {
      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

      if (isLocalhost) {
        // This is running on localhost. Lets check if a service worker still exists or not.
        checkValidServiceWorker(swUrl);

        // Add some additional logging to localhost, pointing developers to the
        // service worker/PWA documentation.
        navigator.serviceWorker.ready.then(() => {
          console.log(
            'This web app is being served cache-first by a service ' +
              'worker. To learn more, visit https://goo.gl/SC7cgQ'
          );
        });
      } else {
        // Is not local host. Just register service worker
        registerValidSW(swUrl);
      }
    });
  }
}

function registerValidSW(swUrl) {
  navigator.serviceWorker
    .register(swUrl)
    .then(registration => {
      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        installingWorker.onstatechange = () => {
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              // At this point, the old content will have been purged and
              // the fresh content will have been added to the cache.
              // It's the perfect time to display a "New content is
              // available; please refresh." message in your web app.
              console.log('New content is available; please refresh.');
            } else {
              // At this point, everything has been precached.
              // It's the perfect time to display a
              // "Content is cached for offline use." message.
              console.log('Content is cached for offline use.');
            }
          }
        };
      };
    })
    .catch(error => {
      console.error('Error during service worker registration:', error);
    });
}

function checkValidServiceWorker(swUrl) {
  // Check if the service worker can be found. If it can't reload the page.
  fetch(swUrl)
    .then(response => {
      // Ensure service worker exists, and that we really are getting a JS file.
      if (
        response.status === 404 ||
        response.headers.get('content-type').indexOf('javascript') === -1
      ) {
        // No service worker found. Probably a different app. Reload the page.
        navigator.serviceWorker.ready.then(registration => {
          registration.unregister().then(() => {
            window.location.reload();
          });
        });
      } else {
        // Service worker found. Proceed as normal.
        registerValidSW(swUrl);
      }
    })
    .catch(() => {
      console.log(
        'No internet connection found. App is running in offline mode.'
      );
    });
}

export function unregister() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.ready.then(registration => {
      registration.unregister();
    });
  }
}

作成が終わったら、Create React App プロジェクトのディレクトリに移動し、npm run build を実行します。
エラーが出なければビルド成功です!

あとは、任意のプラットフォームを、下記のコマンドを使って追加してください。

cordova platforms add browser
cordova platforms add android
cordova platforms add ios

もちろん全部追加しなくてもOKです。

あとは cordova のコマンドを使ってプロジェクトを実行してください。
下記のコマンドを実行すると、ブラウザで実行できます。

cordova run browser

 

以上、create-react-app コマンドを使って Cordova アプリの開発環境を作る方法でした。
ほぼ Qiita の参考記事そのままなので、こちらを参考にして頂いても大丈夫です。

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

TLS1.0/1.1 の無効化に向けて

Google Chrome で TLS 1.0/1.1 が無効化に向けて動いている様です。

2020年1月13日にはChrome 79以降でTLS 1.0またはTLS 1.1接続のページに警告メッセージが表示されるようになる。

3月に一般リリース予定のChrome 81では、予定通りTLS 1.0/1.1のブロックが始まる。

https://security.srad.jp/story/19/10/04/2254213/

サーバ側としては既に TLS1.2 で受付している為、とくに影響を受けないが、古いブラウザ向も受け付ける為に現状では TLS1.0 や TLS1.1 も受付をしている。

予定を見ると、2020/1 月から Google Chrome で開始され、3 月には Firefox も TLS1.2 化となっている様です。管理画面など重要なサーバでは TLS1.0 ややめる等の対応をしているが、これからは TLS1.2 のみ受付へ変更していく予定です。

SSL Server Test

https://globalsign.ssllabs.com/

サーバがどのTLSプロトコルを受け付けているかチェックできるので、調べてみては。

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

【Webサービス】日本の伝統色の一覧が載っているサイト「和色大辞典」

今日はアプリのボタン色などを決めるときに参考にさせていただいているサイト「和色大辞典」のご紹介です。
ひと口に「」や「」と言っても色々あるので、こう言った色見本がずらっと並んだサイトは非常に重宝しています。
で、その中でも個人的に気に入っているのが、今回紹介する「和色大辞典」というサイトです。

サイトは下記からご確認ください。

日本の伝統色 和色大辞典 – Traditional Colors of Japan
https://www.colordic.org/w

 

サイトにアクセスすると、色見本がずらりと並んでいるのですが、色の名前が色々あって面白いんですよね。
中には全く聞いたこともないような名前もあって、伽羅色(きゃらいろ)とか初めて聞きました…。

また、色を選択すると、その色の配色パターンを確認することもできます。
パッと目についた「桔梗色」の配色パターンを見てみるとこんな感じ。

彩度を変更した色一覧や、明度を変更した一覧のほかに、色相環を元にした配色パターンも表示されています。
色相環の反対にある補色や、隣り合う類似色等も掲載されているので、アクセントカラーを選んだりするときにもちょうど良いですね。

こちらのサイトでは、和色の他にも洋色やパステルカラー、ビビットカラーの一覧も載っています。
また、今日のラッキーカラーなんてページもあるので、この中から色を選んでみるのも面白いかもしれません。

 

以上、WEB色見本のサイト「和色大辞典」のご紹介でした。
色を選ぶのって結構難しいので、こういったサイトで色の名前も含めて探してみるのも面白いと思います。

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

Laravel Eloquent の”fillable”の設定がめんどくさいときは”guarded”が便利

PHPフレームワークのLaravelには、DBと接続してデータをやり取りする仕組みとして”Eloquent”が実装されています。

Eloquentを使用すると、 基本的なDB操作であれば始めからメソッドが用意されているため、Modelに自分でメソッドを書かなくても簡単にデータが取得、保存ができるためとても便利です。

ただし、上記の備え付けのメソッドを使用する際は、DBの設定(テーブル名や主キーなど)をModelに記述する必要があります。

この設定の一つに、どのテーブルへのアクセスを許可するか、という指定があります。

この指定を行っておくことで、本来データを入れてはいけないテーブルに対して、誤ってModelからアクセスしてしまうことを防ぐことができます。

必須の項目なので、何らかの指定は必要になります。

個人的によくサイトで見かける方法で、Model内のクラスのブロックの頭に$fillableという変数を置くものがあります。

class Hoge extends Model {
    ....
    protected $fillable = ['user_name','mail_address','password'];
    ....

fillableでは何を指定すればいいのかというと、”Laravel側から触ってもよいカラム”を指定します。

これでも動作としては問題がないのですが、カラム数の多いテーブルなどが多かったりすると、正直めんどくさくなってきます…

実はもう一つ、操作可能なカラムを指定する方法があります。

$guarded 変数を用いる方法です。

class Hoge extends Model {
    ....
    protected $guarded = ['id'];
    ....

違いとして、fillableが所謂ホワイトリスト方式なのに対し、 guarded はブラックリスト方式です。

つまり、 guarded を指定した場合は”アクセスしてはいけない”カラムだけ記述すればOKです。

アクセスしてはいけないカラムが、アクセス可能なカラムよりも数が少ない場合はこちらの方が楽ですね。

LaravelのModelでは、fillableかguardedのいずれかが指定されていればOKとなっていますので、うまく使い分けて記述量を減らしていきましょう。

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

【PHP】提案中のObject Initializerとオブジェクト初期化の小技

 PHPでObject Initializerという記法が現在提案されています。
 PHP: rfc:object-initializer
 [RFC] Object Initializer – Externals
 [VOTE] Object Initializer – Externals
 その名の通り、オブジェクトの初期化に関する記法です。具体的には次の様な記述をします。

<?php
 
class Customer
{
  public $id;
  public $name;
  private DateTimeImmutable $createdAt;
 
  public function __construct()
  {
    $this->createdAt = new DateTimeImmutable("now");
  }
}
 
class Car
{
  public int $yearOfProduction;
  public string $vin;
}

<?php
 
$customer = new Customer {
  id = 123,
  name = "John Doe",
};
 
$car = new Car {
  yearOfProduction = 2019,
  vin = "1FTFW1CVXAFD54385",
};
// <a href="https://wiki.php.net/rfc/object-initializer">PHP: rfc:object-initializer</a>から引用

 単なる代入によるpublicプロパティの初期化をコンストラクタ外で行おうとする方法です。これによりコンストラクタのコーディング、プロパティの代入忘れ、引数の順番間違いから解放されます。
 これだけだと良いやり方に見えますが、提案の賛成:反対は2019/10/08 17:30(JST)時点で3:17です。投票に理由をコメントする必要はないのでスレを読み取って想像するしかありませんが、コンストラクタと共存すると怪しかったり、__setを介する直接代入でない部分の扱いだったり、今のPHPでも手間をかければ似たようなことができたりで賛成者は少ないです。

 PHPの既にある仕様で多数のプロパティを初期化する方法は多々あります。フレームワークを利用するとさらに増えます。自分がよく使うのは連想配列を用いたパターンです。

<?php
class Pos {
    public function __construct($attributes)
    {
        $this->lat = $attributes['lat'];
        $this->lng = $attributes['lng'];
        $this->x = $attributes['x'] ?? null;
        $this->y = $attributes['y'] ?? null;
    }
}

new Pos([
    'lat' => 35.658577,
    'lng' => 139.745451
]);

 連想配列にまとめることで引数を抑え、連想配列であるため引数の意味を理解しやすい、というものです。このやり方にはIDEの自動補完がまるで働かないという点で問題がありますが、程よく手軽に使える点と他クラスのarray変換ですぐ結び付けられる点で使用しています。他にもstdClassを使ったパターンやインタフェースとDTO(DataTransfarObject)を使うやり方もあります。後者は大がかりなものを扱う時、重用できます。

<?php
class Pos {
    public function __construct($attributes)
    {
        $this->lat = $attributes->lat;
        $this->lng = $attributes->lng;
    }
}

$args = (object)[
    'lat' => 35.658577,
    'lng' => 139.745451
];
new Pos($args);
interface PosArgsContract {
    public $lat;
    public $lng;
}
class Pos {
    public function __construct(PosArgsContract $attributes)
    {
        $this->lat = $attributes->lat;
        $this->lng = $attributes->lng;
    }
}

 初期化とは少し違いますがLaravelのFormRequestとEloquentをつなぐやり方として次のワンライナーがあります。

public function create(UserCreateRequest $request) {
    $user = User::create($request->validated());
}

 validatedメソッドの返り値はバリデーションを通過したリクエストのボディ全ての連想配列です。リクエストのキーをテーブルのキーと一致させることによって上記の記述でブラウザのリクエストからデータベースへのSQL発行まで一気に繋げられます。しかもバリデーション通過済みなので安全な値です。

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

【androidjava】editConfigurationを使って古いアプリを復活させる

リリースからしばらく経っている・またはリリース停止をしている

アプリは、editConfigurationを使うことでまたビルドできるようになります。

 

まず最初に、makeProjectの右隣にあるドロイド君の顔が書いてある

appというボタンでモジュールと名前を追加していきます。

 

 

尚、ここではappではなくビルド出来ない状態の「editConfiguration」と

書かれている状態を前提として書いています。

 

次に、templeteからAndroidAppを選択してokをおします。

 

 

すると、error: Module not specifiedというエラーがでますが、

これはfileメニューにあるSync Project with Gradle filesを

選択してgradleをアップデートすることで

解決できます。(押したらすぐにアップデート&デバッグが始まります)

 

ちなみにmoduleが見つからなかったのはgradle更新が止まっているためです。

月日が流れてライブラリの居場所が変わったかライブラリが消されたなど

理由はさまざまですが、androidのライブラリは変化が速いので

こまめにチェック・アップデートは必要ですね。

 

gradleのアップデートとビルドをしているので、少し時間がかかる・

または固まるといった動きをしますがここでエラーが

無ければ再度editConfigurationからモジュールを選択し直して

みて、そこでまたModule not specifiedがでなければ晴れてアプリを

ビルドできるようになります。

 

参考記->古いandroidアプリがビルド出来ない

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