Debuginfo

思考とアウトプット

AngularJSでスターレイティング(星の評価)する方法

よくある☆による評価のコードです。 Add/Deleteボタンを使いましたが、イベントをフックする方法が色々あると思います。 unshift, shift, push and popを使ってfontawesomeのClassを書き換えてます。 in View Recommended! <button class="btn btn-warning btn-sm" ng-click="recommendDelete()"><i class="fa fa-minus"></i></button>

AnuglarJSでRadioボタンとSelectを連動させる方法

Selectの最初のオプションが空欄になってしまったりしてハマりましたが、ポイントはng-changeイベントでSelectの初期値を設定してやることです。 <label class="photoCategory" for="breakfirst"> <input id="breakfirst" type="radio" name="category" ng-model="category" value="breakfirst" ng-change="categoryType=selections.breakfirst[1]"> Breakfirst </label>

モバイルでText Input入力時にズームさせない方法

忘れないようにメモ。下記をhead内に入れることでモバイルデバイスで表示が固定される。 Text inputに限った話ではないみたいだけど。 AngularJSではapp/index.htmlに記述ですね。 # app/index.html <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> 個人的にはResponsiveでは必須だと思うんだけどな 参考 h</meta>…

mobile対応でfastclickを導入してないとヤバイのでAngularJSでも導入する

前のエントリでメニューの高速化をやりましたが、周知の事実ですが、一応。 mobile safariにはタップの300msの遅延があります。これをFixをするにはfastclickを入れます。 Yeomanを使っていればbowerで一発。 $ bower install fastclick --save あとは適当な…

Bootstrap3でモバイル時のnav pull down menuを早くする

Responsiveで出てくるハンバーガーメニューの動きです。 これ微妙に遅くてもっさり感があるので、app/styles/main.scssで上書きした。(main.cssでも同じ) # vi app/styles/main.scss // Speed up nav dropdown in mobile .collapsing { position: relative;…

Instagramの写真をFacebook Open Graph APIでアップロードするとfbcdn.net urls are not allowedと言われて投稿できないときの解決方法

