はてなブックマーク

Dockerコンテナの自動起動設定するオプション名と設定方法を紹介していきます。 概要Dockerには、再起動ポリシーという「コンテナ終了時に再起動するための仕組み」があります。 再起動ポリシーを設定しておけば、Dockerデーモンの起動時やホストOSの起動時に自動的にコンテナを開始することができます。 docker-composeを利用している場合の自動起動自動起動を有効化するには、以下のオプションを使います。 version: '2' services: wordpress: image: wordpress:latest ports: - "3001:80" environment: WORDPRESS_DB_NAME: wordpress WORDPRESS_DB_USER: mysql_user WORDPRESS_DB_PASSWORD: mysql_pw # 自動起動の有効化

Tech & Tips AWSのCodeCommit、CodeBuild、CodeDeploy、CodePipelineについて きっかけとある仕事に参加したエンジニアが、 CodeCommit、CodeBuild、CodeDeploy、CodePipelineを使って リリースする仕組みを実装して感動したので 勉強がてらレビューを書きます。 ※AWSのCodeCommit、CodeBuild、CodeDeploy、CodePipelineって何？ という方向けの記事なので、既に知見がある方には物足りないかもしれません。 AWS Codeシリーズ多くの場合、dockerイメージを使ってサーバー構築、 Git管理したプログラムを、都度サーバーでpullしてリリース という事をしてます。 ですが、とあるお仕事で、運用開始時はEC2が1台、 サイトのアクセス負荷が大きくなってきたら 台数を増やす

もう百番煎じか千番煎じくらいになっているであろう、Lambda で PHP を動かしてみるネタです。 関数の作成ランタイムを「関数コードまたはレイヤーでカスタムランタイムを使用」を選択する以外は Node.js とか Python とかを動かすときと変わらないです。 レイヤーの追加関数を作成したら、Designer 欄の「Layers」をクリックします。すると下に参照されるレイヤー欄が表示されるので、「レイヤーの追加」をクリックします。 「レイヤーバージョンARNを提供」を選択すると表示されるテキストボックスに「 arn:aws:lambda:ap-northeast-1:887080169480:layer:php71:5 」と入力します。 入力が完了したら「完了」してください。 ソースコードのアップロード今回は phpinfo() してみます。書くまでも無いでしょうが、下記の内容で i

AWS Lambdaで遂にNode v8.10を使用できるようになりました。 これでPuppeteerが使える！と意気揚々としていたのですが、いつの間にか必須要件がv6.4.0以上となっていました。以前はv7.10以上必須と書かれていたはずですが・・・ いきなり出鼻を挫かれましたが、気を取り直していきます。 はじめに：PuppeteerとはGoogle謹製のGoogleChromeを自動操作するライブラリです。Nodeで動作します。 「このサイトにアクセスして、このボタンをクリックして・・・」といった操作を自動で行うことができます。雑に言うとExcelのマクロみたいなものです。 Chrome59で実装されたヘッドレスモードに合わせる形でプロジェクトが立ち上がり、主にWebアプリの自動化テストの分野で注目されています。 似たプロジェクトにPhantomJSやChromelessがあります。

やはり、料金は気になるところです。 S3にも、 無料枠が用意されています。 S3 - 料金 http://aws.amazon.com/jp/s3/pricing/ AWSアカウントを新規で作成した場合に、 1年間だけ、有効になる『無料枠』(毎月)です。 以下が、S3の無料枠の内容になります。 1)Amazon S3 標準ストレージ 5GB 2)Getリクエスト 20,000回 3)Put リクエスト 2,000回 4)データ送信 15GB 無料枠が全て、有料になった場合は、 以下の料金になります。(東京リージョン) 1)Amazon S3 標準ストレージ 5GB ＜課金＞ 最初の1TB/月 ：$0.0330/GB 5GB　×　$0.0330/GB　×　120円/ドル ＝　19.8円 2)Get リクエスト 20,000リクエスト ＜課金＞ $0.0037 : 10,000 リクエストあた

