はてなブックマーク

完全に自分仕様になっているが毎回同じ設定を過去のプロジェクトのをみながら都度やっていて時間も無駄なのでまとめておく fulephpで準備されている機能の準備 日本語を使う準備 fuel/app/config/config.phpを編集 //81行目くらい 'language' => 'ja', // Default language 'language_fallback' => 'en', // Fallback language when file isn't available for default language 'locale' => 'ja_JP.UTF-8', // PHP set_locale() setting, null to not set //88行目くらい 'encoding' => 'UTF-8', validation回りの準備 validationで使うメ

はじめに socket.ioを使って簡単なチャットサーバーを作ろうとしました 当初、socket.ioを使わないapiの実装はphpで、socket.ioの部分だけnode.jsで・・・と考えていたのですが どうせならapiの部分もnode.jsで作った方がいいのかなと思ってちょっと調べことをメモ ほしい機能 ・getまたはpostリクエストを受け取ってjsonを返す ・mysqlを使う ・アクセスログ、エラーログ、アプリのログを出力 ・定数をどこかにまとめる ・サーバーが落ちた時に再起動するようにしたい 使った方が便利そうなもの ・バリデーションのライブラリ ・Promiseを使ってコールバック地獄にならないように とりあえずはこんなところだろうか getまたはpostリクエストを受け取る ここで必要そうなことはアクセスされるurlによって処理を振り分けることとgetとpostのパラメー

はじめに 何度かまとめようと思ってたんですけど、なかなかちゃんとまとめられなかったので今回再度まとめてみようと思います。 socket.io単体での実装方法はよく見かけるのですが、LAMP環境で構築されたシステムと一緒に構築されるサンプルがあまり見かけられなかったので今回はこれの実装方法をまとめてみようと思います。 また、僕は普段LAMP環境でのwebサービスをメインに扱っているので極力node.jsの使用を最小限にすることを心がけて作業を進めました（node.js得意でないだけです） システム構成 基本的にwebサイトと同じですが、チャットルームではページ遷移なしでの画面を更新するためにnode.jsを使用します。 通常のwebサイトとの1番の違いはjavascriptでクライアントからサーバへのデータ送信以外に、サーバからクライアントへのデータ送信も使用することでしょうか。 node.

はじめに vue.js使うことになりそうなので少しいじってみたのでメモしておく。 とりあえず今回やってみようと思ったことは以下 ・ヘッダー、フッター、メニューなどの共通化 ・vue-routeを使ったルーティング ・ログイン機能 ・APIへのリクエスト ・vuexの導入 セットアップ プロジェクトを作成してvuexとaxiosをインストール。vueでのajaxしたい場合axiosが奨励されてるぽい? $ vue init webpack test $ npm install --save vuex axios作る画面 ・ログイン画面 ・商品一覧画面 ・商品詳細画面 こんなかんじの管理画面とかでありそうな画面を想定。ログイン画面以外に未ログイン状態でアクセスしたらログイン画面へリダイレクト。商品一覧と詳細画面ではAPIへリクエストして取得したjsonを画面へ表示する。 ディレクトリ構成 vu

はじめに アプリ開発してお客さんに確認していただいて、アップルに審査してもらうまでにやっとたどり着いたので備忘録としてメモ イメージとしてはこんな感じで、webアプリとか受託開発するとよくある形だと思われます 環境 アプリを確認する人 開発 開発者 Staging お客さん 本番 一般ユーザーとアップルの人 で、今回はプッシュ通知もやったのでサーバ側に設置する証明証とか少し意識しました アプリをインストールするのに必要なものとか 環境 アプリ インストール元 アプリ アップロード先 証明書 プロビジョニングファイル プッシュ通知の証明書(サーバーに設置する) 開発 xcode なし Development 開発用 Apple Development IOS PushServices: ***(+秘密鍵) Staging デプロイゲート デプロイゲート Distribution AdHoc版

はじめに 意外とおろそかになってしまうこともあるのですが、サービスの規模によってはちゃんとしておかないと後々問題になるのでできる範囲で僕がやっていることをまとめておきます。 とりあえず最低限やっておきたいこと ・sqlのエラーなど致命的なエラーが発生した場合はそれ以降処理が続行されないような実装 ・致命的なエラーが発生した場合はアラートメールなどを送信するようにする ・致命的なエラーが発生した場合はちゃんとログに詳細が残るようにしてあとから調査できるようにする 当たり前の事なのですが、これくらいを実装しておけばとりあえずは大丈夫かなぁと今までの経験上思ってます entryポイントでエラー処理を拾えるような修正 「HttpNotFoundException」は拾えるように最初から書いてあるのですが「HttpServerErrorException」は拾えるような実装になっていないので下記のよ

