いつぞやのつぶやきをiPadを使っていつでも閲覧·Twitter Archive Viewer MOONGIFT
Twitter Archive ViewerはTwitterアーカイブを取り込んでiOSアプリとして表示するソフトウェアです。 Twitterの自分の過去のツイートを全てダウンロードする機能が日本でも提供されています。HTMLで提供されていますが、それをiPad/iPhoneで見られるようにしたのがTwitter Archive Viewerです。 tweetフォルダを自分のものに差し替えるだけです。 検索にも対応。 一番最初のツイート。2007年も記事を書いていたわけです…。 Twitterを自分用のメモとして使っていたり、ブックマーク代わりに使っていた人にすれば、ハッシュタグで検索すれば情報を取り出すこともできるでしょう。ふと思い出した時に便利に使えるソフトウェアです。 Twitter Archive ViewerはiOS用のオープンソース・ソフトウェア（MIT License）です。
jquery.deviantartmuro by deviantART
jQuery plugin for embedding the HTML5 drawing app, deviantART muro, on your site. Download .zip Download .tar.gz View on GitHub jquery.deviantartmuro is a jQuery plugin to provide a convenient wrapper around the embedding API for the deviantART muro HTML5 drawing application, allowing you to provide image drawing and editing within third-party sites. Embedding deviantART muro in your site allows y
jQuery Responsive Thumbnail Gallery Plugin
jQuery Plugin for creating image galleries that scale to fit their container. How to Use Link to the script after jQuery. Apply it to a DOM element on the document ready event. $(document).ready(function() { var gallery = new $.ThumbnailGallery($('#gallery')); }); You can configure the settings as follows (example has the default config values assigned) $(document).ready(function() { var gallery =
BOWER: A package manager for the web
Bower is a package manager for the web.Twitter Engineering presents Bower A package manager for the web Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencie
CSS3やCanvas、JS等を使ったローディング画像実装プラグイン１２:phpspot開発日誌
12 Free jQuery Pre-Loader Plugins CSS3やCanvas、JS等を使ったローディング画像実装プラグイン１２がまとまっています。 画像の種類が色々ある上に実装方法も、単なる画像ではない方法が選べます。 画像じゃない方法でローディング画像を実装したい場合は参考にするとよさそう。 画像ではないため、軽量でレスポンシブなサイトにも使えるというところですかね 関連エントリ 超カッコいいローディングを実現できるjQueryプラグイン「Percentage Loader」 HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 画像や外部CSSなしでカスタマイズ可能なローディング画像作成ライブラリ「spin.js」
Flat Surface Shader
Admit it, 3D is cool. But, you know what's cooler? 2D. I love WebGL, but unfortunately it doesn't work everywhere. This lighting simulation can be configured to use either the 2D context of a canvas element or an array of SVG polygons to draw the triangles. It also utilises native Float32Arrays to store numerical data for highly optimised calculations. This is a collaborative effort between Matthe
Draggabilly
Type: Selector String, Array, HTMLElement // select all .handle children with selector string handle: '.handle' // set as element handle: element.querySelector('.handle') // set as array or NodeList handle: [ element.querySelector('.handle1'), element.querySelector('.handle2') ] Specifies on what element the drag interaction starts. handle is useful for when you do not want all inner elements to b
Chardin.js
Chardin.js - Simple and beautiful overlay instructions for your apps.
Bootstro.js demo
data-bootstro-step=4 (starting from 0)" data-bootstro-placement="bottom" > Yay. Finally bootstro now supports Bootstrap 3, after a very very long procrastination. Good news is Every thing still stays the same. You pretty much don't need to change anything Latest Bootstro.js still works with Bootstrap 2 by adding the following 1 single line bootstro.set_bootstrap_version(2); before calling bootstro
diagonalFade : A jQuery plugin
is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements. All you have to do is import it, specify the container to which the group of items resides, and poof, you're off and away. diagonalFade is great for inventory or anything with a large amount of items ordered in a grid. diagonalFade has been tested in all modern bro
Home
LATEST NEWS: Explore the latest news, events, and innovations from Razorflow.
Android端末を持ってなくてもエミュレータでGoogle Play配布アプリを動かす - ゆーすけべー日記
iPhoneをずっと使っているのでAndroid端末、僕持ってないんですよねー。とはいえAndroidの環境でアプリの動作確認をしたかったりします。Nexus7のWifiモデルを買ってもいいんだけど、早急にGoogle Playで配布されているアプリをAndroidで検証したかったので、調べつつそれが出来ないかやってみました。結果、Android SDKの中にあるAndroidのエミュレータで動かすことに成功したので、その行程を紹介します。現時点で出来るってことで今後不可能になるかもってのと、自己責任でお願いします。 Android SDKが用意されていることを前提として、ざっくりと行程を紹介すると BlueStacksというソフトをインストールする そのソフト内でGoogle Playからダウンロード出来て動かせる、ただ使い難いのでSDKのエミュレータを使う Device IDなるAnd
Intro.js - Step-by-step guide and feature introduction for your website
No dependencies, fast and small 10KB JavaScript and 2.5KB CSS, that's all (minified, gzipped). User-friendly Navigate using keyboard or mouse. Easily change the themes for your website. Browser compatibility Works on Google Chrome, Mozilla Firefox, Opera, Safari and even Internet Explorer. Why using Intro.js? When new users visit your website or product you should demonstrate your product features
iOSアプリで必要なサーバサイドの機能をまとめて提供！·Helios MOONGIFT
Heliosはプッシュ、アプリ内課金、Passbookなどのデータを一元管理できるiOS向けサーバソフトウェアです。 iOSではアプリ単体を作って終わりというものも多いですが、サーバサイドとのやり取りするアプリも少なくありません。そうした情報のやり取りを一元的に提供してくれる専用サーバがHeliosです。 データがないのですが、これはPassbook向けのデータ管理。 Pushもあります。 さらにアプリ内課金。 HeliosはデータをRESTfulなAPIで管理します。Rackアプリとして立てることも、SinatraやRailsの中に取り込んでシステムを提供することもできます。iOSアプリ開発時に用意してあると開発がスムーズに進みそうです。 HeliosはRuby製のオープンソース・ソフトウェア（MIT License）です。 MOONGIFTはこう見る iOSアプリ開発者にとってみればサ
Ruby GemでJasmineをインストール[Ruby][JS] - CMS専門 Web開発者ブログ
JavascriptのテスティングフレームワークJasmineをRuby Gemでインストールして使ってみた時のメモです。 Jasmineの種類 スタンドアローン版、Ruby Gem版、その他と三種類あるようです。 Ruby Gemを使えばファイルのダウンロードからセットアップするところまで全部コマンドラインで行えます。 RubyにはRakeという協力なビルドツールがありますのでテスト用プロジェクトの雛形を作ったりといったことも全部コマンド一発です。 bundleを使ってインストールします。bundleはスクリプトで必要なgemファイルをまとめてダウンロード、インストールしてくれるプログラムです。 bundleがインストールされていない場合は $ gem intall bundle でインストールして bundle コマンドを使用できるようにしておく必要があります。 プロジェクト プロジェ
Vimの+diff機能の仕組みについて - Humanity
ばよえ〜ん(訳：Vim Advent Calendar 2012への14回目の投稿です) この記事はVim Advent Calendar 2012の137日目の記事になります。 136日目は@alpaca_taichouさんでpowerlineをいつ使う？今でしょ！でした。 Vimの+diff機能の仕組みについて、と言いつつそこまで詳細について解説している訳ではないです。 差分のアルゴリズムとかそういうのを期待している人はすみません。*1 スクロールを異なるウインドウ間で同期させる ('scrollbind') 'scrollbind'オプションを使います。 'scrollbind'オプションが有効になっているウインドウでスクロールすると、 他の'scrollbind'オプションが有効になっているウインドウもスクロールされます。 スクロールの同期をやめるには'scrollbind'オプシ
Medoo - The lightweight PHP database framework to accelerate development
Composer require $ composer require catfan/medoo Update $ composer update // Require Composer's autoloader. require 'vendor/autoload.php'; // Using Medoo namespace. use Medoo\Medoo; // Connect the database. $database = new Medoo([ 'type' => 'mysql', 'host' => 'localhost', 'database' => 'name', 'username' => 'your_username', 'password' => 'your_password' ]); $database->insert('account', [ 'user_nam
Engine Yard Cloud で ISO-2022-JP メールを送って文字化けする場合の対処法 - 僕は発展途上技術者
これ、Engine Yard Cloud を使っている日本のユーザーにとっては FAQ になるのではないかと思ったのでメモ。 Engine Yard Cloud を使っていてメールを送る場合は SendGrid アドオンを使います。 メールの文字コードは最近は UTF-8 でも大丈夫みたいな情報も見るのですが、念のため mail-iso-2022-jp gem を使って ISO-2022-JP で送ります。 すると、短いテストメールでは問題なかったのですが、ちょっと文面が長くなると文字化けしてしまいました。 受信したメッセージのソースをみてみたところ、なぜか text/plain の文面（こちらは正常に表示されている）のあとに text/html(HTMLメール) が続く形で、multipart で送られていました。そして text/html(HTMLメール) の文面が文字化けしている。
インデントを修正する - Humanity
ばよえ〜ん(訳：Vim Advent Calendar 2012への13回目の投稿です) この記事はVim Advent Calendar 2012の135日目の記事になります。 134日目は@ujihisaさんの記事の予定です。*1 インデント数を修正 「インデント数を修正したい」という要求は 「タブ文字をインデントに使っている場合、見た目として表示する半角スペースの個数を変えたい」なのか、 「半角スペースをインデントに使っている場合、インデント数を実際に書き換えたい」なのかで変わってきます。*2 見た目として表示する半角スペースの個数を変えたい :setl ts=4 です。'ts'は'tabstop'の略です。 インデント数を実際に書き換えたい codingstyle.vimの:CSChangeSpaceIndentを使います。 :CSChangeSpaceIndent {前の半角スペ
Nginx の便利なrewrite (翻訳版) - Engine Yard Blog JP | Engine Yard Blog JP
本記事は英語版のブログで2011年3月29日に公開された記事の翻訳版です。 私は Rails での作業に満足していますが、仕事に合った正しいツールを使うことも大事だと考えています。多くの開発者が Rails アプリケーションにリダイレクトを追加しますが、開発段階では便利でも、いざ本番環境でのトラフィックが開始されると上手くいかない場合があります。当社では、フロントエンドのリバース プロキシとして Nginx ウェブ サーバーを使用しています。一般的なリダイレクトを Nginx に移して Rails の負担を軽減し、本来のタスクを行わせることが簡単にできます。 たとえば、最初にフォーカス グループでは名前が覚えにくいと言われ、SEO の教祖様にはドメインに www を含めなければならないと批判され、ユーザービリティ担当者からは一般的な入力ミスを検知すべきだと言われたとしましょう。最初のうちは
Karma(元Testacular)を使って簡単にテストを実行しよう | DevelopersIO
Karmaとは 昨年、Googleがnode.jsベースのJavaScriptテストランナー、「Testacular」をオープンソース化しました。 このツールは元々AngularJSのためのテストフレームワークとして作られたそうで、 クライアントサイドのJavascriptコードのテストを簡単に実行することができます。 このツール自体はテストランナーで、JasmineやMochaなどのテストフレームワークを使用してテストを行います。 先日このプロジェクトの名前が変更され、「Karma」という名前になりました。 今回はKarmaのインストールからテスト実行(+ Gruntでの実行)までをおこなってみます。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.4 Node.js : v0.10.0 npm : 1.2.14 Grunt : 0.4 npm
GruntでCoffee Scriptのコンパイル&Uglifyで圧縮 | DevelopersIO
Gruntとは 弊社ブログでもすでに紹介していますが、Gruntとはnode.jsベースで作成されたビルドツールです。 最近v0.4がリリースされ、Coffee Scriptがデフォルトでサポートされました。 今回は、変更が検知されたCoffeeScriptファイルをコンパイル→UglifyJSで圧縮 という処理をGruntでやってみます。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.4 Node.js : v0.10.0 npm : 1.2.14 Grunt : 0.4 npmを使用してGruntをインストールしておきましょう。 % npm install -g grunt-cli package.jsonとGruntfileを作成する Grunt(0.4)を実行するためには、２つのファイルが必要です。 まずはpackage.jsonを作成
【後編】Backbone.jsでつくるMVPなUIパターン【スクロールスパイ】 | DevelopersIO
※この記事はBackbone.jsでつくるMVPなUIパターン【スクロールスパイ】前編からの続きの後編です。 ContentView 継承 ContentViewは文章を表示し、自身の管轄しているスクロール範囲を知っているコンポーネントです。Backbone.Viewを継承して実装します。 var ContentView = Backbone.View.extend({}); テンプレート UI表示用のテンプレート関数をNavViewと同じように定義しておきます。 <script type="text/template" id="ui-scroll-spy-content-template"> <div class="scroll-spy-content"> <%= content %> </div> </script> var ContentView = Backbone.View.ex
D3.jsで始めるData-Drivenなページ作成 ｜ Developers.IO
D3.jsって？ AWSの事しかかけないと思われているかもしれないあけりです。 4月になって、気分一新クラスメソッドぽいことを少し。 今日はAWSとは関係の無いD3.jsです。 D3.jsとは名前から想像出来る通りjavascriptで使えるライブラリで、 データを色々な形に見やすく表示（よくあるグラフなんかもその一つ）するものです。 D3はData-Driven Documentsの略だと思われます。 データとDOMをうまいこと連携させて、表を作ったり、SVGのグラフを描画させたりすることができる、なんか格好良いライブラリです。 ライセンスはBSD Licenseと書いてありますが、リンクを辿ってみると宣伝条項のない修正BSD Licenseとなっているので、なんか色々楽そうです。 使い始め方 使い始め方は簡単で、ここからダウンロードしてくるか、 HTMLに直接 <script src=
【前編】Backbone.jsでつくるMVPなUIパターン【スクロールスパイ】 | DevelopersIO
前回の更新からだいぶ間が開いてしまいましたがこのシリーズはまだ終わりません！今回はTwitter BootstrapにjQuery Pluginとして実装されているScrollSpyを真似して作ってみたいと思います。 ちょっと解説が長くなってしまったので前後編に分けてご紹介します。 後半はこちら >> Backbone.jsでつくるMVPなUIパターン【スクロールスパイ】後編 デザイン 4つの文章に対しそれぞれナビゲーションが存在し、文章のエリアをスクロールして閲覧している文章に対応するナビゲーションがアクティブ表示になるというものです。 このUIのhtmlは以下のようにコーディングしました <div id="ui-scroll-spy"> <div class="scroll-spy-nav navbar"> <div class="navbar-inner"> <div class="
[iOSアプリ開発] ちょっとなめらかな線でお絵かきしてみる | DevelopersIO
前回のブログで、タッチでお絵かきするサンプルを作りましたが、 曲線を引くとカクカクが目立ってしまうので、もう少し滑らかな線でお絵かきできるように修正してみようと思います。 滑らかな線を引く方法はいくつもあるようですが、 今回は、タッチした座標の中点を曲線でつないでいくという簡単な方法で描いてみます。 絵にするとこんな感じです。 青い線は前回のサンプルで使った描き方で、タッチした点を結んで直線を引いているだけなのでカクカクしています。 黒い線は今回対応したもので、線は少し滑らかになり、Retina 対応も行いジャギーも軽減されています。 実装 前準備として前回のブログを参考にして、タッチした点を結んだ直線でお絵かきできるところまで作っておきます。 今回修正するのは線を引いているところだけなので、ViewController.m ファイルを修正していきます。 まず最初に、タッチした座標を保持す
node.jsのいろいろなモジュール26 – UglifyJSでjsファイルの最適化 | DevelopersIO
UglifyJSとは 高機能なJavaScript用の圧縮・最適化ツールです。 コンソール上でコマンドとして実行することもできますし、apiを呼び出してjs内で使用することもできます。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.4 Node.js : v0.8.15 npm : 1.1.66 npmを使用してUglifyJSをインストールします。 このモジュールはグローバルオプションをつけてインストールしましょう。 % npm install -g uglify-js コマンドから圧縮を実行 uglifyjsがインストールできたら、圧縮をためしてみましょう。 とりあえず簡単なjsファイルを作成します。 jsファイルでは配列を作成してそれを全部合計し、console.logで表示します。 function sum(array) { var r
Xcode／Objective-Cで始めるプログラミング基本のキ
Xcode／Objective-Cで始めるプログラミング基本のキ：iOS SDKで始めるObjective-C入門（4）（1/2 ページ） Windowsを使っていたけど、iOSアプリを作るためにMacを使い始めた初心者を対象に、開発ツールXcode／iOS SDKを使ってiPhone／iPadアプリを作る方法を、プログラミング言語「Objective-C」の書き方／文法を交えて解説する連載。今回からObjective-Cの基礎文法を解説していきます。まずはプログラムを動かして変数やNSLog、フォーマット指定子などを覚えましょう。 Objective-Cでプログラミングを始めてみよう 本連載「iOS SDKで始めるObjective-C入門」では、前回の「【図解】Xcode 4.5の使い方リファレンス超まとめ」までで、iOS（iPhone／iPad）アプリの開発環境として、OS「（Mac
Big Sky :: git でバイナリを気軽に扱える、git-largefile の dropbox 版を作った。
DSAS開発者の部屋:gitでバイナリファイルを気軽に扱えるフィルターを作りました gits3 は Python でプロトタイプを作った後、 go で作りなおしました。 http://dsas.blog.klab.org/archives/52105107.html S3、1年たったらタダちゃうし、Dropbox 使いたいよ... ってことで作ってみました。 mattn/git-dropbox - GitHub Simulate hg largefile on git with dropbox Introduction When we want to add lar... https://github.com/mattn/git-dropbox 使い方は DSAS さんのブログと同じです。まずインストール。 $ go get github.com/mattn/git-dropbox ~/.
UIだけでもデザインできる理由
UI（ユーザーインターフェイス）は、いつの頃からか魅力的な視覚要素が含まれた GUI として語られるほうが多くなりました。これはある種、デザインを装飾としてのみ捕われてしまう状況と似ているところがあります。 では、ユーザーインターフェイスとは一体何なのか。スケッチしてみました。 昔からあるデスクトップでも、Google Glass のような未知のデバイスでも、人とコンピュータの関わりは必ずといっていいほど発生します。 人が何かをインプットすることで、コンピュータは処理したデータをアウトプットして人に伝えます。ユーザーインタフェイスとは、人のインプットを助長したり、コンピュータが処理したデータを人が理解できるようにアウトプットする役割を果たします。つまり、人が操作するコンピュータとの関わりを円滑なものにするのがユーザーインターフェイスの基礎と捉えることができます。UI を HCI (Huma
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVG Patterns Gallery
App Showcase with Grid Overlay
GitHub - kamens/jQuery-menu-aim: jQuery plugin to fire events when user's cursor aims at particular dropdown menu items. For making responsive mega dropdowns like Amazon's.
Sonic
Blogs and tutorials on Angular, NGRX, TypeScript, RxJS, React and everything web!
The ultimate CSS tools for web designers | CSSmatic
drawscri.pt
企業がFacebookを利用するときのルールを把握しよう／Facebookマーケティングの教科書#2-2前編 | 現場のプロがやさしく書いた Facebookマーケティングの教科書
Launch Files & Applications on a Scheduled Date with Calendar for Mac OS X