月別アーカイブ 1月 2019

takahashi 著者:takahashi

一つの画像から色ごとにレイヤーを分けてくれるサービス”Unbrending”

フォトエディタなどで、複数の色を混是ることは簡単ですが、その逆で、一つの画像から色ごとにレイヤーを分離する、というのは特殊な処理なようですが、それを行ってくれるWebサービスがあります。

Unblending Web App

実際に使ってみました。

自分の持っている画像をアップロードすることもできますが、今回はテストということで下の”サンプル画像を使ってUnbrendingを試す”でテストしてみます。

“サンプル画像を使ってUnbrendingを試す”
をクリックすると、上記のようにいくつかの設定が追加されます。

この状態で、”プレビュー”ボタンをクリック。

すると指定された色ごとにレイヤーを分離してくれます。

この状態で”ダウンロード”をクリックすると

しばらく処理を行った後、各色ごとに分離された画像をzip形式で入手することができます。

これができるとどのようなことに使えるのか、というのが公式サイトの動画で紹介されています。

より表現の幅が広がりそうですね…!

気になった方は是非試してみてはいかがでしょうか!

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

長方形の画像をCSSだけで真円に表示

 画像を円形にして出力するためにはborder-radius:50%のようにborder-radiusが指定されがちです。画像が正方形の場合はこれだけでもきれいな円形になります(サンプル1)。しかし画像が長方形の場合、角が丸くなりますが画像サイズに合わせた楕円になります(サンプル2)。どのような画像であっても真円にしたい、という時は背景画像の仕組みを用いることで実現できます(サンプル3)。
 このサンプル3は次のCSSコードで実現できます。