Googleが先週発表したAccelerated Mobile Pages (AMP) プロジェクト。現状をザックリ&表面的なところだけ言うと、この規格に対応したページを用意すると、スマホでの検索結果の上部にフィーチャーされ、そこからリンク先をサクサクで見れる仕組み、という感じでしょうか。(実際の見え方。※スマホ専用) ※当規格の詳細については、素晴らしいまとめ記事へどうぞ。（その1,その2） このプロジェクトのPublishersリストには、日本の新聞社を含む超大手出版社群、Technology partnersリストには WordPress.com も名を連ねていて、Googleの発表と同日に、Automattic社のGithubアカウントでAMP対応のWPのpluginを発表しています。 今回は、このプラグインを当ブログにインストールしてみました。 目次 plugin『AMP』をイン

今回は、人気商品やアクセスの多い記事の表示に役立ちそうな、シンプルな王冠アイコン付きのランキングリストをCSSで装飾する方法をご紹介します。 最近話題の流行語大賞…は残念ながらランキングではないため、ほぼ同時期に発表されたGoogle検索による流行語ランキングをサンプルとして使用させていただきました。 また、可愛いひよこと王冠のイラストは「PIYOTASO」様よりお借りしました。どうもありがとうございます！ サンプルHTML＆CSS以下がサンプルのHTMLとCSSになります。 ※ランキングリストの装飾以外は、HTML＆CSSから割愛しています。 DEMO： HTML：<ul class="ranking"> <li>マイナンバー<span>by 日本政府</span></li> <li>ラッスンゴレライ<span>by 8.6秒バズーカー</span></li> <li>エンブレム<spa

AWSを使ってみよう!(その2) – WEBサイト(S3)へのアップロードとアカウント管理 前回の続きです。。。 ＜前回の記事＞ AWSを使ってみよう!(その1) - アカウント作成からWEBサイトの公開 http://www.pressmantech.com/tech/aws/2149 S3を使って、WEBサイトが公開出来ました。 AWSマネジメントコンソールから、 ファイルのアップロードは面倒です。 FTPツール等を使って 他のレンタルサーバーと同様に ファイルのアップロードを行いたいところです。 AWSマネジメントコンソールへのログインは、 ルートアカウント(メールアドレス)では、 全権限が利用出来るのと、権限の制御が出来ないので 普段使いしないようにしましょう。 なので、 IAMを利用して、 アカウントを作成(S3用)し、 FTPツール等からファイルのアップロード を、行いたいと思

先日、ラジオボタンで実装済みのUIを急遽タブメニューにしたいというご要望をいただき、CSSを利用してタブメニュー風のデザインとして見せることにしました。 ラジオボタンを元にCSSでタブメニューを作成する場合、JavaScriptが必要ないため動作も軽く、比較的簡単に実装することができます。欠点としては、擬似クラスや隣接セレクタなどを多用するため、残念ながらIE8以下のブラウザでは動作しません。 DEMO：MENU1TEXT1MENU2TEXT2MENU3TEXT3 対応ブラウザ： IE9〜、Firefox、Chorme、Safari、Opera、iOS、AndroidHTML：<div class="tabmenu"> <label> <input name="tab" type="radio" checked> <em>MENU1</em><span>TEXT1</span> </lab

最近ではCSS3の対応ブラウザが増えたおかげで、画像を使わずともサイト上で色々な表現ができるようになりました。 CSSでデザインの実装を行う場合、｢カスタマイズやメンテナンスが容易」｢レスポンシブWebデザインとも相性が良い」｢画像を読み込まないのでモバイルユーザーにも優しい」｢Retinaディスプレイなど高解像度の環境で見ても綺麗」等、制作側とユーザーの両方にメリットがあります。 今回は、フラットデザインのWebサイトなどでよく見かける、シンプルな矢印アイコンのCSSをいくつかご紹介したいと思います。 目次： 共通HTML＆CSS シンプルな矢印アイコン シンプルな矢印アイコン シンプルな矢印アイコン（大） シンプルな太い矢印アイコン シンプルな太い矢印アイコン（大） 斜めの矢印アイコン 右上向きの矢印アイコン 右上向きの矢印アイコン（大） 右下向きの矢印アイコン 右下向きの矢印アイコン