はじめに 以前に自分が作ったシステムで主にjqueryを使って作ったものがありました。 基本的には困ることはなかったのですが、特定のページだけ複雑になってきていじるのが嫌になってきました。。。 作りたい画面のイメージとしてはこんなかんじ メイン画面 モーダル1 モーダル2 ・画面の中央にリストがある。 ・「追加」ボタンで追加するデータの種別選択画面モーダルをひらく ・「次へ」ボタンで種別ごとに設定画面があるのでそれらへ遷移 ・「登録」ボタンでモーダルを閉じてリストへ反映 リストへの登録を繰り返して、すべて登録できたら「サーバーへ送信」ボタンで登録が完了するようなイメージの画面。 最初はそこまで複雑でなかったのだが、種別が増えていって種別によっては2ページ、3ページかけて項目を入力するものはでてきた。。。 jQueryで作っていたのだが、さすがに1つのHTMLにすべてを書いてしまっていたので

やりたいこと 少しアクセスの多いサイトなどではありがちなmysqlのレプリケーションを使うことがあると思います。 fuelphpでそれに対応するときの作業をメモしておきます。 いちおう今回想定する環境はマスタdb1台、スレーブdb2台構成のものとします。 db定義を設定 とりあえず今回は開発環境(development)での作業を扱います。 まずは、fuel/app/config/development/db.phpを編集 <?php return array( // マスタdb 'default' => array( 'connection' => array( 'dsn' => 'mysql:host=master_hostname;dbname=dbname', 'username' => 'master_userame', 'password' => 'master_passwor

はじめに フロントエンドのアプリ開発がメインの案件ではあったのですが、結局サーバ側もけっこういじりました。 自分がメインの案件ではなかったのですが そこそこの期間をかけてAPIを実装して今までにない経験もしたのでそろそろメモしておきます。 自分流とは1番違う点としてはfuelphpのクエリビルダーを駆使したことでしょうか 設定系 rest api設定 本番環境ではSSLでの実装になるので、いらないっちゃいらないのですが気休め程度にBasic認証をいれました fuel/app/config/***/rest.php return array( 'auth' => 'basic', 'valid_logins' => array('hoge' => 'hogepass'), ); db設定 dbは基本的なmysqlのマスター・スレーブ構成になります。 fuel/app/config/***/d

はじめに expressでWebアプリを開発してみて次回以降もやるであろうなという作業をまとめておく といっても自分の趣味レベルで作ったものなので大規模にも考慮してとかは全然できていません。 とはいえせっかくやったのでできる範囲で案件で使えるようにと考えながらやりました 開発環境作成 プロジェクトの初期化と必要なモジュールをインストール mkdir -p dev-app/public; cd dev-app/public; npm init; npm install express http body-parser ejs path domain express-session config express-domain-middleware log4js mysql connect-mongo mongoose date-utils sprintf-js pm2 --save;必要なモジ

やりたいこと angular.jsを使ったシングルページwebアプリケーションの開発中にどのページでも同じ処理を行いたい場合がありました。 今回やりたかったのは以下のような処理を全ページにいれたかったです 例1. ログインせずにアクセスされたらログインページを表示するような処理 例2. socket.ioとの接続が確立できていなかったら接続または再接続を行う処理 phpなどのサーバサイドでの実装はよくやってましたがjavascript(というかangularjs)でこういう処理は初めてでした。 実装 実際にこんなに単純な認証があるかはわかりませんが、サイトにアクセスしてきたら必ずサーバへリクエストしてokならそのことを保持しておいて以降は何もしないという流れになります // メイン処理 var App = angular.module("App", ["ngRoute", "ngResou

はじめに やりたかったことは、ec2上で構築したwebサーバーからプログラムでs3へ保存、削除したかったことです。 AWSのS3を使う手順 - とりあえずphpとか こちらでs3を使う手順をまとめましたが、その際にs3fsを使ってec2にs3をマウントしたのですが実際にプログラムで利用する際はそういうことではなかったかも、、、 今回はawsのsdkを使ってphpで実装したのでその手順をメモします sdkの入手 http://aws.amazon.com/jp/sdk-for-php/ こちらのページにダウンロード「AWS SDK for PHP」というボタンがあり、そこからgithubへ遷移できるのでそこからzip形式の一式取得可能です。 ダウンロードしたファイルを解凍して、そのままfuel/app/vendor以下へ移動します。 >例 fuel/app/vendor/aws awsのアク

はじめに 今回やりたかったことはよくあるログイン・ログアウトの実装です。 で、react-routerを使っての実装方法が以下にありました。わかりやすかったです React Routerで認証を制御する方法 - Qiita ログインしているかどうかの判定はstoreにuser.sessionを用意してこれに値がセットされていればログインしているとみなす。 本来であればクッキーにtoken等をセットしてそれがあれば自動でログインするような形がいいのかな 今回はとりあえずなので、毎回ログインさせる形で ディレクトリ構成は以下のような形で実装してみました . ├── actions │   └── user.js ├── reducers │   └── user.js ├── components │   ├── app.js // 全画面共通のコンポーネント │   ├── auth.js

はじめに ちょっと前に自分なりに調べて放置になっていたのでまとめておく まず前提としてiPhoneとAndroidで全然違う。 で、さらにios10とios9以下とでちがうのとchrome53以上と53未満でちがう。 端末やブラウザのバージョンで処理を切り分けるのがよいのかと思われる iPhone > ios9以下 videoタグを使ってインライン再生するのは無理ぽい。 なので、videoタグで読み込んだ動画をcanvasにsetintervalで随時描画してゆく形になると思う。 また、音声についてはcanvasでは全然関係ないので別途audio要素を作って再生する形になると思う。 > ios10 videoタグを使ってインライン再生ができるようになった。 が、自動再生については音声なしのときの場合のみ使える。 Android videoタグを使ってインライン再生が可能。 > chrome

はじめに phpからmysqlへiphoneの絵文字を含む文字列を登録しようとすると絵文字以降の文字列が登録されない。という現象が起きました。 はじめは、iphone絵文字がmysqlのutf8におさまりきらない文字コードを使ってるとのことだったので登録前に以下のような関数を使う事で無理矢理対応していました /** * iPhone絵文字を削除する関数 */ function filterIosEmoji($string) { return preg_replace('/[\xF0-\xF7][\x80-\xBF][\x80-\xBF][\x80-\xBF]/','',$string); }しかしちょっと強引だったので対応したときのメモです やったこと googleで検索するとたくさん出てきました。僕の場合は以下の対応で無事解決しました。 ちなみにこの対応でiphoneで登録した絵文字をa

今回やりたかったことは 特定のハッシュタグがついたツイートの画像を収集したいということ https://dev.twitter.com/docs/api/1.1/get/search/tweets https://dev.twitter.com/docs/platform-objects/tweets これを見たら解決でした（APIのリクエストとレスポンス） まず以下のパラメータを設定 ・q = "#" + ハッシュタグ ・count = 100（1回のリクエストで取得したい件数　ちなみに上限が100です） ・include_entities = 1（またはtrue 今回は画像を収集したかったのでこれが必要でした ツイートのメタデータが取得できるオプションらしいです） で、あとは必要なパラメータを設定して「https://api.twitter.com/1.1/search/tweets.

はじめに 今回やりたかったのは、ありがちなログイン・ログアウト処理。 初回起動時にログイン画面を表示。1度ログイン後は次回起動時にもログイン画面は表示しないということ。 方法としてはuserDefaultsという端末のストレージにログイン状態を保存しておくというやりかたになります。 実装方法 AppDelegate まずは起動時の処理をAppDelegateに記述します。 userDefaultに値isLoginがセットされていればログイン中用のMemberViewControllerを表示。 セットされていなければ未ログイン用のVisitorViewControllerを表示。 AppDelegate.swift class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? var naviga

はじめに 今回やりたかったのはこんなかんじの画面です。 iosで吹き出しのライブラリとか実装方法とか検索するとちょいちょい出てくるのですが、ちょっと難しかったりで結局自分で実装することにしました。 最初は吹き出しの画像を用意してそれを背景にしたUILabelとかで実装しようとしたのですが、なんかきれいにできず画像なしでつくることにしました。 UITableViewを使って、1メッセージを1行にするようなイメージです。 実装方法 あんまりスマートなやり方ではないのですが、こんなかんじでUIViewの中にUILabelをいれて吹き出しの部分は三角形の線を引いたUIViewを重ねてそれっぽくさせてみました。 ViewController.swift class ViewController: UIViewController, UITableViewDelegate, UITableViewDa

css a :visited, a:hover, a:active { color:#ABC }インライン <a style=":visited {color: #ABC}; :hover {color: #ABC}; :active{color: #ABC};">・・・</a>とりあえずこんな感じでいけた 以上です

はじめに fuelphpで必ずやってる設定などまとめ - とりあえずphpとか 僕がメインでやれる案件では上記の形で開発をしています。こちらにも書きましたが、基本的にsqlをゴリゴリ書くのが好きなのでクエリビルダなどは使わないで開発することが多いです。 その際には、fuelphpのDBクラスにDB::last_queryというメソッドが用意されているのでこれの内容をログ出力する形で進めてきました。 が、今回はクエリビルダを積極的に使っている案件での開発だったので別の方法を調べる必要があったのでメモしておきます 実装方法 プロファイル設定 基本的には開発環境(DEVELOPMENT)での設定になると思います。 development/config.php return array( 'profiling' => true, 'log_threshold' => Fuel::L_INFO, )

はじめに 今回やりたかったことは、あるurlへアクセスした際に ・未インストールならAppStoreへ誘導 ・インストール済であればアプリを起動（起動時の画面も指定したい） ios8以下では、ココとかの記事の通り、 アプリにカスタムurlスキームを設定して、htmlのiframeで強制的に遷移。アプリがインストールされていなければAppStoreへリダイレクトみたいな実装が一般的のようでした。 で、ios9でも上記の形で実装してみたのですがアプリが起動せず、、、 理由としては、ios9からはセキュリティポリシーが変更されてiframeでの強制的に画面遷移させるというのがダメになったようでした そこでたどり着いたのがuniversal linksというものです。 urlとアプリをマッピングして、「http://***.com/app/」とかへアクセスすると ・アプリインストール済であればアプ

まずやりたかったことはユーザがアップロードした画像をcronで1日1回加工する。 しかしアップロード画像の所有者はapacheで、権限は「644(rw-r--r--)」であったため作業用アカウントではファイルへの上書きができない状況である そこでまず考えたのは 上書きできるようにファイルの権限を変えてしまおうと考えた。 が、その場合はアップロードプログラムの変更が必要だし、権限甘くして解決するというのもどうも、、、 次に考えたのは 画像加工処理をwebから見える箇所に設置して1日1回そのスクリプトをたたくcronを設定しようかと考えた。 が、これもなんか無駄だし、厳密にはアクセス制限とかもしなくてはならないし、、、 で、apacheユーザでcron設定すればいいだけだったんですね、、、 % su - apache This account is currently not availabl

はじめに 最近流行りのLaravelを調べたのでまとめておく 実案件で使うかは未定だが実際使うときに簡単に導入できるようにというのが目的 やること ・1. Laravelインストール ・2. 設定ファイルなどを修正 ・3. ページの作成手順(Routerの設定とViewとControllerの作成) ・4. DBを使う ・5. SQLをログに残す ・6. セッションを使う ・7. アプリ全体の共通処理を実装する(ログイン認証、ログ出力など) ・8. エラー処理 ・9. バリデーション実装(入力フォームとか) ・10. ページネング 1. インストール 作業のながれは ・composerインストール(なければ) ・Laravelインストール composerインストール ダウンロード > curl -sS https://getcomposer.org/installer | php --

はじめに bootstrap製の管理画面テンプレート。実際に使ってみたけどこれは便利 自分が仕事で使う場合は、以下ぐらいがあればとりあえずok ・画面左のメニュー ・一覧画面 ・詳細画面 ダウンロード cd ~/src/ wget https://almsaeedstudio.com/download/AdminLTE-master unzip ./AdminLTE-master cp -frp ./AdminLTE-master /Path/To/Documentroot/AdminLTE 実装 ベースとなるhtmlを準備 不要な部分の削除とcssとjsへのパスを合わせる 以下が全画面共通のhtmlで★の部分を画面ごとに実装してゆく ベースhtml <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv=

やりたかったこと project ├── public │　　 └─ assets │ 　　 　　├─ js │ 　　 　　├─ ・・・ ├── fuel └── nodejs # 自分で作ったフォルダ ├─ bower_components #bower installで取得したファイル │ 　　 ├─ angular │ 　　 ├─ angular-route ├─ ・・・ 今まではこんな感じのディレクトリ構成で、bower_components以下のファイルを自分で/assets/js以下へコピーしたり、/assets/jsからbower_componetsへのシンボリックリンクをはったりしてとかやってました。 けどこれだと、 ・ライブラリ追加するたびにコピーしなくてはならない ・開発と本番環境とか分かれてたらそれぞれシンボリックリンクはらなくてはならない とかなってしまって非効率だ

はじめに 今回やりたかったのはユーザー操作でページから離れるときに何か処理がしたいということ。 で、とりあえず考えられる操作としては以下 ・ブラウザを終了したとき ・タブを閉じたとき ・別タブへ移動したとき ・別アプリへ移動したとき ・ホーム画面へ移動したとき 検証した端末は以下 ・iOS10(Safari) ・iOS9(Safari) ・Android(標準ブラウザ) ・Android(Chrome) 検証 これらの操作を行うときに発火されそうなイベントとして、visibilityState、pagehide、unload、blurあたりが呼ばれそうなのでとりあえずこれらについて調べてみた。 で、結論から書くと以下のようになった。 iOSで直接ブラウザ閉じたときとタブを閉じたときに何か処理をするというのはできないのではないかなぁということになりました。 HOME画面へ 別アプリ選択画面