.img-box {
  background-image:url(https://lorempixel.com/400/300/animals/1/est);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center,center;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 50%;
}

 width,height,padding-bottomの部分で親要素と同じ横幅、親要素の横幅と同じ高さの空白で埋め尽くされた(paddingのパーセントは親要素の”横幅”基準)divを作ります。このdivをborder-radius:50%をかけることで親要素の横幅と同じ長さの直径を持つ円形のdivにします。

 backgroundが接頭辞のコードで背景画像として、縦横比が崩れず端が切り取られる1枚の画像を上下左右中央に配置します。
background-size | MDN

cover
画像の縦横比を崩すことなく、画像ができるだけ大きくなるよう拡大縮小します。画像の縦横比が要素と異なる場合、空き領域が残らないように上下または左右のどちらかを切り取ります。

background-repeat | MDN

no-repeat 画像は繰り返し描画されません (したがって背景画像描画領域が完全に埋め尽くされるとは限りません)。背景画像の位置は background-position CSS プロパティで定義されます。

background-positiont | MDN

center のキーワード値の場合は、画像を中央揃えにします。


 この二つを組み合わせて真円の形の画像を表示できます。

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

【javaScript】constとletの違いを肌で知った

前回記述した、ファイルをアップロードするソースコードを少しいじってmyImageを外の関数からも

参照・代入ができるようにしたかったのですが、ここで少しハマりました。

エラーを見ると、Uncaught TypeError: Assignment to constant variable.at FileReader.reader.onload

かみ砕いてみると「onload内で無効な割り当てがありました。」

一瞬狼狽えましたが、変数の宣言はしていないので間違いなくmyImageに原因があると思いました。

調べてみると、どうやらconstは再代入を許さないらしく、一回初期化をしてしまっているのでもうmyImageには

何も入れられませんという意味を持っていたみたいです。

再代入が許されるのはletとverのみで、こちらは何回も代入することはできますが、何回もアクセスして変数が

目まぐるしく変わるので、メンテンナンスに手こずりそうなので大規模なプロジェクトではやはりconstを

使った方が安全性の面では最良だと感じました。

それでもletは二重の宣言を禁止したりアクセスの幅を狭めたりとconstともそこまで性質は変わらないので、ぎちぎちに

変数のアクセスをしたくないけど安全性を保ったコードを書きたいというかたには向いているかなと感じました。

<script>
      const target = document.getElementById('upload');
    //window.onloadにアクセスができる
      <span style="color: #0000ff;">let myImage = '';</span>
      target.addEventListener('change', function (e) {
        const getImg = document.getElementById('myImage');
        const file = e.target.files[0]
        const reader = new FileReader();
        reader.onload = function (e) {
          getImg.height = 200;
          getImg.src = e.target.result;
          myImage = getImg.src;
          localStorage.setItem('image', myImage);
          console.log(myImage);
        }
        reader.readAsDataURL(file);
      }, false);
      window.onload = function(){
        document.getElementById("submit").addEventListener("click", function(){
          console.log(myImage);
          alert("ボタンが押されました");
        });
      }
    </script></pre>
<pre>

参考にさせていただいたサイト→varじゃだめなの?? constとletを使おう!

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

【React】ReactでSVGを表示するためにuseタグを使うときの注意点

まさに今回私が悩んだ…というか、方法が分からず検索したところです。
React を使ってサービスを開発しているのですが、デザインを入れ込んだところ、SVG を描写しているuseタグでエラーが発生しました。

追加しようとしたコードはこちら。

<svg><use xlink:href="[SVGファイル]"/></svg>

HTMLページでは問題なく動作しますが、use タグの xlink:href が React ではエラーになるようでした。

 

で、調べたところ、こちらの記事がヒットしました。

React で SVG を描画するための use タグでは xlinkHref を使う – valid,invalid
https://ohbarye.hatenablog.jp/entry/2018/03/27/212304

まさに私の知りたかったことが書いてありました!
React で useタグを用いる場合は、xlink:hrefxlinkHref に書き換える必要があるとのこと。
具体的には下記のとおりです。

<svg><use xlinkHref='[SVGファイル]'/></svg>

で、このように修正したところ、問題なく動作しました!

 

以上、ReactでSVGを表示するために use を使うときの注意点でした。
React って、意外とこういうちょっとした修正が多いので、うっかりミスがたまにおきます。
特に class を className にする必要があるとか…これを直し忘れてエラー!をまだまだやらかします。
気を付けなければいけませんね。

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

EUのGDPRデータ移転規則で日本は例外へ

欧州委員会が日本を「データ保護水準が十分な国」とし、域内の個人データを持ち出しできる移転先として正式に認定する。欧州に拠点をもつ日本企業が現地法人の人事情報を一括管理できるようになるなど、企業活動の円滑化につながる。

https://www.nikkei.com/article/DGXMZO4032267022012019MM8000/

日本は「データ保護水準が十分な国」???ほんと?という部分もありますが・・・EUとの間で決められた様子です。

これでこんな恐ろしいことは避けられるので、少し安心はできます。

フランスの「情報処理と自由に関する国家委員会」(CNIL)は21日、米アルファベット傘下のグーグルに5000万ユーロ(約62億3300万円)の制裁金を科したと発表した。

https://www.bloomberg.co.jp/news/articles/2019-01-21/PLP9M16TTDS001

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

【html-css-javascript】PureCSSで無骨なページをそれっぽくする

前回は、PureCSSで色々いじくり倒していましたが、今回はちゃんとしたアプリっぽい見た目で作ってみました。

今回は、imgタグとinput fileを使った画像を表示するページを作りました。備忘録ぽいですがご容赦ください。

input fileといえばボタンを押すと画像ギャラリーに飛ぶあのコンテンツです。

メジャーなので知らない人はいないと思いますが、そのままこいつを使うとどうも雰囲気が堅いというかなにも

手を付けていないようで野暮ったいです。

せっかくなので前回でも使ったこのPureCSSで今風のボタンにかえてあげましょう。

html↓

    <div class="thumb-wrapper">
      <img id='myImage'>
    </div>
    <div class="button-wrapper">
      <span class="label">
        画像アップロード
      </span>
        <input type="file" name="upload" id='upload' class="upload-box" placeholder="Upload File">
    </div>

CSS↓


/*画像が表示されるコンテンツの位置調整*/
    .thumb-wrapper {
      position: relative;
      height: 50px;
      text-align: center;
      margin: 20% auto;
    }
/*ボタンの幅と位置の調整*/
    .button-wrapper {
      position: relative;
      width: 150px;
      text-align: center;
      margin: 20% auto;
    }
/*ラベルの設定*/
    .button-wrapper span.label {
      position: relative;
      z-index: 0;
      display: inline-block;
      width: 100%;
      background: #00bfff;
      cursor: pointer;
      color: #fff;
      padding: 10px 0;
      text-transform:uppercase;
      font-size:12px;
    }
/*実際に働くボタン*/
    #upload {
        display: inline-block;
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 50px;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
    }

