はじめに 本エントリーのゴールは以下のような状態です。 （ほぼ）Dockerだけしかインストールされていないサーバーが1つある そのサーバーのDockerで複数のWebアプリがホストされている 各WebアプリはDocker Composeで構成管理されていて、アプリごとに docker-compose up するだけで動く docker-compose up した各Webアプリには、指定したサブドメインが自動で割り当てられて、Let’s Encrypt で取得したSSL証明書が適用される この状態になるまでに必要な作業をできるだけ丁寧に解説していきます。やや長くなりますが、ぜひ最後までお付き合いください。 目次 Ubuntu 16.04のサーバーを用意する サーバーにDockerをインストールする 一般ユーザーを作る Dockerをインストール Docker Composeをインストール

「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターにカスタマイズできます。 前回の記事では、「HTMLコーダー」「フロントエンジニア」に役立つ拡張機能を紹介しました。本記事では、開発者全般の方に役立つ拡張機能を紹介します。 エディターを強化する拡張機能 1. Clipboard Ring テキストを「コピー」や「切り取り（カット）」したものを「貼り付け（ペースト）」する場合に、この拡張機能を入れることで複数件の内容を記憶できます。ctrl+shift+v（⌘+shift+v）を押すごとに過去の情報に切り替えられます。デフォルトでは10件の情報を記憶できますが、設定を変更することで記憶する件数を増やすことも可

※本記事は2018年1月に公開された内容です。 こんにちはQualium Systems Japanの天野です。 本記事は実際にPWA (Progressive Web Apps)開発に必要な構成要素や開発環境などを紹介します。 Webアプリケーション開発関連の案件はこちら この記事の要約 PWAの構成要素 Service Worker ネイティブアプリに近いUI httpsのサーバー Single Page Application App Manifest PWAの開発環境 JavaScriptライブラリ：React, Angular, VueJSなど UIライブラリ：Ionic, Framework7, Vue Materialなど バックエンドとの連携：REST API, GraphQL, Firebase Cloud Firestoreなど PWAの構成要素 PWAは様々なモジュー

400種類以上のアイテムが揃った、Webサイトやスマホアプリにぴったりなシンプルにデザインされた無料アイコンを紹介します。 MITライセンスで、個人でも商用でも無料で利用できます。また、アイコンフォントやSVGとして利用できるので、かなり便利だと思います。

追記（2018-02-09） Laravel5.2の時代に書いたものです。 時間あるときに5.5にアップデートします。。。 フォームリクエストとは フォームを含む各リクエストに対して、それぞれ固有のバリデーションを設定できる。 バリデーションエラー時には、入力値とエラー情報を付与して前のページに自動的にリダイレクトする。 バリデーションをパスした時に初めてコントローラー内の処理に移る。 詳しくは公式ドキュメントのフォームリクエストの項を参照。 バリデーション 5.2 Laravel メリット バリデーションルールやエラー時の処理をコントローラーから完全に分離できる。 使いまわしが効く。 可読性が高い。 カスタマイズしやすい。 チュートリアル App\Http\Requests配下にRequestを拡張したクラスを作る。 手動で作ってもいいが、コマンドの方が楽。 php artisan ma

スマートフォンアプリではおなじみのプッシュ通知。 実は、Webブラウザからもできることをご存知でしょうか。 JavaScriptの*「Web Notification API」*というプッシュ通知を制御するAPIを使うことで、モバイルだけでなくデスクトップにもWebサイト経由でプッシュ通知ができるようになります。 しかし、モダンブラウザの多くがサポートを始めている一方で、まだ利用したことがないひとも多いのではないでしょうか。 今回は、Web Notification APIを簡単に扱うことができるPush.jsを使って、簡単にブラウザ通知を実装する方法をご紹介します。 プッシュ通知とは？ これまでは、ホームページの更新を通知する方法としてはRSSやメールなどを利用している人が多かったのではないでしょうか。 しかし、RSSはRSSリーダーに登録する手間が必要で、メールでもメールアドレスをユー

Laravelの認証や認可にSentinelを組み込んだのであれば、ユーザーの役割（ロール）や権限（パーミッション）機能を使えるようにしたいところです。 そこで、管理者によるユーザー管理、ロールとパーミッションによる権限の管理をするコントローラーやビューを作成します。 目次 目次 前提 管理者のメールアドレスを設定 ログイン時にロールを割り当て ロール関連の設定を作成 管理者メールの時の処理 ログインユーザーのロールの確認 ログインユーザーのパーミッションの確認 ロールのセットアップと管理者の割り当て処理 メニューの追加 ユーザー管理を作成 コントローラーの作成 Usersビューの作成 方針など 入力欄をパーツ化 ユーザー新規登録のパネルを作成 テスト用のルート ロールの選択ビュー ユーザー一覧ビュー 拡張Userモデルの作成 UserExモデルの作成 モデルの変更 管理者によるユーザー登

