iPhone6の時代のviewport設定について - Qiita
従来、スマートフォンの横幅といえば 320px(retina対応で640px) というのが定説でした。 が、iPhone6の普及でそうとも言えなくなってきたのが今日このごろです。 iPhone5の横幅は320px(retina対応で640px) iPhone6の横幅は375px(retina対応で750px) ちなみにNexus5の横幅は360px(retina対応で720px) さてこんな環境で、viewportはどう指定するのがベストなのでしょうか。 前提知識 viewportのwidthという値に、device-widthと指定すると、スマホの画面幅 = 表示するwindowサイズ、となる。 widthにピクセル値（640px、とか）を入れると、表示幅はそのピクセル数になり、それで画面いっぱいになるように適宜拡大縮小される 古いAndroidでは、widthにピクセル値を指定しても
あるサイトのツイート数・いいね数をterminalで常に表示する - Qiita
今日公開したサイトのシェア数が伸びてるか、 気になって気になって仕事にならないので、シェルスクリプトを書いた。 一度実行して放っておくだけで、 likesとtweetsを表示して、30秒おきに更新してくれます 実装 とりあえずbashなのでzshとかで動くかは分からず。 brew install jq、必須。 export url=$1 while : do likes=$(curl "http://graph.facebook.com/$url" -s | jq '.shares') tweets=$(curl "http://urls.api.twitter.com/1/urls/count.json?url=$url" -s | jq '.count') clear echo $url echo " - likes: $likes" echo " - tweets: $tweets"
phantomjsで出るエラーだけ追うスクリプト - Qiita
phantomjsで某ページのスクリーンショット撮る、ってのがしたかったんですが、 どうも他のブラウザでは出てないけど、phantomでだけエラーが出てる! ということが分かり、 それだけ見つけるためのスクリプト書いてみました。 (書いたというか、examplesつなぎあわせ) var system = require('system'); var url = system.args[1]; if (!/^https?:\/\//.test(url)) { console.error('Pass a url!'); phantom.exit(); } phantom.onError = function(msg, trace) { var msgStack = ['PHANTOM ERROR: ' + msg]; if (trace && trace.length) { msgStack.
markdownの文字数を、セクションごとに数えてくれるコマンドつくった - Qiita
ひさしぶりにコマンドラインツールをつくりました。名前は mdwc。文字数を数えるwcのmarkdown最適化版、という感じです。 fnobi/mdwc なんのためのコマンドか このごろ、markdownでけっこう長めの、しかも文字数をちゃんとチェックしなくちゃいけない文章を書いていて、 「かぞえるのめんどくさい!!」 となってつくったコマンドです。 最初は、マルチバイト文字(日本語)がちゃんと数えられて、よしなに余計な文字を無視してくれるくらいでいいかなーと思ってたんですが、 つくってるうちに、 「markdownなんだったら、見出しのフォーマットがはっきりしてるから、セクションごとの文字数とかも出せるじゃん!」 と気づいて、そのへんに特化したコマンドに調整しました。 インストール node.js製ですので、npmつかってくださいませ。
twitterとfacebookとtumblrのショートカットキーまとめ - Qiita
キーボードだけでできるようになるぞ! おためしあれ。 ※無論Web版の、TL(dashboard)表示中のはなしです。 j : 下の投稿を選択 k : 上の投稿を選択 Enter : 選択中の投稿を開く f : 選択中の投稿をfav r : 選択中の投稿にリプライ b : 選択中のユーザーをブロック u : 選択中のユーザーをブロック解除 space : 1画面分、下にスクロール Shift + space : 1画面分、上にスクロール j : 下の投稿を選択 k : 上の投稿を選択 Enter : 選択中の投稿にコメント l : 選択中の投稿をLike l : 選択中の投稿をShare o : 選択中の投稿をひらく (画像投稿なら画像を、リンク投稿ならURLを) space : 1画面分、下にスクロール Shift + space : 1画面分、上にスクロール
grunt-initと同時に、npm install & bower installもやっちゃう - Qiita
grunt-initで、ひととおりのファイルが全部scaffoldできるのは便利ですが、 そのあとnpm installもしなくちゃいけないのが、ちょっとかったるいですよね。 そんなわけで、自分はこんなスクリプト書いて、npm installとついでにbower installも、一気にやってくれるようにしてます。 https://github.com/fnobi/grunt-init-me/blob/master/lib/shellLines.js (なお、このスクリプトはasyncに依存してるので、使う前にnpm installしてくださいw) つかいかた こいつを、grunt-templateの /lib に置いて、template.jsでこんな感じに書くと、吉です。 https://github.com/fnobi/grunt-init-me/blob/master/templat
grunt-releaseでversionを上げられる男になろう - Qiita
弊社の大先輩、mashさんがpull-req送っていたのを偶然見て、 grunt-releaseというプラグインの存在を知りました。 dry run support by mash · Pull Request #29 · geddski/grunt-release これが、npmやbowerにがんがんライブラリを置いている自分には、 めちゃくちゃべんりでした! bowerでライブラリ公開するハードルを下げることにもなる、 と思うのでちょっと紹介してみます。 grunt-releaseとは geddski/grunt-release grunt-releaseは、git管理しているライブラリの versionアップ時の作業を自動化してくれる gruntプラグインです。 具体的には、 設定ファイルから、現在のversionを取得 次に使うべきversionを計算 (semver形式) そのv
bower component、さくっと公開して広めよう - Qiita
bowerのはなしです。前書いた記事はこちら。 最近改めて読んでいたら、 bowerは js以外のフロントのパーツも入れていい ということに気づいて、 案外便利かもーと思っているところです。 (たとえば、bower install bootstrapには、bootstrapで使うcssもlessも全部入ってる) そんなわけで、npmのpackageを作るみたいに、 bowerのcomponentを登録する方法まとめ。 公式を訳そう それでだいたい説明おわりそう。 http://bower.io/より。 Registering packages To register a new package: There must be a valid manifest JSON in the current working directory. Your package should use semv
Coffeeか、Typeか。 〜比較しながらの入門編〜 - Qiita
がっつり手を出したことが無かったんですが、 いよいよ案件で.tsなファイルが現れたので、 TypeScriptの勉強を始めました。 そしてことのついでに、CoffeeScriptもここいらで勉強しておくか! というわけで比較しながら、入門時の要点まとめしてみます。 だいたいどんな言語か このごろ縁が薄い、MicroSoftさんご提供の言語 要するに、型付きにして、クラスベースにしたJavascript 拡張子は.ts クラスと変数宣言のところだけ変わってるけれど、その他の中身はただのJavascript よって学習コストはかなり低いっぽい もちろんjavascriptには型なんて無いので、宣言した型はコンパイルするときにだけ意味を持つ TypeScriptで書くことによってコードが最適化されるとかはないらしい。 公式: http://www.typescriptlang.org/ Coff
nginx + foreverで、Webアプリ管理らくらく - Qiita
最近、websocket(socket.io)をけっこう重点的に使ってます。 仕事以外でも先日アプリを書いてみて、公開してみよーと思ったのですが、 なるほど、apacheはwebsocket使えないんすね。 ApacheとNode.jsを共存させてWebSocketも通す [俺の備忘録] node-http-proxyを導入するのもなんだか面倒くさそうだったので、 いいかげんに自鯖をnginxに乗り換えることに。 現状でもnodeアプリばっかりで、ProxyPassだらけだったし。 環境 さくらVPS CentOS このころから変わってない nginx、最新版がほしい 最初は何も考えずに、「yum install nginx」でインストールしたんですが、 これで落ちてくるのは、なかなかの旧型nginxらしい。websocketつかえない! ので、rpmを公式から落としてきてのインストールに
node.jsでこんなのもテストしたい!! という話 - Qiita
テストフレームワークは、busterJSが一番慣れてたんですが、 部署御推薦のmochaをいっちょやってみるかー、と思っているこのごろです。 そしてついでに、 「このへんは、node.jsの場合どうテストするのがかっこいいかしら!!」 と気になっていた部分について、いろいろ調べてみました。 mochaの細かい説明については、公式その他をみてください。 mochaっていうかほとんどshouldですよね。 普通のテスト(libraryやcontrollerのテスト) テストしたいmoduleをrequireして、 shouldもrequireして、テストを書く。これが基本ですね。 // テストしたいmoduleをrequire var hoge = require('../hoge'); // テスト用のライブラリをrequire (mochaの場合は、shouldがあればいいはず) var
grunt-pluginの作り方と解剖 - Qiita
先日、はじめてgrunt-pluginを公開してみました。 そこでいくつか、「!?」となる箇所があったので、grunt-pluginをつくるときの注意まとめしてみます。 ある程度gruntを使っていて、Gruntfileもしこしこ書いたことある方向けです。 grunt-pluginとは? そもそもgrunt-pluginとは何なんでしょうか。 最低限必要なのは、 gruntにtaskを追加するスクリプト 、ってとこだと思います。 例えば、こんなものでも、grunt-pluginと言えば言えそう。 var grunt = require('grunt'); grunt.registerTask('sample', 'sample task', function () { console.log('this is sample task!'); }); このgrunt.registerTask
3分でできるnpmモジュール - Qiita
まずあれです、タイトルは盛りました。 実装は3分じゃおわらないよ!! でも公開のための作業は3分くらいで行けるんじゃないかと思います。 作ったものを、公開したくてうずうずしている方は、ぜひ読んでみてください。 [1分目] npmアカウントを作ろう npmの公式ページから なにはともあれ、npmの開発者として登録しましょう。 https://npmjs.org/signup から、「Make it so.」しましょう。 特筆するようなことはないですが、すぐに使うので username password email address は、ちゃんとメモしておきましょう。 npm adduser 登録ができたら、ターミナルからnpm adduserを実行します。 すると、username・password・email addressを聞かれるので、 先ほど作ったアカウントのものを入力します。 これで
開発用・簡易Webサーバー/プロクシサーバーkokoをつくった - Qiita
% cd ~/Desktop/project/ % ls css index.html js % koko document root : /Users/fnobi/Desktop/project [listen 4299] これで、ブラウザでhttp://localhost:4299にアクセスすれば、 /Users/fnobi/Desktop/projectをドキュメントルートにしたサーバーにアクセスできるというわけです。 いいところ 1, 起動が早い 名前の由来は、「とにかくここが見たいんじゃ!」の「ここ」です。 そんな雰囲気なので、とにかくすぐ起動できることを重視してます。 プロジェクトディレクトリに行ってkokoだけ打てば起動されますし、 さらにkoko -oと打てば、ブラウザが勝手に起動してくれます。(※Mac限定) % koko -o document root : /User
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
