月別アーカイブ 4月 2019

takahashi 著者:takahashi

Windowsのbashコマンドで起動するWSLのディストリビューションを切り替える方法

Windows Subsystem on Linux(WSL)では、複数のディストリビューションをインストールすることが可能になっていますが、cmdのbashコマンドから直接起動できるディストリビュージョンは1つのため、自分が使いたいディストリビュージョンがbashコマンドに紐づけされていない場合はちょっと不便です。

通常は一番最初に導入したディストリビュージョンがbashコマンドに 紐づけされますが、wslconfig コマンドを使うことで
紐づけるディストリビューションを切り替えることができます。

まず、現在の設定を確認してみます。

wslconfig /l
Windows Subsystem for Linux ディストリビューション:
kali-rolling (既定)
Ubuntu-16.04

このように、インストール済みのディストリビューションの一覧が表示されます。
このうち、(既定)と書かれているものがbashコマンドで起動するディストリビューションです。

これを切り替えるには、次のように入力します。

wslconfig /s ディストリビューション名

今回の場合は、例えば次のように指定してみます。

wslconfig /s Ubuntu-16.04

もう一度確認します。

> wslconfig /l

Windows Subsystem for Linux ディストリビューション:
Ubuntu-16.04 (既定)
kali-rolling

> bash -c "cat /etc/os-release"

NAME="Ubuntu"
VERSION="16.04.6 LTS (Xenial Xerus)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 16.04.6 LTS"
VERSION_ID="16.04"
HOME_URL="http://www.ubuntu.com/"
SUPPORT_URL="http://help.ubuntu.com/"
BUG_REPORT_URL="http://bugs.launchpad.net/ubuntu/"
VERSION_CODENAME=xenial
UBUNTU_CODENAME=xenial

無事切り替わりました。

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

【CSS】画像を正方形にトリミングする方法

以前にもエリアを正方形に描画する方法について紹介しましたが、今回は画像を正方形にトリミングする方法について。
レスポンシブ対応なので、横幅はパーセントで指定できます。

なお、前回の記事はこちらから。

【CSS】パーセントで指定した横幅に応じた正方形のエリアを描画する

Div 要素を正方形にしたい場合はこちらの方法で問題なく実装できます。

 

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

レスポンシブ対応 画像を正方形にトリミングするCSS « グリニッジ株式会社
https://www.greenwich.co.jp/blog-archives/p/7086

HTML のコードはこちら。

<div class="thumbs">
  <img src="[画像のパス]" />
</div>

CSS はこちら。

.thumbs {
  width: 100%;
  max-width: 150px;
  position: relative;
}
.thumbs::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.thumbs img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  object-fit: cover;
}

なお、サンプルコードから a タグを削除しているので、それに合わせて CSS を一部修正してあります。
コードは以上です!

前回ご紹介した正方形の描画方法では、画像を追加したときにデザインが崩れたので、画像を表示させたい場合はこちらの方法をご利用ください。

 

以上、画像を正方形にトリミングする方法でした。
是非ご活用ください。

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

【CSS】CSSMiniferでCSSを圧縮してアプリの負荷を軽減してみる

一つのファイルにCSSを大量に書くと、当然そのページは読み込みが遅くなり、UIとかも不安定な状態で表示されます。

自分の今修正しているアプリも、漏れなくその多量のCSSの影響を受けております。今更外部ファイルに書くわけにはいかないし

どうしましょうかと模索していた時にこのCSSMiniferを見つけました。

CSSMiniferって何ですかというと、CSSを圧縮して数行にまとめてくれる便利ツールです。CSSを圧縮することで、ページの読み込み

速度を改善させることができます。数百行にわたるCSSでも、このツールにかかれば5~6行で完結させることができます。

使い方はシンプルで、圧縮したいコードを左側のテキスト欄にコピペした後にminifyをするボタンを押すだけ。こんな感じに

仕上がります。(といっても詰め込みすぎて一見すると何書いてあるかわからない。)

 

後はこれをファイルにコピペするだけ。他にも色々なCSSコンプレッサーがありますが、CSSMinifyが一番ごちゃごちゃしていなくて

使いやすかったです。

というか他のツールだと微妙に記述が改変されていたりする(ダブルクォーテーションが消されていたりする)ので、最初からこいつ選んでおけばよかったんじゃないか・・・?と思いました。

webアプリの速度改善の場合大抵はJQueryやスクリプト読み込みの順番を修正するのが王道なのですが、CSSをたくさん書いた場合は

こっちに目を付けてみるのも正解ですね。正しく使えばアプリのリファクタリングに貢献してくれるのではと思います。

 

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