.stamp { padding: 10px; background: #fff; background: radial-gradient(at center, transparent, transparent 5px, #fff 6px); background-position: -10px -10px; background-size: 20px 20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); } 対応ブラウザ： IE10〜、Firefox、Chorme、Safari、Opera、iOS、Android IE9以下のブラウザではradial-gradientをサポートしていないため切手風の見た目にはなりませんが、単純に白い枠として表示されますので、レイアウトが崩れる心配等はありません。 以下はコーディングのポイントと解説にな

ドキュメントをざっと読んだところ$inputについての記述が見つからなかったのでまとめ。 リクエスト時の$inputはクエリ、ヘッダ、POSTのbody等々色々と入っているよく分からない変数です。 API GatewayのIntegration Requestでinput mappingをするとlambda関数の一つ目の引数に渡されるようになります。 パス、クエリ、ヘッダから値をlambdaへ渡す場合$input.params('[名前]')で取得出来ます。 パスはResourceを /test/{xxxxx} の様に作成します。 クエリはMethod Executionの画面->Method Request->URL Query String Parameters->Add query stringで追加します。 ヘッダはクエリ追加と同じ画面でHTTP Requery Headers->

源ノ角ゴシック・小塚ゴシック・小塚明朝など、AdobeのTypekitにて14種類の日本語Webフォントの提供が始まりました。今までTypekitの日本語フォントはアプリケーションでの利用に限定されていたため、Webフォントとして使えるのは今回が初めてです。 目次：Adobe Typekitとは？日本語フォントを読み込んで重たくならない？TypekitのWebフォントの使い方は？動作環境と注意点日本語Webフォント全14種類源ノ角ゴシック無料りょうゴシック PlusNりょう Display PlusNりょう Text PlusN平成角ゴシック StdN平成角ゴシック Std無料平成丸ゴシック Std無料平成明朝 Std無料平成明朝 StdNかづらき SP2N小塚ゴシック Pr6N小塚ゴシック Pro小塚明朝 Pr6N小塚明朝 Pro※Adobe Typekitのサービス内容は、2015年6

印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理？」といったご相談を受けることがよくあります。 今年に入って、HTML5＆CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。 目次：段組み縦組み（縦書き）行末揃え（両端揃え）先頭文字スタイル（ドロップキャップ）段落先頭1字下げ2行目から1字下げ（ぶら下げインデント）行頭禁則文字ふりがな（ルビ）圏点（傍点、脇点）大文字と小文字の変更スモールキャップス（スモールキャピタル）長体、平体（水平比率、垂直比率）※IE以外のブラウザは、2014年7月4日現在の最新版にて

通常、ブロック要素を横並びにしたいときは『float』を使うことが多いと思います。しかしfloatには clearする必要があるIE6ではfloatと同方向のpadding、marginが2倍になってしまう（バグ）高さが異なるボックスがあるとその後のレイアウトが崩れるといった面倒がつきまといますよね。そんな時は『display: inline-block;』の出番です。block要素のように高さや縦方向のpadding、marginが指定できる上に、inline要素のように横並びができ、しかも高さが異なるボックスがあってもレイアウトが崩れません。 それでは実際に『display: inline-block;』を使った例を見てみましょう。 html <div class="ib-box">ボックス1</div> <div class="ib-box">ボックス2</div> <div cla

いろいろなWebサービスで採用されているOAuthは、OAuth用のライブラリを使ってしまうと簡単に実装できます。 しかし、OAuthがなんなのか、いったい何をしているのかイマイチわからないまま実装されてしまうこともある？ような気がしました。 そこで、どのようにしてWebサービスへのアクセスが可能になるかをイチからプログラムして理解しようという目論みです。OAuth2.0がでて手続きが簡単になるとの話も聞きますが1.0です。 何が例によってだかわかりませんが、とりあえず例によってTwitterでやってみます。 下記の様な画面を出すのを「その１」の目標にしましょう。 まずは、下記URLにアクセスしてアプリケーションの登録をしてみます。 https://dev.twitter.com/apps 登録すると、 Consumer key : pD4dm6IQHa6jhtge82Fg Consume