はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

サイトの画面構成がそれなりの規模感になってくると pug のビルドにも時間がかかるようになってきます。 pug で全体を毎回ビルドする設定をしていると、 public 配下をwatch する browserSync が無限にリロードを重ねるようになり、ブラウザがぶっ壊れます。 変更のあったpugファイルのみ変更反映すればいいんですが、依存関係ぐちゃぐちゃのpug構成内では、そううまいこと行きません。 pug コンパイルタスクの完了に合わせて browserSync のリロードとか書ければいいんですがビルドに 5s とかかかるようになってくると流石に待てないですね。 というわけで browserSync に mddleware を刺して動的に pug ファイルをコンパイルするアレです。 const fs = require("fs") const path = require("path")

var riot = require("riot") class Header extends riot.Tag { constructor(el) { console.log(el) super({ tmpl: Header.template() }, { root: el }) this.msg = 'hello' } bye() { this.msg = 'goodbye' } static template() { return require("../tmpl/header.html") } } module.exports = function(el){ console.log("header factory called") return new Header(el) } var riot = require("riot") var TopModule = require("

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

お正月なので何か挑戦したいと思い Vue.js と サーバレスアーキテクチャを使った SSR 構成に挑戦してみました。 構想 Vue.js の SPA(SSR対応版)を サーバレスアーキテクチャで組み上げます。 基本となるSPAサイト(主にJSやCSS)はS3経由で、SSR 的なサーバサイドの描画が必要な箇所は、Serverless Frameworkを使用して Lambda + ApiGateway で構築します。 SSR的なHTML配信と静的なAssets配信は同じオリジンで行いたいので最終的には CloudFrontで両者をマージします。 普通にVue.jsでSPAを作る まずは兎にも角にも普通に Vue.js でSPAを作って行きます。 Vue.js の開発は Vue CLI を使えば高速に始められます。 SPAのルーティングは VueRouterで簡単に実装できますが、 Rout

AWS Athena は AWS 上のリソースを Database のように扱えるサービスです。 主な用途としてはログファイルの解析とかになるかと思いますが、 S3 上に JSON ファイルをボスボス配置して 簡易 CMS 的な使い方もできたりします。 データの準備 まずは S3 のバケットを作成します。 Athena のリージョンと S3 のリージョンはあわせたほうがいいんでしょうか…? 作成したバケットの中にフォルダを作成し、中に JSON ファイルを配置します。 JSON ファイルは １ファイルが１レコードという扱いになるので、{ から書き始める形になります。ファイル名は無視されます。 以下のような形式の JSON ファイルはNGです。

EC CUBE3 が Heroku Button に対応しました。 公式のリポジトリにあるHeroku Button から簡単にEC CUBE3を立ち上げて動作を確認することが可能です。 管理画面についても admin / password でログインして簡単に入ることが出来るようになっています。 当然ですが、このまま本番運用するのはめちゃくちゃ危険なので、パット見た感じで気になった点などをまとめておきます。 実際に Heroku でEC CUBE を運用する際の参考にしてもらえれば… 管理画面のUSERのID/PASSWORDを変更する 管理USERのID/PASSWORDは デフォルトで admin/password になっており、非常に危険です。 テスト環境とはいえ、メール送信等の機能が有効になっていれば不正に利用される可能性もあるため、必ずこれは変更しておくほうがいいでしょう。 管

Herokuで　Redis / Postgres を運用していると、定期的にメンテナンスを求められることがあるのでそのあたりのメモ。 メンテナンスの影響について メンテナンスは大抵元と変わりなく動作することが多いが、メンテナンスの前後で以下のような現象が生じることがある。 DB/Redis の接続情報が変わることがある？ DBについてはバックアップのスケジューラ設定が飛ぶことがある？ まれに…というレベルのものなので、障害なのか、どうなのかわからないが、接続情報に関しては変わった瞬間障害になるレベルなので、しっかり環境変数からパースするようにしておきたい。 スケジューラの設定について Premium以上のプランでは、メンテナンスを指定の曜日・時間で行うよう設定することが可能なので、コレを利用しておくと休日にメンテが走って…といったトラブルを未然に防ぐことが出来る模様。 Heroku Pos

var request = require('supertest'); describe("hoge",function(){ this.timeout(2000) var agent = request.agent("http://hogeapp.app/") it('send api', function (done) { agent .get('/debug') .set('Accept', 'application/json') .expect(function(res){ res.status.should.equal(404); }).end(function(err,res){ if(err){ throw err; } done(); }); }); })

use GuzzleHttp\Client; $client = new Client(); $res = $client->requestAsync($method,$url,$options)->wait(); 様々な記法が存在しているが概ね以下の様な形でまとまる。 request()による呼び出しは 内部で requestAsync()->wait() を呼び出す。 get post と言ったメソド名呼び出しは、動的にメソド名を第一引数に据えてrequest を呼び出す。 getAsync postAsync と言ったメソド名呼び出しは、動的にメソド名を第一引数に据えてrequest Asyncを呼び出す。 PSR7 によるリクエスト PSR7形式でのリクエストオブジェクトが存在する場合には sendメソドが利用できる。 use GuzzleHttp\Psr7\Request; $r

app.jsonとは...? app.jsonは Heroku 環境構成ファイルとして機能します。 今の所用途としては以下のケースが考えられます。 Heroku Button Docker で環境構築 PR でアレする。 app.jsonをベースにDockerファイルを作成するのは若干挙動がおかしかったりすることもあり、 自分でcomposeファイル書くほうが良さそう。 https://devcenter.heroku.com/articles/app-json-schema にサンプルのapp.jsonが掲載されています。 結構オプションの項目が多いので、最小構成でも全然動く。 name, description, keyword, website, repository, logo Heroku Buttonでアプリを作成する際に表示されるオプション情報。 基本的にoptionalで省

$ aws iam create-user --user serverless-bot $ aws iam create-access-key --user-name serverless-bot $ aws iam attach-user-policy --user-name serverless-bot --policy-arn arn:aws:iam::aws:policy/AdministratorAccess キーなどを ~/.aws/credential に貼っつけて完了 Line Bot 作成の準備 Line Notify を利用して簡単なHTTP通信でメッセージ送信が可能。 開発者ドキュメントはこちらから確認できる。 Oauth 実装はテスト利用するには面倒なので今回は下記のマイページから発行できる、自分用トークンを利用して実装。 なおAPIはBearer認証でトークンさえ

Vue.js の作者Evan氏によるVue.jsの紹介スライドで触れられていた「Progressive Framework」の概念が非常に刺さる所があったのでVue.jsの紹介と合わせて、まとめておきます。 本家資料 本稿は下記Evan氏によるスライド資料をベースに、独自解釈のもと意訳したり加筆したりして作成したものです。 Progressive Framework についての解説 2.0の流れも含めたVue.jsの紹介 道具と道具のコスト フレームワークはアプリケーションの複雑さを解決するために設計されているが、一方で道具は道具固有の複雑さを持っている。 技術選択においては、このアプリケーション固有の複雑さと、道具の複雑さとに向き合わなければならない。 複雑なアプリケーションに対して、簡素な道具を以って挑むのは効果が薄いし、簡単なアプリケーションに複雑な道具を持ち出すのは大げさに感じる。

<select> <option value="">--</option> <?php foreach(range(1920,2016) as $year): ?> <option value="<?=$year?>"><?=$year?></option> <?php endforeach; ?> </select> <select> <option value="">--</option> <?php foreach(range(1,12) as $month): ?> <option value="<?=str_pad($month,2,0,STR_PAD_LEFT)?>"><?=$month?></option> <?php endforeach; ?> </select> <select> <option value="">--</option> <?php foreach(ra

まだ実戦投入してなかったんですが、リリースノート眺めてたら、 As such, sessions and views are no longer included with the framework.との記述が。 トークン渡してステートレス言うなら、クッキー渡してもステートレスだろが、って所で意地でもSession使っていきたい衝動に駆られたので、Lumen 5.2でもSession使えるように改造していきます。 改造 illuminate/session自体はlumen5.2の中にも入ってるようです。 依存を追うのは面倒だったのでしてないのですが、supportしないのに入ってるのはなんでなんでしょうか。 必要なクラスは揃っているので、とりあえず必要なセッション初期化の記述をbootstrap/app.php に記述していきます。 $app->extend("session",func

もうそろそろいい加減git subtreeも使いこなせないとまずいな、と思っていたところなので とりあえずわかる範囲で調べてまとめてみた。 git subtree とは何か git subtreeは外部のリポジトリを現在のリポジトリに取り込むための機能です。 リボジトリ in リポジトリとなるとgit submoduleだったり、 npmとかcomposerみたいな依存管理ライブラリみたいなものを連想するかも知れませんが、 subtreeの挙動はちょっと違います。 一般的な依存管理ライブラリや、git submodule では、 特殊なファイルに 取り込み元リポジトリを記載して管理するという、 取り込み元と、取り込み先を明確に区別しての管理を行うのですが、 subtree では、 「取り込み元と取り込み先のコミット履歴を完全に結合する」 という動き方をするみたいです。 使い方 とりあえずフ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

http://wocker.devでサイトが確認可能。 http://wocker.dev/wp-admin/で管理画面が確認可能。 (ログインパスワードは admin/admin) 概要 wockerは複数のwordpressをコンテナと呼ばれるまとまりで扱い、 複数のWordpress環境を瞬時に切り替えたりできるシステム。 vagrantで立ち上げた仮想環境上に複数のwordpressコンテナを配置し、 内部で特定のコンテナを立ち上げ、Wordpressとしてブラウザから確認することが出来る。 コンテナの管理 デフォルトではwockerという名前のコンテナが走っている。 vagrant sshでvagrant仮想環境に入ると、CoreOSのマシンがあり、wockerコマンドを利用する事ができる。 core@wocker ~ $ wocker Usage: wocker COMMAND

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 昔のメモを整理してると出てきました。今となっては心底どうでもいい。 上流工程に関するあれこれ 大まかな流れ 基本的な流れとしては要件定義→外部設計→内部設計→開発の流れが採用される。 ここで外部設計は基本設計、内部設計は詳細設計とも呼ばれる。 一般にウォーターフォールモデルでの考え方では外部設計までが上流工程と考えられるようだ。 ##要件定義 ###要求開発(超上流工程) [ 業務フロー ] 業務とその流れを表現するもの。素人にもわかるように → アクティビティ図　業務機能関連図 [ 業務モデル ] 業務を静的に表現する。 →　ERD　

個人的メモです。 PHP アプリケーションの構築 FuelPHP アプリケーションの構築 コンソール側でherokuアプリケーションを構築してから、 fuelphpプロジェクトを作成する。 Composerに依存関係を構築。パッケージ系が不要なら削除しておきます。 ビルドパックは、devで設定しておかないとデプロイの際に怒られる。 herokuでは拡張機能も必要になるので、入れておく。 プライベートリポジトリを使う場合、パスワード確認はしてくれないので、セキュリティ的に許容されるなら、URLにはパスワードも埋め込む。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

GDを使うとPHPで画像処理が可能です。頻繁にコールするとかそういうのには向いてないと思いますが、動的な画像生成においては必須と言えるかもしれません。 画像の読み込み 画像ファイルの読み込みはimagecreatefromXXX( filename )系列の関数群を用いて行います。いずれも第一引数に画像ファイルへのパス(またはURL)を要求します。読み込みに成功した場合にはリソース型を、エラー時にはfalseを返します。 imagecreatefromjpeg( filename ) imagecreatefrompng( filename ) imagecreatefromgif( filename ) 新規に画像を作成する場合 既存のファイルではなく,新規に画像を作成する場合は、imagecreatetruecolor( width, height )関数を用いる。 処理に使用する色を

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

# 全てのデータベースをバックアップ $ mysqldump -u root -x --all-databases > dump.sql # 特定のデータベースのみバックアップ $ mysqldump -u root <database_name> > dump.sql # 複数のデータベースをバックアップする場合はdatabasesオプションを $ mysqldump -u root --databases DB1 DB2 DB3 mysqldump [OPTIONS] database [tables]とかいう書式でテーブル名も指定できるみたいだ。 SQLベースで復元 普通にmysqlコマンドに渡せばOK