【Laravel】Cookieのsecure属性とLaravelビルトインサーバ

 Cookieにはいくつか属性がつけられます。この記事で注目するのはsecure属性です

The Secure attribute limits the scope of the cookie to “secure”
channels (where “secure” is defined by the user agent). When a
cookie has the Secure attribute, the user agent will include the
cookie in an HTTP request only if the request is transmitted over a
secure channel (typically HTTP over Transport Layer Security (TLS)
[RFC2818]).

Although seemingly useful for protecting cookies from active network
attackers, the Secure attribute protects only the cookie’s
confidentiality. An active network attacker can overwrite Secure
cookies from an insecure channel, disrupting their integrity (see
Section 8.6 for more details).RFC 6265 – HTTP State Management Mechanism

 要はsecure属性付きのCookieはHTTP通信では送信されず、HTTPS通信では送信されるようにするオプションです。これは特に通信を盗聴されることが致命的な情報、セッション情報(これを盗ると通信を乗っ取れる)などのために用いられます。

 Laravelはartisan serveコマンドによって組み込みサーバを動かせます。このサーバはPHPのビルトインウェブサーバの仕組みを利用しています。
PHP: ビルトインウェブサーバー – Manual
 実装コードは次です。

/** vendor/laravel/framework/src/Illuminate/Foundation/Console/ServeCommand.php */
    /**
     * Execute the console command.
     *
     * @return int
     *
     * @throws \Exception
     */
    public function handle()
    {
        chdir(public_path());

        $this->line("<info>Laravel development server started:</info> <http://{$this->host()}:{$this->port()}>");

        passthru($this->serverCommand(), $status);

        return $status;
    }
    
    /**
     * Get the full server command.
     *
     * @return string
     */
    protected function serverCommand()
    {
        return sprintf('%s -S %s:%s %s',
            ProcessUtils::escapeArgument((new PhpExecutableFinder)->find(false)),
            $this->host(),
            $this->port(),
            ProcessUtils::escapeArgument(base_path('server.php'))
        );
    }

 要は

$ cd ~/public_html
$ php -S [host]:[port] /hoge/fuga/project_root/server.php

をartisanで実行しやすくしているだけです。呼び出しているserver.phpが次です。

/** server.php */
<?php

/**
 * Laravel - A PHP Framework For Web Artisans.
 * @author   Taylor Otwell <taylor@laravel.com>
 */
$uri = urldecode(
    parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH)
);

// This file allows us to emulate Apache's "mod_rewrite" functionality from the
// built-in PHP web server. This provides a convenient way to test a Laravel
// application without having installed a "real" web server software here.
if ('/' !== $uri && file_exists(__DIR__.'/public'.$uri)) {
    return false;
}

require_once __DIR__.'/public/index.php';

 安全にpublic/index.phpを呼び出しているだけです。public/index.phpはHTTPリクエスト全てを受け取る窓口です。つまりLaravelの組み込みサーバはPHPのビルトインウェブサーバのラッピングであり、そのサーバとしての機能はほとんど素のPHPのビルトインウェブサーバの素のままです。
 このためPHPのビルトインウェブサーバの不便な点はLaravelのビルトインサーバの不便な点と言えます。業務用web開発において特に不便な点はHTTPSによるセキュアな通信が出来ない点です。


 セキュアな通信ができないということは、セキュアな通信でなければ渡されない情報を使えない、ということです。その様な情報には冒頭で述べたSecure属性がtrueなCookieが含まれます。またセキュアなcookieであるべきものには盗聴されるとセッションの乗っ取りを容易にする情報であるセッション情報が含まれます。これによりLaravelビルトインサーバ上ではセキュアなプログラムを組んだままログイン情報を持ちまわせません。Laravelビルトインサーバではログインした状態でブラウザでどうこうすることができません。

 書いている途中で気づきましたが、artisan serveにはオプションがあります。

artisan serve --env=notsecure

 このように記述すると、Laravelは.env.notsecureの環境変数を読み込んでビルトインサーバを立ち上げます。.env.notsecureを読んだ時限定でHTTPSとHTTPを同等に扱えるようなオプションとコードを記述すればビルトインサーバでも大過なくテストできそうです。ただCSRFがらみは念入りにセキュアにされてるっぽそうな。
 とはいえ業務を考えた場合、コードには十分に安全なプログラムであることが要求されます。結局のところセキュアなことを確認するためにビルトインサーバを用いることはできないので、マシン本体、仮想マシン、外部サーバなりなんなりにapacheなどの運用状態と同等の環境を用意するのが業務としては安全で確実そうです。

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

