HTML5ハイブリッドアプリ開発、最新動向はやわかり！
ここ数年、従来のJavaやObjective-Cでのモバイルアプリ開発以外に、HTML5を使ってモバイルアプリを開発する手法、HTML5ハイブリッドアプリ開発が注目を浴びています。この記事では、第48回HTML5とか勉強会（ハイブリッドアプリ開発最新動向）で発表した「はやわかりHTML5ハイブリッドアプリ開発事情」での内容を解説することで、HTML5モバイルアプリについての基本的な知識を簡単に紹介します。 HTML5ハイブリッドアプリとは? それでは、まずHTML5ハイブリッドアプリの構造についてご紹介します。ハイブリッドアプリではアプリの画面としてWebViewというネイティブのコンポーネントを使います。このWebViewの中でHTMLの画面を表示するモバイルアプリがハイブリッドアプリです。図で表現すると、以下の画像でハイブリッドアプリの構造を表現することができます。 なぜハイブリッドア
gulpのアプローチ
gulpのGetting Startedにもあるように、gulpを使うにはグローバルインストールとローカルインストールが必要になる。なんで同じものを2つインストールするのか、不思議に思ってソース読んで「へー」と思ったのでまとめてみる。 Gruntの場合 Gruntの場合はgrunt-cliをグローバルにインストールしてgruntはローカルにインストールする。grunt-cliはローカルにインストールしたgruntを呼び出すためだけのモジュールだ。タスクを走らすgruntと、そのgruntを実行するgrunt-cli、2つのモジュールは明確に役割が切り離されている。 Gruntがこうなってる理由は、異なるプロジェクトで使ってるgruntのバージョンが違うと、グローバルにインストールされてるgruntのバージョン次第で、そのタスク（Gruntfile）が動かせない可能性が出てくるから。 （参考
pagerjs
pager.js one having or covering a specified number or kind of pages - Merriam-Webster See the demo. pager.js is a JavaScript library based on KnockoutJS and jQuery that provides the possibility of creating single page applications in a declarative fashion - nesting subpages inside subpages where each subpage can be developed standalone but still communicate between each other. This makes it easier
JavaScriptのGridライブラリ決定版 - SlickGrid - Qiita
正直、表示だけするならどれも高機能で大差ないと思う。 ただ、多くのグリッド系ライブラリは、高機能な代わりに遅い＆書きにくかったり、編集機能はあるものの表示→編集モードへの切り替えがもっさりしていたり保存機能が書きにくかったりする。 その中で高速な表示、Excelかのような編集機能を備えているのがSlickGridだ。 「Excelみたいにできないの？」とはよく言われることでその言葉にそんな簡単じゃねーんだよ、とイラッとしたことがある人も多いかと思うが、SlickGridを使うことでお互いストレスフリーな関係を築けるだろう。 では、SlickGridのパワーが実感できる例を紹介したい。 1.パフォーマンス このExampleで表示しているデータは、なんど500,000件である。他のグリッドが数万件表示可能！と言っているそばで、ケタが違う。何せExcel(2003)の限界行より多いんだからビッ
JavaScriptで関数型プログラミングを強力に後押しするUnderscore.jsのおすすめメソッド12選（lodashもあるよ） - Qiita
JavaScriptで関数型プログラミングを強力に後押しするUnderscore.jsのおすすめメソッド12選（lodashもあるよ）JavaScriptNode.js関数型言語 はじめに この記事では、関数型プログラミングを強力に後押しするライブラリ、 Underscore.jsとlodashを紹介します。 両ライブラリとも_で使用できます。 ほかのライブラリにも依存せず、 現在フロントでもサーバでもかなり人気なライブラリです。 個人的にもこれなしでは。。 といった必須なライブラリとなっています。 また、Backbone.jsといった人気なフレームワークが、 Underscoreに依存していたりします。 Underscore.js GitHub: https://github.com/jashkenas/underscore Document: http://underscorejs.o
lodash
A modern JavaScript utility library delivering modularity, performance & extras.
Closure Tools | Google for Developers
Stay organized with collections Save and categorize content based on your preferences. The Closure Compiler compiles JavaScript into compact, high-performance code. The compiler removes dead code and rewrites and minimizes what's left so that it downloads and runs quickly. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls. These checks and optimizati
960 Grid System
960 Grid System Download - CSS, sketch paper, and templates for: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Repository at GitHub. Essence The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns,
Responsive Grid System (CSS Framework)
Responsive Grid System mobile first 12, 16 & 24 column clearfix optional gutters 1kb compressed box-sizing polyfill respond.js polyfill <!-- Markup Example --> <div class="container row"> <header role="banner" class="row"> <h1 class="col span_4">No Account Casino - Play Without Registration</h1> <h2 class="col span_8">Experience hassle-free gaming with our no account casino</h2> <nav role="navigat
Closure Compilerを使う！
「Closure Compilerを使う！」は、Googleが提供しているコード圧縮・最適化ツールであるClosure Compilerの使い方を紹介するサイトです。 このサイトのコンテンツの大部分は公式サイトやチュートリアルの記述をベースに日本語で再構成したものですが、その内容はあくまで管理人の個人的な理解に基づくものです。ご利用は自己責任でお願いします。 Closure Compilerとは Closure CompilerはGoogleが無償で公開しているJavaScriptコードの圧縮・最適化・難読化ツールです。ライセンスはApache License 2.0です。 JavaScriptのコード圧縮・難読化ツールとしては他にpackerやYUI Compressorなどが有名ですが、Closure Compilerも基本的な機能としてそれらと同等のコード圧縮機能を有しています。以下
フリーのSass,LessコンパイラKoala【Win,Mac】
KoalaはWin,Mac,Linuxなどマルチプラットフォーム動くGUIのコンパイラです。 対応言語はSass(Compass),Less, CoffeeScriptです。 インストールはこちらからご使用のOSを。 現時点のバージョンはv1.0.0v1.3.0です。リリースしたてですね。 動作には予めRubyのインストールが必要です。 ※v1.3.0になったので少し修正しました（2013.6.2） koala使いかた ややフラットUIてきなインターフェイス。 プロジェクト登録 「＋」ボタンでフォルダを選択するか、 作業フォルダをドラッグすればプロジェクトが登録されます。 基本これだけでSass,Less,Coffeeのコンパイルをしてくれます。 書き出し設定 scssの緑のファイルアイコンをクリックすると画面右にオプションメニューが現れます。 「dynamic compilation」を
Takazudolog - OOCSSとSass
CSS Preprocessor Advent Calendar 2012の10日目、@Takazudoです。 僕はSassが好きです。なぜならSassにはextendがあるからです。その理由を、社内勉強会で発表した、以下のスライドで話したことを補足しつつ、書きます。 OOCSS + Sass OOCSSってなんぞ まず、Sassのextendが素敵な点を紹介する前に、OOCSSについて簡単に紹介します。 OOCSSというのは、Nicole Sullivanという人が言い出した考え方です。そのプレゼン資料やビデオなどは、本人が発表したものが、slideshare等にアップされています。 Object-oriented CSS Object Oriented CSS by Nicole Sullivan · Fronteers The Cascade, Grids, Headings, an
Takazudolog - 地獄のvideo／audio要素
video／audioにハマりまくったメモ。作ってたのは、Flashでやってたような、複数の動画ファイルを、途中の選択肢によって色々変えながら見せるというようなインタラクティブムービーみたいなの。なので、ハードにvideoを使いまくるという意味で、普通に一本動画を見せるという用途よりももっと色々する必要があったわけだけれども、そうでない場合でも、videoが色々厄介であるということは知っておく必要があると思う。 とりあえず、videoやaudioを使いたい人は、以下の2ページを熟読せよ。 プラグインは要らない！音声／動画対応したHTML5 - audio／video要素 | Think IT Video - Dive Into HTML5 videoのイベントは HTML5 Video を眺めてるとなんとなく分かる。 audioライブラリ試してうまくいったやつはこれ。 SoundJS vi
パンダに薬を飲ませようとした。パンダは勘違いした（動画）
ご覧の通り、パンダたちは薬の時間を遊びの時間と勘違いしているようだ。とんでもなく可愛らしい仕草だ。
Javascript マルチスレッド処理技術 WebWorkerのサンプル
特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。 | More ≫ WebWorker とは、HTML5 API の１つで、Javascript を並列計算するために標準で用意されている規格です。 通常 Javascript は CPU の１つのスレッドで演算を行うため、もし時間のかかる演算の場合にはその演算が終わるまで次の命令を受け付けません。 一方、WebWorker を利用すると、予め処理を定義しておいた「Worker」を任意のタイミングで呼び出すことで、重い演算のマルチスレッド処理が可能となります。 つまり、昨今のマルチコア搭載マシンで、 Javascript を利用した演算を効
フラットデザインに即採用！美しい日本語フォント。しかも無料。
最早至る所で見聞きするフラットデザイン。Appleを初めGoogleや各ウェブサービス、アプリケーションのUIでもどんどん取り入れられています。ご存知の通り凹凸が無く巧みに配色を考えられた美しいデザインで、しばらくトレンドとなる事は間違いないでしょう。 そこでやはり気になるのがフォント。こだわりだせば切りが無いものですが、一度これというものに出会うとデザインの基盤として大活躍してくれます。 今回Webで見つけて早速持っているMac全てにインストールしたフォントはこちら。 M+ FONTSの紹介 M+ OUTLINE FONTS はコンピュータなどでの個人利用をはじめ、商業目的での利用、フォント内容の改変、改変後の再配布にも制限の無い、自由なライセンスで公開しているアウトラインフォントです。 海外のフォントはかっこいいのがたくさんありますが、結局英数字だけなので日本語を使用したい場合はバラン
レスポンシブウェブサイトのパフォーマンス向上 - ワザノバ | wazanova
http://calendar.perfplanet.com/2013/rapid-response/1 comment | 0 pointsDigital ArtsとSpeedCurveを兼務しているMark Zemanが、レスポンシブサイトのパフォーマンス向上についてまとめています。 レスポンシブウェブサイトはビジュアル重視でデザインされることが多いので、パフォーマンスは二の次になりがち。320ピクセル幅のレスポンシブウェブサイトは、1600ピクセル幅のものと比較して、8%しかサイズが違わないというリサーチ結果がでている。パフォーマンス上の懸念は、レスポンシブウェブサイトの採用を躊躇する原因となっている。[参考図] Inline the initial experience (within 14k if possible) 最初の留意点は “above the fold” のCSS/J
GitHubクローンまとめ 無料でGitHubのような機能を実現するための候補 | Act as Professional
Bitbucket – 無料のプライベートリポジトリが魅力https://bitbucket.org/ 無料でプライベートリポジトリを無制限につくることができる。 プライベートリポジトリは5人までは無料で利用できる。GitHubクローンではないが、個人や数人で利用するだけならBitbucketのサービスだけでまかなえるのでおすすめ。オンプレミス製品は有償での提供。 Gitea – Go製セルフホスト型のGitHubクローン2016年にver1をリリースした期待の新星です。別途記事を書いてますので、詳細はそちらをどうぞ。 https://hiroki.jp/gitea Go製のためマルチプラットホームでさくっと動きます。DockerやVagrantの提供もしているため動作させるまでのハードルが低いです。 全文検索機能はありませんが、主要な機能は搭載されています。 GitPrephttp://
国内注目のWebサービスを支える言語・フレームワーク・アーキテクチャ一覧【2013年版】 | Find Job! Startup
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVG Icon Libraries and Custom Icon Font Organizer ❍ IcoMoon