JavaScript。↓

    <script>
      const target = document.getElementById('upload');
      const img = document.getElementById('myImage');
      target.addEventListener('change', function (e) {
        const file = e.target.files[0]
        const reader = new FileReader();
        reader.onload = function (e) {
          img.height = 200;
          img.src = e.target.result;
          console.log(img);
        }
        reader.readAsDataURL(file);
      }, false);
    </script>

script側は従来の画像を表示させる機能だけなので割愛させていただきます。

今回使うオブジェクトは4つ。一つ目は画像が表示された時の場所を調整するCSSです。画面中央にくるように

してありますが、このコンテンツは特にPureCSSの恩恵を受けていないのでそこまで語るまでもないです。

二つ目のCSSははボタンの幅を調整しています。これもアップロードするボタンの位置を決めているだけで

こちらも特にPureCSSの影響は受けません。

三つ目のCSSですが、ここでボタンの基本的な部分を生成しています。

button-wrapper span.labelを指していますが、これはbutton-wrapperタグの中のspan.labelを操作しますよという意味合いに

なります。divの中にspanで定義されているので、それが操作の対象になります。

ここでbackgroundやwidthで調整するとこんな感じに仕上がります。

角があった従来のフォームよりクリーンな出来になりました。

 

最後の#uploadオブジェクトですが、こちらは本来あったあのフォームをposition: absoluteを使い

上のボタンで被せるような役割をもっています。

htmlのinput fileのIDにも書いてあるとおりこちらが本体となっており、前のフォームがラベルに隠れて作業をしていたと考えると

分かりやすいです。

最後にここで実装したフォームの全体画像を載せて終了になります。

 

今回も公式を参考にしたコードです。PureCSSに慣れるまでまだかかりそうなのでご容赦くださいまし。

 

 

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

ソースコード間の関わりをシンプルにするFacadeパターン

Facade パターン – Wikipedia
 Facadeパターンはプログラミングのデザインパターンの一つです。Facadeは建物の正面を意味する語で、Facadeパターンは建物全体でなく正面だけを見ればよいようにコーディングを行う方法です。もし多数のクラス、関数、データが協調するプログラムを記述する際、すべてを同等に扱ったり散らかったままにすると、どこから何をどの手順で取ってくるのが良い方法か分かりにくくなります。ひどいことに、このクラスを呼ぶ前にはこの関数とあの関数をあらかじめ使っておき、データをどうこう加工しておく必要がある、なんてことにもなります。そういった事態を避けるために、モジュール間のやり取りをシンプルにする窓口を作るというのがFacadeパターンです。次の図は増補改訂版Java言語で学ぶデザインパターン入門に載っているFacadeパターンのクラス図です。ClientがシンプルなFacadeクラスという窓口を介することでClassA~Dを楽に扱えます。
 
 Laravelにはファサードという仕組みがあります。
ファサード 5.7 Laravel
 このファサードの中身を見ていくとFacadeパターンを体現しています。例えばAuthファサードは次です。雑多なAuth関連クラスである@see以下の4つをまとめ上げて、21の関数のアクセス方法を見せています。これを使うことが出来ると大変わかりやすく、便利です。これを使わず雑に、@see以下を読んでは継承で上書きしてテスト、読んでは上書きしてテスト、を繰り返すコーディングをするとあっという間に難解なコードになり後の修正やリファクタリングがとても面倒になります。