Facebook Open Graph APIでリンク付きの投稿をInstagramの写真ですると、下記のようにエラーを吐きました。 (#1500) fbcdn.net urls are not allowed. おそらくFacebookがInstagram購入後にInstagramの写真をFacebook cdnにのせるようになって、これがFacebo…

AngularJS+Bootstrap3でモバイルview時にnavbarが閉じない(collapseしない)現象を解決する

どうやらSingle page applicationのときに起きる現象のようですが、Bootstrap3を使っていてwindowサイズを小さくするとメニューがハンバーガーになります。ここでリンクをクリックするとリンク先でハンバーガーのnavbarが閉じなくなります。解決方法は、下記…

Bootstrap3のMobileで見たときにヘッダの余白が15pxできてしまう現象を解決する

下記の写真(右上!)のようにモバイルで見たときに微妙に余白ができてズレる現象が起きました。 デバッグツールで見てみると.rowのmarginが影響しているようです。 解決方法は、 .rowFullWidth { margin-left: 0 !important; margin-right: 0 !important; }…

AngularJSでng-showをコールバック等で使うときは$applyを使う

下記のようなViewがあって、 <div ng-show="showPicture"> picture here! </div> そのオンオフをFactory側で行うときは、$scopeのスコープ外なので$apply()をしないと反映されない。 Creator.initialize($scope.loginStatus.userID, function(){ $scope.showPicture = !$scope.showPicture; $s…

MacのChromeでユーザ切り替えするショートカット

⌘ + Shift + M で右上の切り替えメニュー表示後、上下の矢印キーで選択、エンター。

fontawsomeをAngularjS + Yeomanで使う方法

grunt build後フォント読み込み時にエラーが出るのでフォントディレクトリに入れてみました。 1. fontawesomeのインストール by bower $ bower install font-awesome --save 2. fontsをbowerディレクトリからコピー $ mkdir angular/app/fonts $ cp bower_co…

ng-repeatとradioボタンを同時につかってうまくいかない時の解決方法

ハマり所です。。 ng-repeat内のng-modelはスコープが違うのでうまく動きません。 解決方法は下記のようにキーを渡してスコープ内でOverwriteされないようにする。 controller $scope.cover = {selected: 0}; view <input type="radio" id="cover{{$index}}" name="cover" ng-model="cover.selected" ng-value="$index"> 参考:https://github.com/angular/angula…

Mojoliciousの文字化けをTengのinflateでデコードする

MojoliciousのJSON出力で文字化けのyusukebeさんのコメントにもあるようにMojoliciousは内部的にutf8フラグを落としているようです。 毎回decode_utf8をするのは面倒なのでTengのスキーマ宣言クラスでinflateしてしまいましょう。 package MyApp::DB::Schema…

AngularJSでRedirect後に戻るでRedirect前のページに戻る方法

AngularJSでモバイルからのアクセスを検知してモバイル用のページに振り分ける方法のエントリでリダイレクトを使用しましたが、これだと戻るボタンで戻ると再度リダイレクトされて戻れません。戻るを機能させるためには、下記のようにします。 $location.pat…

(フリーの地図ライブラリ)Leafletでタッチデバイスのブラウザでスクロールダウンを可能にする方法

Leafletはフリーで使える地図ライブラリです。Open Street Mapを差し込むことでgoogle mapsではない選択肢になります。(Google Maps APIには4000リクエスト/Dayのリミットありなので。。) これをタッチデバイスで使用するとスクロールダウン時にマップの位…

Instagram APIでPaginationを実現する

Instagram APIでユーザフィードはデフォルトで20しか返ってきません。Countパラメータで変更可能ですが、自分が確認したところ、30ぐらいが上限のようです。なのでユーザが見ているときに、"もっと見る"のようなボタンを容易して次を見させるのがよさそう…

AngularJSでモバイルからのアクセスを検知してモバイル用のページに振り分ける方法

基本的にResponsiveで対応しますが、根本的にページの表示自体をモバイル用にしたい時があります。 サーバ側でHeader等を調べてページを振り分ける方法もあると思いますが、基本的にAPIを返すというのをサーバ側の処理にしたいし、Single Page Application的…

AngularJSでMasonryを使う

Masonryとはレンガのように要素を並べるJQueryプラグインです。 NHKスタジオパークで使われてるように大きさによって動的に要素を並べてくれます。 参考:なんだこれ!!「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ!! こ…

Twitterでバイラルさせる方法

元ネタはA Scientific Guide to Writing Great Tweets: How To Get More Clicks, Retweets and Reach エンジニアですが、マーケティングを勉強したいと思ってます。ブログを流し読みしているだけだと身になってるか疑問なので、まとめていきたいと思います。…

CSSでグラデーション+半透明する

CSS

ブラウザによって挙動が違うらしいのでツールを使うのがBetter。 http://www.colorzilla.com/gradient-editor/

Perlでタイムゾーンや国名を緯度経度から取得する方法

Instagram APIが緯度経度しか返さなくて、エポックタイムじゃ現地時間がわからない。。 ということで、タイムゾーン(他の情報も)を取得してみようと思います。 調べたら、Geonames.orgという団体がフリーで提供しているようです。 これを使います。 1. ユ…

AngularJSのng-repeatのループ終了後にfunctionを走らせる方法

外部ライブラリ等ではhtmlタグを作った後にfunctionをアプライするときがあります。 例えば、テーブルを作成後にテーブル整形するJQuery functionを適用する場合です。 AngularJSでは、ng-repeat終了のイベントは存在しないのでDirectiveを使うことになりま…

HashをJSON::XSでシリアライズして、Crypt::CBCで暗号化して、GZIPで圧縮して、それをBSONバイナリとしてMongoDBに保存するPerlコード。またその逆も。

MongoHQの通信はセキュアでありません。なのでhttpsのAPIを使って保存するか、もしくはアプリケーション側で暗号化して保存する方法があると思います。今回は後者でコードを書いてみました。 package Util; use Moo; use JSON::XS; use Crypt::CBC; use IO::…

PerlからMongoHQを操作する

http://www.mongohq.com/でサインアップします。 "Start with an Elastic Deployment"でちゃんとSandboxを選びましょう。 512Mまではフリーです:) 下記のようにデフォルで有料プラン。。 まず、MongoHQの管理パネルでユーザを作ります。直感的にわかると思い…

Ansibleでgit clone private repoする方法 - そのPlaybookをDocker containerとPacker provisioner両方で使う場合

AnsibleをVM経由でプライベートRepoをgit cloneするのにはSSH fowardingを使う模様。 今回はAnsible playbookをPackerのAnsible provisionerで使いたい。けど、ご存知のようにPackerのAnsible provisionerはansible-localでAnsibleホストとは独立で、SSH fow…

MySQL - localhost is not a part of '%'

http://stackoverflow.com/questions/16287559/mysql-adding-user-for-remote-access はまった。%以外にlocalhostにも設定が必要とのこと。 $ /usr/bin/mysql -u root -p$MYSQL_ROOT_PASS -e"grant all privileges on db.* to user@'%' identified by '$MYSQ…

Design with our ears

CTO

https://zapier.com/blog/feedly-interview-edwin-khodabakchian/?utm_campaign=How%20Fast-Growing%20Feedly%20Keeps%20Focus%20on%20User%20Feedback%2C%20Core%20Features&utm_medium=email&utm_source=blogblogposts Google Readerからシェアを獲得したF…

動的なリンクをjavascriptを使ってPDFをダウンロードする方法

これだとダウンロードできるんだけど、a.click()の下に$location.hrefとか置けないんだよね:( promise.then(function(res) { console.log(res.url); var a = document.createElement('a'); a.href = res.url; a.download = "a.pdf"; a.click(); }) ちなみに…

PackerのAnsibleで作ったDockerコンテナのユーザはロックされている

ssh -p <port> root@xxx.xxx.xxx.xxxでは入れるけど、作ったユーザでユーザログイン(pubkey認証)できなかった。かなりハマったけど、dockerにsyslogがインストールされてなくて何も/var/log以下に吐かないのでここをまず修正。 $ yum syslog -y $ /etc/init.d/rsys</port>…

Ansibleでknown_hostsに接続するホストを追加しない方法

デフォルトだとansible-playbook -i 'localhost:2222,' hoge.ymlしたときに$HOME/.ssh/known_hostsにホストエントリが追加されます。yesと入力すれば次回からは問題ないんですが、バッチで処理したいときはyesと打ち込めないのでこれを回避したいと思いまし…