サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
レイングッズ
qiita.com/fnobi
component志向のフレームワーク! あちこちで 「いまはReact.jsよりRiot.jsだぜ!!」 という声が聞かれるようになったので、入門したくなりました。 (いまの勢いで言えばReact.jsをちゃんとやっておくべきなんだろうけど、どうしてもJSXの記法が受け入れられない…) さてさてRiot.jsとは。以下あたりを見ると分かりやすいです。 Riot.js — A React-like user interface micro-library · Riot.js フロント界隈で一番イケてるのは AngularJS でも React でもなく Riot.js だという話 | phiary 担っている役割としてはReact.jsに近いですが、ReactがMVCで言うところのViewだと断言しているのに対して、Riot.jsはMVC(あるいはFluxとか)というよりは Webコンポー
さてjavascriptを書いている皆さん、 es2015への対応準備はいかがでしょうか? 個人的には 2016年こそがes2015元年になるのではないか(ややこしい)という見立てでおります。 無論、ブラウザ自体の対応はまだまだなのですが、 ブラウザ互換のjavascriptに変換してくれるBabelも(あるていど)安定し、 browserify等々との連携も便利になってきたこの頃、意識しなくても使えるようになってきたのでは、というこのごろです。 「そうは言っても、本来ブラウザで動かないし、javascriptに新しい機能が付くわけでもないし、使うメリットなんてそんなにないのでは?」 と思う方もいるかもしれません。自分もしばらくそう思ってました。 しかし明確なメリットが一つあります。 javascriptならではの読みづらい部分を、圧倒的に読みやすく書き直せることです。 そんなわけでこの記
前談 自分でテストサイトとかを立てる用途で持っているVPSが、大したことしてないはずなのに、けっこうカジュアルに落ちがちだったので、監視を付けないとやべーぜということになった。 サーバーの監視ツールについてはぜんぜん知識がなかったので、周りのひとに聞いたりいろいろした末に、Mackerelさんに目をつけました。 導入方法 基本的にchefに乗っけて管理しているサーバーなので、chefおよびBerksfileの作業で導入を片付けたいですね。 その際の手引は、公式が用意してくれてます。 Chefによるセットアップ - Mackerel ヘルプ ので本記事も、基本的にはこの手引をなぞっているだけです。 アカウント登録 https://mackerel.io/ からサインアップして、host登録して、API Key追加して、という感じで。 github連携があるサービスはよいですね。 host名登
従来、スマートフォンの横幅といえば 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にピクセル値を指定しても
1. Redmineとは? Redmine.JP 「Webベースのプロジェクト管理ソフトウェア」です。 そのテのものは、ふつうにWebサービスとして公開されてそうなもんですが、 Ruby on railsで書かれたプロダクトとして公開されています。 つまり、ダウンロードして、自分のサーバーにデプロイして使う。 ちょっと珍しいケースですね。たぶん。 MovableTypeとかWordPressもそんな感じですが、 Railsの場合は置けば完了! とはいかないので、それなりの手間が必要です。 2. 環境と仕様 今回は、このRedmineを以下の環境にインストールします。 さくらのVPS CentOS Apache そして、Railsをapacheで公開する場合は、 Passengerという仕組みを使うことが多いのですが、 この間授業で使って、いまひとつしっくりこなかった 他に公開しているnod
主にCSS。各記述で発生する現象まとめ。 前に書いていた「本当にあったAndroidの怖い話」をマージ済み。 随時更新。 position: fixed android2系で、下の要素が押せてしまう ポップアップなど一時的に出すもの(その間、裏要素のイベント切るなどの対応が可)で、上に演出など乗せないケースでないと、難しい transform(scale・rotate等)が効かない端末あり 効く場合もブラウザにより挙動がけっこう異なる (仕様的にどれが正しいのかわからん) いくつかのandroid・IE10 → 無視 chrome・firefox → transform時に消えてしまう android chrome → 一緒にtransforomする android2系では、fixedな要素そのものじゃなくて、その上の要素もtransformしないことがある (これはさすがにバグでは) t
といった感じで、いくつかのサイズを指定して画像URLをとってくることが可能。 500px以上の高画質写真を使っている場合は、HighResを使う。 ◯ OGP画像の設定が容易 (容易って感じがしないサンプルだけど) こんなかんじ。 {block:PermalinkPage} {block:Posts} {block:Photo} <!-- ogp from photo post --> <meta property="og:image" content="{PhotoURL-HighRes}" /> {/block:Photo} {block:PhotoSet} <!-- ogp from photoset post --> {block:Photos} <meta property="og:image" content="{PhotoURL-HighRes}" /> {/block:Ph
Cocos2d-JSとは 大手なスマホアプリ用ゲームエンジン Cocos2d-x 。(主にC++使って書く) Javascriptでゲームを書いて、そのままブラウザゲーム・iOSアプリ・Androidアプリ として出力できる!! Cocos2d-xとは別物としてつくられていた、 Cocos-html5 が本体と統合され、シームレスに使えるようになった! 公式が出してるサンプル Fruit Attack (パズルゲーム) MoonWarriors (シューティング) Cocos2d-xの方は、Badlandとかブレフロとか、大ヒットゲームでの採用も多数 ひととおりの開発フロー cocosコマンドでひながたを作る
※返信のつもりで書きはじめたけど、特に根拠も知見もない文章しか書けなさそうだったので、別物のメモにした。 -- Javascriptはどうしたって、適当に書いたらカオスになる仕様なので、 適当に書いてもかっちりMVCが分かれるようにするには、backboneさんとかのフレームワークにがっつり乗るしかない気がする。 (自分ルール決めても、急いでたり疲れてたりするときは守れなかったりして、ルールに従ってるところと謎なところとが共存して余計にカオスになるとか、よくある。) ただ個人的には、そういうのに乗ると柔軟性なくなって、無駄に悩む時間が増えそうな気がしてるので、あんまり乗らない。 それでも読みやすくはしたいので、 命名で妥協しない ってとこだけ死守してる。 適切な変数名を付けることを考えたら、ブロックはあんまり長くできないし、 (ブロックが長いと、その分気にしなきゃいけない事項・他の変数が増
「動的に変化する背景色に対して、文字色は黒がいいか白がいいかを自動判断する」 という必要にかられました。のびーです。 というわけで、カラーコードから、その色が暗いのか明るいのか、 すなわち明度をとってくるJavascriptを書いてみたので、まとめです。 色表現の話は面白いですよねー。 基本 HTMLで使われているカラーコード(#ff0000みたいなやつ)は、 RGBで表現された色です。 最初の2桁の16進数が赤(R)、次が緑(G)、次が青(B)を表し、 それぞれをどのくらいの強さで出すかで、色を表しています。 一方、明度とは何なんでしょうか。 実はこれは、HSBという別の表現方法の、Bにあたるものです。 HSBは、色相(Hue)・彩度(Saturation)・明度(Blightness)の組み合わせで色を表しています。 HSBの詳細は割愛。 でもHSBの方が人間の感覚的に分りやすい色表現
http://urls.api.twitter.com/1/urls/count.json?url=http://fnobi.com/
キーボードだけでできるようになるぞ! おためしあれ。 ※無論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画面分、上にスクロール
音楽の覚えがあるエンジニアとしては、触らなきゃダメだろーと思いつつ、なかなか手を付けられていなかったWebAudioAPI、 先日のハッカソンでようやく着手できました。 その過程でわかったこと・つくったものなどまとめました。 登場人物 HTML5のAudio要素を使う時と違って、 WebAudioAPIの場合は、使っているオブジェクトがけっこう多い。 そのあたりを把握するのが、WebAudioAPIのマスターの第一歩っぽい。 context (AudioContext) 音をとりまとめるcontext。 音の再生先(destination)なんかも、このcontextが握っているみたい。 WebAudioAPIに対応しているブラウザは、 window.AudioContext (window.WebkitAudioContext)というのが生えてるので、 これをインスタンス化すると作れる。
なんか作ることになったので、 さらに言えばtumblr大好きなので、 ちょっくら調べた。 参考 Creating a custom HTML theme | Tumblr 公式ドキュメント オリジナルのtumblrテーマ作りに挑戦� いいかんじの日本語資料 基本 tumblrには、 投稿一覧: / 投稿詳細: /posts/{投稿ID} タグごとの投稿一覧: /tagged/{タグ名} 日付ごとの投稿一覧: /day/{年}/{月}/{日} 検索ページ: /search/{検索ワード} と5種類のページがある。 WordpressやMTならば、このそれぞれにテンプレートを作成していくカタチだが、 tumblrの場合、 テンプレートはひとつしかない。 (ブログ設定画面 → テーマのカスタマイズ → 「HTMLを編集」で出るもの) ひとつのテンプレートの中で、 現在のコンテキストを判別するbl
最近よく使っているテンプレートエンジンのejs、気に入っているんですが、 extendがつかえないというところがちょっと不満でした。 これをなんとかする方法を見つけたので、紹介します。 テンプレートのextend まず、extendというのがどういうことか。 例えば別のテンプレートエンジン・jadeでは、 ヘッダーとフッターは共通で 中身のコンテンツだけ書く ただし、jsライブラリもひとつ追加で入れたい というとき、以下のように書けます。
弊社の大先輩、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
最近ついたchrome devtoolsの新機能、「Snippets」をつかってみます。 Authoring & development workflow - Chrome DevTools — Google Developers Snippetsとは? 要するに、 デバック用にconsoleで実行するスクリプトを保持しておける 、 みたいな機能だと思えば良よさそう。 スクリプトを、Snippetという単位で管理・追加・実行などできる。 つかいかた 「Sources」の「Snippets」からアクセス 右クリック→「New」で作成 右クリック→「Run」で実行 あるいは「▶」ボタン(普段は一時停止とかがあるとこ)でもできる。 作成したSnippetは、Chromeが覚えていてくれるので、別のサイトでSnippetsを開いても残っている。 (※現在、コピペしたスクリプトが保存されないことがあ
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
gitで自鯖のレポジトリにpushがあったら、 同じく自鯖にあるhtmlを更新したい。 (github-hookはちょっと前にやったけど、こっちは初めてだった) git hookは、gitが持っている「コミットされたらなんかする」系の仕組み。 Git - Git フック 開発環境側で「コミットする直前」とか、 サーバーの側で「プッシュされた直後」とか、 いろんなタイミングで、決まったshell scriptを実行できる。 shell scriptは、.git/hooksに置く仕組みになっている模様。 今回は、この サーバーサイドフックの、 post-receiveを使ってみる。 設定する クライアントサイドでやる作業はなし。 サーバー側でやる作業はだいたいこんな感じ。 # gitレポジトリへ移動 cd git/my-website.git # post-receiveのスクリプトを設置 v
がっつり手を出したことが無かったんですが、 いよいよ案件で.tsなファイルが現れたので、 TypeScriptの勉強を始めました。 そしてことのついでに、CoffeeScriptもここいらで勉強しておくか! というわけで比較しながら、入門時の要点まとめしてみます。 だいたいどんな言語か このごろ縁が薄い、MicroSoftさんご提供の言語 要するに、型付きにして、クラスベースにしたJavascript 拡張子は.ts クラスと変数宣言のところだけ変わってるけれど、その他の中身はただのJavascript よって学習コストはかなり低いっぽい もちろんjavascriptには型なんて無いので、宣言した型はコンパイルするときにだけ意味を持つ TypeScriptで書くことによってコードが最適化されるとかはないらしい。 公式: http://www.typescriptlang.org/ Coff
テストフレームワークは、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を公開してみました。 そこでいくつか、「!?」となる箇所があったので、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分じゃおわらないよ!! でも公開のための作業は3分くらいで行けるんじゃないかと思います。 作ったものを、公開したくてうずうずしている方は、ぜひ読んでみてください。 [1分目] npmアカウントを作ろう npmの公式ページから なにはともあれ、npmの開発者として登録しましょう。 https://npmjs.org/signup から、「Make it so.」しましょう。 特筆するようなことはないですが、すぐに使うので username password email address は、ちゃんとメモしておきましょう。 npm adduser 登録ができたら、ターミナルからnpm adduserを実行します。 すると、username・password・email addressを聞かれるので、 先ほど作ったアカウントのものを入力します。 これで
componentsディレクトリができて、jqueryが入ってる。 名前には出てないけど最新版が来てる(っぽい)。 ちなみにjquery公式ではなく、 https://github.com/components/jquery からとってくる。 bowerにcomponentとして登録されているものをインストールという形。 jqueryをインストールして、覚えておく
% 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
Emacsのはなしです。 さいきんEmacs Rocksというのを見つけて興奮しております。 その中で見た、HTMLに関わるEmacsコマンド等を勉強したのでメモ。 Emacs Rocks! Episode 12: Working with HTML zen-coding このあいだ入れたzen-codingです。やっぱり便利ですね。 こまかい説明は省きますが、zen-codingを使うと 手打ちするのがダルい、ネスト深めなHTMLとかも一瞬で出せます。 例えば、zen-codingのmodeで開いたファイルで、
世の中には2種類のEmacs使いがいる。 shellの上でEmacsを使う者と、Emacsの上でshellを使う者だ。 という格言があるかは知りませんが、 ともかくEmacsの上で、快適にshellを使うまでの設定を書いていきます。 さぁ、みんなでEmacsに依存しよう! 1. なんでEmacsの上でshellを使うのか 楽しいからです。 というのがまぁホントのところで。 最後の方で書きますが、やっぱりTerminalを出さないと不便な場面はありますし、 やらなきゃいけない設定も、それなりにあります。 でも、もう少し真面目にメリットを書いておくと、 常にEmacsのキーバインドの支配下で、開発作業ができる Emacs(エディタ)から離れずに、すばやくshellに移動できる shellでいじったファイルを編集するときも速い すぐC-x C-f <ファイル名>すればいい compass wat
わりと最近までCSSは、chromeの「Sources」タブで、 リアルタイムに変更を見ながら書くのが最高だと思ってました。 が、compass/Sassを覚えるとやっぱりこれも捨てがたい。 というわけで、compassで書きつつもリアルタイム確認ができるツール探したら、ありました。 chrome拡張機能Tincrです。 Tincr Chrome Extension http://tin.cr/ Chrome ウェブストア - Tincr https://chrome.google.com/webstore/detail/tincr/lfjbhpnjiajjgnjganiaggebdhhpnbih こいつをインストールすると、おなじみchromeの開発者ツールに「Tincr」タブが追加されます。 タブごと追加するというあたりイケメンですね。 http://gyazo.com/3566609
次の項から、この[--soft | --hard]及び[HEAD | HEAD^]がどういう意味を持つのか、まとめてみる。 HEADとHEAD^ この部分は、「状態をどこまで戻すか」の指定をしている。HEADとHEAD^はそれぞれ、最新のコミットの位置・そのひとつ前のコミットの位置を指す。 ただしHEADは、ここの図では「どこまでコミットしているか」という意味で使われているので、すこしこんがらがった。そりゃぁ最新のコミットという意味なので、そういうことなんだけど。 なお、ここにはコミットのidを入れてももちろんOK。HEADとHEAD^は代名詞なんですね。 --softと--hard git resetはともかく、状態を前に戻すコマンド。しかしgitにおける「状態」は、 HEAD (現在の最新コミットの状態) index (何をaddしたか・addした時点でのファイルの状態) workin
次のページ
このページを最初にブックマークしてみませんか?
『@fnobiのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く