この記事は下記のブログに移行しました この記事の目的 上記の記事で 個人開発における特有のインフラ周りの悩み それぞれのサーバー、インフラを使った人の生の声 パターン別のおすすめサーバー などをまとめています。 個人開発や広告マネタイズなどtwitterで発信しているのでその辺興味ある人は気軽にフォローしてください。 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationWhat you can do with signing up

オープンソースのWeb開発向けスクリプト言語「PHP」の文法を一から学ぶための入門連載「Web業界で働くためのPHP入門」。今回は、「ジェネレータ」について解説します。 PHP 5.5から導入された「ジェネレータ」とは ジェネレータは、PHP 5.5から導入されたものです。ソースコードとしては関数とよく似ていますが、働きが全く違います。関数と比べて何が違うのか、ジェネレータとは何か、から話を始めていきましょう。 関数内でreturn以降の行は処理されない まず、関数のソースコードから確認していきましょう。下記のuseFunction.phpを作成し、実行してください。なお、ここで定義したreturnValues()関数は、通常ではあり得ない記述方法をしています。これは、後に記載するジェネレータとの違いをはっきりさせるためです。 <?php function returnValues():

タフツ大学の研究チームは、食べ物や飲み物に含まれる栄養素などを検知する、歯に貼り付けて使える超小型センサを開発した。電源や配線が不要で、データは無線通信で取得可能。 このセンサは、2mm角の小さく薄いシート状で、歯の表面に貼り付けておける。ブドウ糖、塩、アルコールの検出に対応しており、これらの含まれる食品を摂取したかどうかの情報を外部のモバイルデバイスで取得する。 3層構造になっていて、金で作られた外側2層はアンテナの働きをする。そして、あいだに挟まれた層が化学物質と反応し、栄養素などを検知する。センサに電波が照射されると、一部の周波数が吸収され、一部が反射されるのだが、この周波数特性は物質の種類に応じて変わる。そのため、反射される電波の周波数や強度を調べることで、摂取した物質の種類を知ることができる。 化学物質と反応する層に異なる周波数特性を示す素材を使えば、より多くの種類の栄養素の検出

トークンを利用した認証・認可 API を実装するとき Authorization: Bearer ヘッダを使っていいのか調べたAPIOAuthWeb TL;DR HTTP でトークンを利用した認証・認可をする手法として RFC 6750 がある OAuth に限らず、トークンを利用して認証・認可する機構の一部として Authorization: Bearer ヘッダを使うことができる 使い方について詳しくはこの記事の下のほうに書いた 要求 トークンを利用した認証・認可機構を持つ API を作りたい クライアントがトークンを HTTP リクエストに含めて送信し、サーバはトークンを検証してリソースへのアクセスを許可したい Authorization: Bearer トークン ヘッダでトークンを送る API あるよね、ああいうやつ 疑問 Authorization: Bearer ヘッダは OA

こんにちは、 UXデザイナーの @yuh_iw です。 この記事は NTTコミュニケーションズ Advent Calendar 2017 の23日目です。 すべては最高の体験のために 弊社では、ようやく社内にUXデザインという言葉が浸透し始めていますが、 実態はUIと共に語られることが多いです。（実際は違うよ） とはいえ今回はUIを作るために私達がいつも行っていることについて記載します。 どうやってUIを作っていくのがよいか とにもかくにも、ユーザーに対する検証と学習をくり返すことです。 最高のUI=カッコイイUIではありません。アーティスティックなUIでもありません。 UIにはユーザーがいるので、ユーザーが使いやすいと思わなければならないのです。 そのために、使ってくれそうな人に、検証していく必要があります。 検証するためにはいくつか方法がありますが、 本稿ではUIプロトタイピングを行う

WordPressテーマ、Simplicity2でカスタマイズしたところをほぼ全部まとめました。 ブログのテーマ、Simplicityが良さそうだけどみんな使ってるしなぁ。Simplicityのデザインを変えてみたいけど、どこをどういじったら良いかわからない…という方の参考になれば嬉しいです。 コード部分に簡単な解説をつけております（随時追記していきます）ので、ご自身のサイトイメージに合わせてアレンジしていただければと思います。すでにご自身のcssに書かれているスタイルとの競合により、思い通りの見た目にならない場合があるかもしれません。カスタマイズは随時行っておりますので、記事の内容と実際の見た目が異なる場合がございます。なお、新しいカスタマイズは随時追記していく予定です。コードはSimplicity2の子テーマに書くことを強くおすすめします。スマホのスタイルはmobile.cssに書いて