[備忘録]dockerインストール手順(CentOS7)

参考:CentOS7にDockerをインストールする – Qiita
Docker Composeのインストール方法(CentOS7.3) – Qiita
CentOS7 に pip と awscli をインストール -set setting reset

#docker-ce
sudo yum remove docker docker-common docker-selinux docker-engine
sudo yum install -y yum-utils device-mapper-persistent-data lvm2
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
sudo yum makecache fast
yum list docker-ce.x86_64 --showduplicates | sort -r
sudo yum install docker-ce-17.06.0.ce-1.el7.centos
sudo yum install docker-ce
sudo systemctl start docker
sudo systemctl enable docker
sudo docker run hello-world #動作テスト

#docker-compose
sudo yum install epel-release
sudo yum install python-pip
pip install docker-compose

殆ど上記のコマンドをそのまま実行するだけで最低限のセットアップはできました。

すんなり入ってくれたのでうれしいですね。

#Core OSも試してみたのですが仮想マシン上でのブートでコてたので、こっちの方が簡単かもですね…

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

bind アップデート

bind の脆弱性情報が JPRS や JPCERT から出ていたので、アップデートを行いました。

長期のサポートバージョンを使用しているのですが、どうやら python を要求するようになったみたいで、./configure 実行時にエラーを吐き出しました。

ルーチン化した作業ではあるけど、つまずくと調査が必要になります。調査の結果としてはデフォルトが with-python に変わった様なので、without-python 指定でスルーしました。

–without-python

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

【react-CSS】keyframesを使ったスライド動作

ページの読み込みの際にスライドしたら体感速度ってどのくらい減るだろうと思い試しにreactでkeyframesを使ったページスライド

機能を作ってみました。なぜ作ったかというと、某ブログとかをスマホで見ていてボタンを押した後何も起こらない間が数秒続くときがあ

り、開発者としてどうしてもそこの動作が見逃せなかったのがきっかけです。もしうまいこと動作出来たら今開発しているアプリにも

導入して少しでも速度改善のピースとして役に立てたいと思っています。

keyframesとは、特定のページがアニメーション開始から終了するまでの動作を細かく指定できるCSSプロパティです。このプロパティは

まず始まりを0%、終わりを100%で定義し、その間の%ならば自在に動きをつけることができます。

通常のstyle定義のcssでは手が届かないようなところの処理もこのプロパティでこと細かく設定できるので、滑らかなwebアプリを作りたい

と思ったらこれからはこいつに頼ればいいんですね!

reactのパッケージであるCSSTransationでも細かい動作が期待できますが、こっちはよりreact色が強い書き方をしてるのでどっちを選ぶか

は経験とお好みで決めることになりそうです。

javascript↓


import React, { Component } from 'react';
import {BrowserRouter as Router, Switch, Route, Redirect, Link, NavLink, withRouter} from 'react-router-dom'
import ReactDOM from 'react-dom'

class Login extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);

this.state = {
//何か書く
}
}

handleClick(e) {
e.preventDefault();
try {
this.props.history.push({
pathname: "/Signup",
})
} catch (err) {
}
}

render() {
return (
<div>
<div>
<button onClick={this.handleClick}>新規登録</button>
</div>
</div>
);
}
}

export default Login;

css↓


@keyframes SignUp {
0% {
opacity: 0;/* 透明 */
transform: translateX(1500px);/* X軸方向に1500px */最大限
}
100% {
opacity: 30;/* 不透明 */
transform: translateX(0);
}
}