/**
 * @method static mixed guard(string|null $name = null)
 * @method static void shouldUse(string $name);
 * @method static bool check()
 * @method static bool guest()
 * @method static \Illuminate\Contracts\Auth\Authenticatable|null user()
 * @method static int|null id()
 * @method static bool validate(array $credentials = [])
 * @method static void setUser(\Illuminate\Contracts\Auth\Authenticatable $user)
 * @method static bool attempt(array $credentials = [], bool $remember = false)
 * @method static bool once(array $credentials = [])
 * @method static void login(\Illuminate\Contracts\Auth\Authenticatable $user, bool $remember = false)
 * @method static \Illuminate\Contracts\Auth\Authenticatable loginUsingId(mixed $id, bool $remember = false)
 * @method static bool onceUsingId(mixed $id)
 * @method static bool viaRemember()
 * @method static void logout()
 * @method static \Symfony\Component\HttpFoundation\Response|null onceBasic(string $field = 'email',array $extraConditions = [])
 * @method static null|bool logoutOtherDevices(string $password, string $attribute = 'password')
 * @method static \Illuminate\Contracts\Auth\UserProvider|null createUserProvider(string $provider = null)
 * @method static \Illuminate\Auth\AuthManager extend(string $driver, \Closure $callback)
 * @method static \Illuminate\Auth\AuthManager provider(string $name, \Closure $callback)
 *
 * @see \Illuminate\Auth\AuthManager
 * @see \Illuminate\Contracts\Auth\Factory
 * @see \Illuminate\Contracts\Auth\Guard
 * @see \Illuminate\Contracts\Auth\StatefulGuard
 */
class Auth extends Facade
  • この記事いいね! (0)
takahashi 著者:takahashi

セレクトボックスを少しリッチにするselect2jsでプルダウンにない値を入力可能にする方法

HTMLのセレクトボックスに機能を追加してリッチにしてくれる”select2“というライブラリがあります。

使い勝手がそこそこいいので、自分も一部のWebアプリで使っていたりします。

具体的にselect2を使うとどうなるかというと

こんな風に、セレクトボックスの選択肢に書式を適用したりできます。

さらに上に見ているテキストボックスですが、

文字を入力するとリアルタイムに選択肢をフィルタしてくれます!

勿論、multipleなセレクトボックスにも対応しています。


これだけでも素晴らしいのですが、折角入力欄があるのでセレクトボックスにない新しい項目も追加できたらいいなぁとふと思ってしまったのですが、調べたところ…

Dynamic option creation – SELECT2

その機能もSelect2に入ってました\(^q^)/

どうやるかというと、
Select2は

$("セレクトボックスのセレクタ").select2();

のように指定することで有効化するのですが、

$("セレクトボックスのセレクタ").select2({
    tags: true
});

という風に引数にオプションを追加すると

入力欄に入力した項目が一覧になかった場合でも、検索ボックスに追加することができます!

この場合、どうなるかというと、select2()をかけた要素のセレクトボックスのvalueの値に、入力した文字がそのまま反映されるので、通常の値の処理と同様に扱うことができます。

ただし、表示上の値とvalueの値を別のものにしているプログラムの場合は、新しく追加された値だけ表示上もvalueの値も入力されたものになりますので注意が必要です。

多機能なセレクトボックスを実装したい方は是非参考にしてみてください。

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

【PHP】Slim3初心者に!プロジェクトのひな型を作成できるパッケージ「slim/slim-skeleton」

昨日の記事で、Slim3の導入方法について紹介しましたが、「slim/slim-skeleton」パッケージを使った方が、特に初心者にはわかりやすいと思ったので、そのご紹介です。
私はテンプレートの導入方法で若干詰みかけていたのですが、このパッケージで作成したプロジェクトには既にテンプレートファイルが導入済みだったので、とてもありがたかったです。

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

Slim3のスケルトンプロジェクト、slim/slim-skeletonの解説 – akamist blog
https://akamist.com/blog/archives/815

主要なファイルを全て解説してあって、大変分かりやすかったです。
初心者にはおすすめの記事ですね。

GitHub のページはこちらから。

GitHub – slimphp/Slim-Skeleton: Slim Framework 3 skeleton application
https://github.com/slimphp/Slim-Skeleton

 

プロジェクトの新規作成には、下記のコマンドを実行します。

composer create-project slim/slim-skeleton [プロジェクト名]

あとは放っておけば、プロジェクトが作成されるので、コマンドが終了したら下記を実行。
なお、cd コマンドで、作成したプロジェクトのルートディレクトリに移動しておくのをお忘れなく。

php -S localhost:8080 -t public public/index.php
// または
composer start

必要なファイルは自動的に生成されるので、詳細についてはコードを参照ください。
なお、ルーティングファイルとして src/routes.php はありますが、コントローラーファイル等はなく、パスごとの処理は src/routes.php ファイルに直書きされているので、状況に応じてコントローラーファイルを作成し、処理を分けてください。

