はてなブックマーク

2度と使わないかもしれないけどメモしておく。 ある要素が画面の何％見えているか判定する処理。 あんまりやる機会ないと思うけど、特定の要素が100%見えたら何らかの処理するとかそんなイメージ。 <script> var target = document.getElementById("contents"); var viewportHeight = getViewportHeight(); var style = target.currentStyle || document.defaultView.getComputedStyle(target, ""); var height = parseInt(style.height); var debug = document.getElementById("debug"); setInterval(function() { var offse

大した話じゃないけどメモ。 やりたいことは、配列から条件で絞り込むみたいなこと。 array_filter使えばよいみたい。 // 検索対象のリスト $items = [ ["name" => "田中", "gender" => "woman"], ["name" => "高橋", "gender" => "woman"], ["name" => "亀井", "gender" => "woman"], ["name" => "櫻井", "gender" => "man"], ["name" => "松本", "gender" => "man"], ["name" => "大野", "gender" => "man"], ]; // 検索条件 $conditions = [ "gender" => ["woman"], ]; // 検索処理 $func = function($conditi

アプリ側だけawsのコンソールからチャチャッと動作確認しようと思ったらけっこうハマったのでひな形メモしておく。 このエラーがなかなか消えず。。 Invalid parameter: Message Reason: Invalid notification for protocol APNS_SANDBOX: Notification is malformed (Service: AmazonSNS; Status Code: 400; Error Code: InvalidParameter; Request ID: xxxxxxxx-xxxx-xxxx-x\ xxx-xxxxxxxxxxxx)やりたかったのは「タイトル」「本文」「カスタム項目」の送信。 { "APNS_SANDBOX":"{\"aps\": {\"alert\": {\"title\":\"タイトル\",\"body\"

以前にgoでのapiサーバーの実装を調べたけどすでに色々忘れかけてるので手順などまとめておく。使おうと思った理由としては以下の要件が厳しめで、phpとかでは厳しいと思ったため。 ・レスポンスの高速化 ・APIサーバー数の最小化 あと、時間が空くと環境作ったりやらも忘れてしまうので合わせてメモしておく。で、実際にやりたかったことは以下 macにgoをインストールして開発環境構築 dep(パッケージ管理ソフト)導入 ルーティングを設定してget, post, put, deleteメソッドに対応してjsonを返す 環境毎にconfigファイルを定義 gormでmysqlを使用 ログ出力 エラー処理 go-server-starterでプロセス監視 おわりに macにgoをインストールして開発環境構築 http://kimagureneet.hatenablog.com/entry/2017/1

はじめに 今回やりたかったのは、dbに文章が登録されていて あるレコードと類似した内容のデータを取得するということ で、awsのelastic searchというサービスがまさにやりたいことがあったので試してみた。 awsコンソールでの作業はわかりずらい箇所はなかったので省略 indexとtypeの作成(dbのテーブル作成と同じ) $url = "search-xxxxxxxxxxxxx.ap-northeast-1.es.amazonaws.com"; $index_name = "test-index"; $type_name = "test"; // index作成 $cmd = "curl -XPUT {$url}/{$index_name}" exec($cmd); // type作成 $json = json_encode(array( $type_name => array(

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

centosでseleniumでやる方法探してたらまさにやりたいことがこのページにまるまる載ってました。助かりました。ありがとうございます。 php-webdriverを使用してスクレイピングをした話 - 備忘録 ほぼこのとおりにやったらいけました。 一部ちがったところと動かなかったところをメモしておく。 最終的な各種バージョン # CentOSのバージョン $ cat /etc/redhat-release CentOS release 6.8 (Final) # Firefoxのバージョン $ firefox -v Mozilla Firefox 45.7.0 # JAVAのバージョン $ java -version openjdk version "1.8.0_121" OpenJDK Runtime Environment (build 1.8.0_121-b13) OpenJDK

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

はじめに 今回やりたかったことは以下 ・独自ドメインからメール送信したい ・独自ドメイン宛のメールを受信して別のメールに転送したい ・1つのサーバーで複数ドメインを扱いたい ・できるだけ迷惑メールやスパム扱いされないようにしたい 今回は自サービスからメール送受信したいだけなので、 メーラーなどで送受信するするためにSMTP-AUTHやPOPサーバーなどは作りません 今回やった環境は以下 ・ドメインはお名前.comで取得 ・サーバーはさくらvpsでcentos6.7 扱うドメインは以下のような形で ・xxx.xxx.sakura.ne.jp さくらvpsを借りたときにサーバに設定されているドメイン ・hoge.jp、fuga.jp 取得した独自ドメイン IPアドレスはxxx.xxx.xxx.xxxとします 実装 - メールを受信して転送するようにする dns設定 お名前.com設定 ホスト名

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

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

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

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

はじめに 最近ちょっといじってますが、またよくわからず簡単な事にはまってる気がする・・・ やりたかったことはurlパラメータを受け取ってmysqlを検索。結果をjsonで返すというだけです で、mysqlからデータ取得してconsole.logすると取得できるところまでは確認できたのですがレスポンスを返そうとすると以下のエラー javascript router.get("/", function(req, res, next) { db.query("select * from users", function(err, rows) { if (!err) { res.json(rows);// ★ココで落ちる } }); });コンソール出力 /var/www/html/example.com/public/node_modules/mysql/lib/protocol/Parser.

開発のながれ 1. 新規プロジェクト作成(既存のプロジェクトに追加する場合は不要) 2. プラグインの開発 必要なディレクトリとファイルを作成 $ tree plugins-dev/ plugins-dev/ └── plugin-sample ├── plugin.xml ├── src │ ├── android │ │ └── Sample.java │ └── ios │ └── Sample.swift └── www └── sample.js3. 上記のファイルを編集してプラグイン開発 4. 作成したプラグインをプロジェクトに追加 5. プログラム(js)からプラグインを呼び出すようにしたり プラグインの修正は以下を繰り返す ・プラグインを修正 ・プラグインを削除して追加 ・動作確認(自分の場合は、xcodeまたはandroid studioでビルドしてる) 実装 - iOS

はじめに 今回やりたかったことは以下 ・ページが表示されたら動画を自動再生する ・全画面表示ではなくページに埋め込む形でインライン再生 ・スマホ（ios・android）で実装 動画広告のようなイメージでしょうか videoタグを使えばできると思ったのですが、スマホではautoplayが効きませんでした。 色々試してみたのですがユーザの端末操作(再生ボタンをクリック等)なしでの自動再生は端末の制御でできないようでした。 ※スマホで勝手に再生して意図しないパケット使用量の増加を防ぐためのようです ogv.jsライブラリ で、調べていると、ogv.jsというライブラリがありました。 中身を見てみるとurlから取得した動画ファイルをデコードして随時canvasに描画していました あまり理解できていないのですが、こんなの作ってしまうなんてすごいですね・・・ https://github.com/b

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

はじめに 今回やりたかったことは以下 ・expressからmysqlへクエリ実行 ・ormは使わずsqlを直接実行したい ・dbの処理部分は共通化したい ・エラー処理も実装する node-mysqlというライブラリを使いました 実装 ファイル構成 ├── app.js ├── db.js # dbの共通処理はココにまとめる ├── controllers # コントローラはココに │   ├── login.js │ ・・・ ├── models # db処理はココに │   ├── user.js │ ・・・ 共通処理を実装(db.js) とりあえずselectとinsertのsqlを実行できるようにしておく models以下の各クラスからこのクラスのメソッドを呼び出す var mysql = require("mysql"); module.exports = { conn: null

はじめに 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;必要なモジ

はじめに 最近流行りの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 --

はじめに 今更な内容ですが実際に試したことがなかったのでメモ。 socket.ioをスケールアウトさせるような規模のサービスを作る機会がないのでやっていなかった。。。 まぁ今後もあるかどうか不明だけど、いちおう試しということで 実装自体はredisのpub/subを使ってくれるみたいで簡単だった > サーバー構成 web / web2 / redisという3台構成を想定 ipは順番に192.168.33.10 / 20 / 30とする Redisサーバ構築 redisインストール ※バージョンは今時点の最新(たぶん) root> cd /usr/local/src/ root> wget http://download.redis.io/releases/redis-3.2.3.tar.gz root> tar xvfz redis-3.2.3.tar.gz root> cd redis-

はじめに awsのdynamodbをログ保存用として使用 今回は他の人が作った環境での作業だったのでコントロールパネル等の設定は記載しません 不慣れなのもあると思うけど、データの取得と登録する調査をするだけでけっこう時間かかってしまった、、、 今回はIAMロールを使っているのでAPIキーとシークレットはコードには書いていません ※IAMロールについてちゃんと理解できていないので意味不明だったらすみません、、、 ちなみにawsのphp用sdkはダウンロードして使用しました 実装 MyDynamoDB.php require(AWS_SDK_PATH.'aws/aws-autoloader.php'); use Aws\Common\Aws; use Aws\DynamoDb\DynamoDbClient; class MyDynamoDB { // aws設定 public static $

はじめに 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=

やりたかったこと 1. ユーザが入力フォームからデータを入力して登録ボタンをおす 2. 登録完了ページを表示 3. ブラウザの戻るボタン（iPhone等ならスワイプで戻る） 4. 1で入力した内容が残ってしまう、、、 上記の4.で入力した内容をすべて空にしたいというのが今回やりたかった内容です。 実装 <script src="./jquery.js"> <form action="./input.html" method="post"> メッセージ：<input type="text" name="message" id="message"><br/> メッセージ2：<input type="text" name="message2" id="message2"><br/> <input type="submit" value="送信"/> </form> <script> // chr