.SignUp {
animation-duration: 0.5s;/* アニメーション時間 */
animation-name: SignUp;/* アニメーション名 */
animation-iteration-count: 1;/* アニメーションを一回だけ動かす

reactで実現させたいのでこんな感じに書いてみました。keyframesの後ろに名前SignUp(なんでもいい)を定義して、そのすぐ下で

今定義したSignUpに関するアニメーションを設定しています。コードの整理が少しめんどくさいですが、keyframesと組み合わせることで

簡単に独自のアニメーションを作ることができます。

今は別々のファイルですが、同じファイル内に書くにはどうしたらいいんだろうと模索中です。(cssは可読性を重視したいため)

今回は簡単なシンプルなサンプルを作っただけでしたが、こだわり次第でいくらでも発展させられるのでこれからも注目していきたい

と思います。

 

 

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

最適化問題のための簡易学習

 最適化問題とは、任意の関数の出力値が最大、もしくは最小となる引数は何か、という問題です。任意の関数が単純な形、例えば次の図の様なきれいな谷の場合は解を陽に求める(試行することなく一発で求められる)ことが出来ます。

 しかし現実の問題はもっと複雑です。引数は多く、関数の出力は多峰性を持ちます。
 それでもとりあえず関数と引数さえ用意できれば(深く取り組むなら関数を考えること、関数を作ることに相当労力がかかります)、関数の出力を評価することはできます。
 今日まで考えられてきた機械学習手法はより正確な関数を用意し、より早くに正確に最大、最小となるパラメータを見つけるためのものです。この記事で考えるのは、より早くに正確に最大、最小となるパラメータを見つける、という部分を無視し、単純な乱数で最大、最小に近づく方法です。

# 最小問題について
def main():
    params = Params() # 引数オブジェクト。より適した値らが入る
    for i in range(0, 1000): # 雑に回す
        p_key, p_value = get_rand_param() # なにか値を引っ張ってくる。ここの動きを正確にすると機械学習になる
        new_val, new_params = get_eval(params, p_key, p_value) # 関数に引数を入力。この関数を正確にすると機械学習になる
        params = new_params if new_val < val else params # 評価値が前回の結果より良いならば引数更新

 具体的な関数の中身は書いていませんがこれを拡張すると機械学習らしいことができます。最終的に最も良いものを選んでいますが、このままだと引数がランダムなので学習感ないですね。

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

【Android】Google Chromeを使ってWebViewページのデバックを行う方法

今後も使えそうだと思ったので、備忘録としてまとめ。
Google Chrome ブラウザを使って Android の WebView ページをデバックする方法についてです。
ブラウザ 上で見ると正常に動いているのに、Android の WebView で開くとマップのアイコンが表示されない不具合に悩まされていたので、早速導入。

参考にさせていただいたサイトはこちら。

Chromeを使ったAndroid WebViewページのデバッグ|レコチョクのエンジニアブログ
https://techblog.recochoku.jp/2445

 

まず、Chrome でのデバックを行うために、Android の WebView ページに下記の設定を追加します。

WebView.setWebContentsDebuggingEnabled(true);

なお、WebView のページは、多少バグはあるにしろ、既に Web ページが表示できているものとして扱っています。

参考サイトでは、下記のように書かれていましたが、その通りに書いたところ、Android Studio から、その if 文で囲む必要はない!と怒られてしまったので削除しました。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

アプリへの設定は以上です。
あとは通常通りの手順で、ビルド → 実機で実行します。

アプリが実行出来たら、Google Chrome で chrome://inspect にアクセスします。
すると、下記のような画面が表示されると思うので、デバックしたい端末のモデル名に一致する項目の「inspect」を選択します。

そうすれば、見慣れたデバックツールのウィンドウが表示されるので、それを使ってデバッグを行います。

これで Web ページ部分のエラーのみを確認できるので、かなり便利です。
またこれにより、不具合があるページでどうやら jQuery が読み込めていないのではという疑惑が浮上。
…WebView で表示しているページをブラウザで見てもこんなエラーは発生していないのに!
ということで、引き続きデバック頑張ります。

 

以上、Google Chrome で Android の WebView ページのデバックを行う方法でした。
導入も Android アプリに一行追加するだけなので、とても簡単です。
WebView のデバックでお悩みの方がいましたら、参考にしていただければ幸いです。

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

【Android】WebViewでLeafletのアイコンが表示されない【未解決】

タイトルにもある通り、未解決です…。
Android の WebView で地図が含まれている Web ページを表示しているのですが、何故かアイコンが表示されません。
Web ページをブラウザで表示してみると、正しく表示されるので、恐らく Android の設定かな?と思い、調べています。

 

で、試してみたのが WebSettings での設定変更です。

WebSettings|Android Developers
https://developer.android.com/reference/android/webkit/WebSettings.html

JavaScript を有効にする setJavaScriptEnabled メソッドは指定されていたので、それ以外を調査。
で、他の記事を参考にしながら、下記の 3つを追加しました。

webSettings.setAllowFileAccessFromFileURLs(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);
webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

上記の設定では、file スキームによるアクセスを許可にし、https/http 混在コンテンツを表示できるようにしています。
…が、これでもダメでした…。

ブラウザ上では発生しない、「Uncaught ReferenceError: jQuery is not defined.」エラーがあったので、てっきり何かがブロックされているのが原因かと思ったのですが…。
次は jQuery のエラーから攻めてみたいと思います。

 

以上、Android の WebView で地図が含まれている Webページを表示できないエラーでした。
引き続き調査し、解決出来たら改めて紹介したいと思います。

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