OpenIDを理解するにあたってできる限り簡単にPHPで「Google OpenID Connect」を利用するプログラムを作成してみました。 （あくまでも理解する為に作成したプラグラムなので実際に運用する場合はセキュリティーを十分に高める施策が必要です。） 大まかな手順としては、まずGoogleのクライアントIDを取得する必要があります。 「Google OpenID Connect」の為の「クライアントID」の取得方法については下記の記事を参考にしてください。

qiita.com という記事を書いた。 要約としては、「今こそGUIでWebのUIを生成できるような開発環境を目指すべき」みたいな話。 概念 Web の GUIの概念を分解すると JS はViewとしての実装を持つプレゼンテーションレイヤー、ロジック注入のコンテナーレイヤーに分割して考える HTML/CSS は、レイアウト定義のレイヤー、そのレイアウト領域を占めるエレメントのレイヤーに分割して考える この考え方に基づくと、GUI開発環境で作るべきものは、 テンプレートへのJSロジックのつなぎ込み レイアウトエディタ 個別のエレメントの装飾 となる。 JSロジックのつなぎこみはヘヴィにJSだからまだコードで書く方がいい。作るならノードベースのエディタになりそう。 エレメントの装飾は自力で頑張るより Sketch から生成できないか試したい。後回し。 レイアウトエディタは今でも作れそう。作っ

CSS Gridを使ったレスポンシブ対応のレイアウトを簡単に実装できる超軽量フレームワークを紹介します。 シンプルなレイアウトから、複雑なレイアウトまで、ブレイクポイントごとにレイアウトを定義することができます。ブレイクポイントはもちろん、カスタマイズできます。 iota iota -GitHub iotaの特徴 iotaの使い方 iotaのデモ iotaの特徴 必要なclassは一つだけ このフレームワークで使用するclassは一つだけです。CSS Gridを使ったさまざまなレイアウトを実装するために、いくつかの修飾子が用意されています。 584 bytes このフレームワークは超軽量のスタイルシートです。使用しないものを取り除くと、更にファイルサイズは減少します。 無限の柔軟性 スタイルシートのコードはCSS Gridとそのすべての機能をカスタムプロパティで結合することによってもたらさ

Hakusan Mafiaアドベントカレンダー4日目はマスブチです！ 最近の悩みは僕のusernameであるyoshixjの読み方がきまらないことです。カッコイイ読み方募集しています！ 今回の内容ですが、最近RailsでAPIを扱うことが多く、Railsのこと書こうかなぁと思ったんですけど、大体ググれば該当の記事はでてくるんでやめました！>< そこで、何書こーかなぁって中目黒歩いていたら、となりにいたRailsエンジニアがマークアップできる彼女がほしい！！！！と切実に嘆いていたので、マークアップのアルバイト1年間の経験を生かして、マークアップの話でもしようかと思います〜 で、今回は開発中のプロダクトのLP があるのですが、その製作過程をちょいと振り返っていきたいと思います！ 今回の対象となるのは BEMとかしってるけど、そもそもきれいに表示させられない float とかつかえん みたいな、

PHPフレームワークのLaravelでRestfulインタフェースを作成 簡単な例で入門 Laravelで効率的にRest APIを開発することが出来ます。 作成するファイル 下の3つのファイルを作成しました。 app/routes.php app/models/Todo.php app/controllers/TodoController.php routes.php routes.phpでアプリケーションのルートをコントローラーにマッピングします。 Route::controller('/', 'TodoController'); TodoControllerにAPIをコーディングしていくことになります。 Model APIではデータベースを操作するので、Modelを作成します。 class Todo extends Eloquent { protected $table = 'tod

私の頭の中で、仮想化がモヤっとしているから、Docker、Vagrant、Chefと一緒にまとめてみる。 2014-07-17 ITネタ どうも、もりさんです。 仮想化について、頭がモヤっとしていたので、ついでにDocker、Vagrant、Chefと一緒にまとめてみました。 最近、特に気になるのが｢Docker｣というキーワードでした。 仮想化とは ソフトウェアで、実在しているように見える状態を再現することです。 なぜ仮想化するのか 昔は物理的にPCを用意し、1台単位でサーバにしていました。 しかし、現在ではインターネットの利用者拡大によって、想像できないほどのスピードでWebの状況が変化しています。 そのスピードに付いていくために、物理的に作業していては、間に合いません。 そこで、簡単にサーバを増やしたり、減らしたりできる、仮想化というアイデアが取り入れられました。 仮想化された環境で