また、機能の記事にも書きましたが、Slim3 は必要最低限の機能しかないため、CSRF 対策を行いたい場合は、別途「slimphp/Slim-Csrf」を導入してください。
なお、ミドルウェアの導入は、src/middleware.php に記述します。
コメントにサンプルコードが書かれているので、参考にしてください。

 

以上、プロジェクトのひな型を作成してくれる「slim/slim-skeleton」パッケージのご紹介でした。
近いうちに「slimphp/Slim-Csrf」の紹介もしたいと思います。

なお、あまり参考になるかは分かりませんが、昨日の記事はこちらから。

【PHP】軽量フレームワーク「Slim3」の導入方法
https://cpoint-lab.co.jp/article/201901/【php】軽量フレームワーク「slim3」の導入方法/

紹介しているリンク先の記事はとても参考になりますので、ご活用ください。

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

【PHP】軽量フレームワーク「Slim3」の導入方法

現在、PHPの軽量フレームワークで「Slim3」というものを試してみています。
こちらのフレームワークは必要最低限の機能しかないため軽量で、学習コストも低くて済みます。
当然、基本機能以外は開発者が実装しなければいけませんが、その分カスタマイズ性が高いという利点もあります。

ちなみに、この「Slim3」を選んだ理由は、「PHP フレームワーク 軽量」と調べたときに、候補の一番最初に表示されたからという理由です。
でも、触ってみた感じは、(今のところ)なかなか分かりやすくておすすめですね。

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

PHP軽量FrameworkのSlim3 – Qiita
https://qiita.com/Syo_pr/items/b55e18a8361b3ff882b5

こちらの内容に沿って、実装を行いました。

 

まず、ディレクトリを作成します。
名前は任意でOKですが、私はミス防止に、サンプルの名前をそのまま使っています。

mkdir testSlim
cd testSlim/
mkdir public
cd public/

ディレクトリをつくったら、次に index.php を用意します。

vim index.php

index.php の内容はこちら。

<?php
use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;

require __DIR__ . '/../vendor/autoload.php';

$app = new \Slim\App;
$app->get('/hello/{name}', function (Request $request, Response $response) {
    $name = $request->getAttribute('name');
    $response->getBody()->write("Hello, $name");

    return $response;
});
$app->run();

最後に、一つ上のルートディレクトリに戻り、下記を実行します。

composer require slim/slim "^3.0"

なお、環境によっては Composer コマンドが使えないこともあるので、その場合は Composer をインストールします。
案の定、私の環境では使えなかったため、下記のサイトを参考にしてインストールを行いました。

Composer を Windows にインストールする手順|WEB ARCH LABO
https://weblabo.oscasierra.net/php-composer-windows-install/

インストール後、composer -V を実行して、バージョンが表示されれば成功です。

そして、下記のコマンドを実行し、ビルトインウェブサーバーを起動します。

php -S localhost:8080 -t public public/index.php

サンプル通りに作成した場合は、http://localhost:8080/hello/test にアクセスし、Hello, test と表示されれば成功です。

上で紹介した参考サイトでは、Routes.php とコントローラーファイルを作成し、Laravel 風のルーティングテーブルを作成する方法についても記述されていました。
こちらを導入すると、index.php や Routes.php がすっきりするため、おすすめです。

 

なお、Slim3 は最低限の機能しかないため、CSRF 対策を行う場合は、別途 slimphp/Slim-Csrf を導入する必要があります。
GitHub のページはこちらから。

GitHub – slimphp/Slim-Csrf: Slim Framework CSRF protection middleware
https://github.com/slimphp/Slim-Csrf

インストール方法から導入の手順まで載っているので、是非参考にしてください。
slimphp/Slim-Csrf の導入については、後日記事にまとめたいと思っています。

 

以上、軽量フレームワーク「Slim3」の紹介と導入方法でした。
現在は、slimphp/Slim-Csrf の導入の途中まではできたので、引き続き開発を行っていきたいです。
テンプレートを用意して、それを読み込んだりもしたいですね。
公式のドキュメントでは、slim/twig-view が紹介されていたので、こちらを導入してみたいと思います。

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