Onsen UI Advent Calendar 2016 - Qiita
Android/iOS の UI を HTML5 で再現できる UI ライブラリ Onsen UI のアドベントカレンダーです！ https://github.com/OnsenUI/OnsenUI https://ja.onsen.io/ 元々は海外向けに提供していた OSS で、海外でのみ知名度があるという状況でしたが、 最近国内でも利用者が増えてきたのでアドベントカレンダーを用意してみました（2016/11/30 に急遽作成）。 Onsen UI を使って作ったサイト・アプリの紹介 Onsen UI を使う際に苦労したこと Onsen UI と React, Angular, Vue.js の相性の分析 Onsen UI と他の CSS フレームワーク・UI フレームワークとの比較 Onsen UI チームに言いたいこと などなど、Onsen UI に関係することなら何でもOKです。
Navstack.js - ハイブリッドアプリやスマートフォン向けWebサイトの画面遷移はこれにお任せ MOONGIFT
スマートフォンのWebビューは従来に比べると遙かに進化していて、レンダリング速度やJavaScriptの実行速度も高速化しています。そんな中、ネイティブアプリとWebアプリの違いと言えば、画面遷移のアニメーションにあるのではないでしょうか。 上下左右から画面がスライドして表示されるのはやはりアプリならではといった感があります。そんな表示をサポートしてくれるWebアプリ用ライブラリがNavstack.jsです。 Navstack.jsの使い方 使い方としてはまず、ステージを作ります。 stage = new Navstack({ el: $('#stage') }); 後はページ遷移をする度にpushしていくだけです。 // Navigate to new pages using push. stage.push('/home', function() { return $("<div cl
React CanvasによるモバイルブラウザのUI改善とそれが起きる必然 - ワザノバ | wazanova
http://engineering.flipboard.com/2015/02/mobile-web/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 ものごとが進化すると、利用するユーザの満足度はあがるので、それを用意する作業量はツールの改善に従って最終的には減っていくのか？ スマホが登場して、アプリ上でのスワイプなどの直感的にできる操作や表現の幅が広がり、またディスプレイも改善。では、プロダクトをつくる側がそれに慣れてくると、作業量が減るのか？いや、現実は逆。同じことを実現する作業量は減っても、トータルでは減らない。ブラウザとアプリにまたがって、双方のメリットを取り込もうと、もっとレベルの高いUIを目指した競争が続いています。 David BellonaがTwitter Universityでの
エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今年もHTML5 Minutesに登壇してきました。こんにちは、先生です。 当日は「フロントエンド開発スピードをあげるための環境を作ってみた話」をしてきました。 今回はその環境を使ってみるまでの手順を書いていきたいと思います。 必要なものをインストール NodeJS Gulp WebPack Bower PhantomJS NodeJSとGulpのインストールは過去の記事「Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ」をご覧ください。 WebPackのインストール WebPackはさまざまな形式のモジュールを静的なファイルにまとめて出力してくれるツールで、拡張性が高く最近好んで使っています。 WebPack http://webpack.github.io/ インストールはnpmを使って簡単にできます。 npm install webpack -g ※ macは
スマホでも動作するJS製の2D物理エンジン「Matter.js」:phpspot開発日誌
Matter.js - a 2D rigid body JavaScript physics engine スマホでも動作するJS製の2D物理エンジン「Matter.js」。 デモではパラメータ等も調整して動きをカスタマイズできて面白い。 手元のiPhone6でもテストしてみましたが、なめらかに動作しました。 関連エントリ 3D、ゲーム、物理エンジン、トゥイーンなど、ActionScript3用便利ライブラリ集 ActionScript3用3D物理エンジンライブラリ「WOW-Engine」 Actionscriptで書かれた物理エンジンライブラリ「jiglibflash」 JavaScriptの物理エンジン「Box2d」
最近のフロントエンドツールの紹介
JavaScript はある程度 読み書きできる人 を対象に、Node.js および npm を実際に使ってみます。 環境は何でもよいのですが、今回は Windows 環境で Visual Studio Code という エディタ を利用して、コンソール に "Hallo World" を出力する プログラム を作成します。 このスライドで Node.js を始める足掛かりが得られる ハズ。
LAMPに代わる構成として注目のMEANスタックの基礎知識とインストール、ひな型作成
LAMPに代わる構成として注目のMEANスタックの基礎知識とインストール、ひな型作成：MEANスタックで始めるWebアプリ開発入門（1）（1/3 ページ） MEANスタックを用いたWebアプリの開発方法について紹介していく連載。初回はMEANスタックの特徴と構成要素MongoDB、Express、AngularJS、Node.jsの概要、インストールの仕方とひな型の作成方法を解説。 連載目次 今でもよく使用されていますが、以前からWebアプリ開発ではLAMP環境がよく使用されていました。LAMPとは、一般的なWebアプリを開発するのに人気の高いオープンソースソフトウェアを組み合わせたもので、以下を用いたシステムのことです。それぞれの頭文字を取って「LAMP」と呼ばれています（参考）。 OS：Linux Webサーバー：Apache HTTP Server データベース：MySQL プログラ
この夏、AngularJSを始めよう。Let’s try AngularJS!! | ヘッドウォータースTechNote | 株式会社ヘッドウォータース
Facebook創業者のザッカーバーグ氏が「HTML5に賭けたのは失敗」と言ったのは今や昔。 現在では既に多くの方がHTML5でのアプリケーション開発を行っています。 弊社でもHTML5を用いたハイブリッドアプリケーションの開発を盛んに行っております。クオリティーの高いHTML5アプリケーションを作るために、週末を利用してJavaScriptフレームワーク「AngularJS」の勉強会を開催しております。今回はAngularJSのご紹介と勉強会で学んでいる内容を少しアウトプットしたいと思います。 AngularJSってなに? まず、AngularJSについて簡単にご紹介します。AngularJSとは上記でも記述したように、JavaScriptのMVCフレームワークです。MVCのMはmodel(モデル),Vはview(ビュー),Cはcontroller(コントローラー)を表します。MVCフレ
【JavaScript】メモリの浪費を避けるコーディング | ヘッドウォータースのブログ TechNote
こんにちは。良昌です。 Facebook、GithubなどのJSON形式でユーザ情報を返却するAPIや、PhoneGap、Monacaなどのスマートフォンのマルチプラットフォームを提供するライブラリ、IDEが開発ツールとして定着してきたことにより、JavaScriptを利用する機会が増えたのではないでしょうか。 今回は、JavaScriptコンテナがWebブラウザの場合に、動的に確保されるメモリ領域の浪費を避ける方法について書きたいと思います。 JavaScriptにおけるメモリの浪費を避けるコーディング JavaScriptにおけるメモリの浪費を避けるコーディングをするためには、GC(ガベージコレクション)、クロージャについての知識が必要です。まずは、この2つの機能について説明していきます。 ■GC(ガベージコレクション) GCとはプログラムが動的に確保したメモリ領域の内、不要になった領
monacaでenchant.jsを使って簡単なゲームを作ってみた。 | ヘッドウォータースのブログ TechNote
こんにちは。竹石です。 今回は、monacaでenchant.jsを使ったらどんな感じなんだろうって思って、 ちょっと簡単なゲームをつくってみましたのでご紹介します。 ちなみに、enchant.jsはカンタンにゲームやアプリを開発できる HTML5 + JavaScript のフレームワークです。 ゲームとしてイケてるものを！と言うよりは、 monacaでenchant.jsを使ってみたかった・・・ただそれだけなんです！ 今回つくるゲームのイメージ ということで、こんなゲームをつくってみました。 落ちてきた葉っぱに当たると、葉っぱが消えるといういたってシンプルなゲームです。 動きは、メガ盛りポテト風です。 サンプルコード お約束のコードを書く まずお約束的なところを書きます。 enchant(); function callinit() { if (getUa() === false) i
Monaca 端末にデータを保存する方法 | ヘッドウォータースのブログ TechNote
どーも、こんにちわ！竹石です。 いま、内定者研修でMonacaを使って、スマホアプリの開発をしていて、 データの保存方法についてちょっと調べてみたのでブログでご紹介します。 ■ Monacaでデータ保存する方法 ・ SQLite まず、パッと思いつくのはSQLiteを使ったデータの取り回しです。 (1) DB作成 (2) テーブル作成 (3) データ挿入、参照、更新、削除 http://docs.monaca.mobi/ja/tips/storage/ てな感じ。 ・ localStorage そして、もう一つはlocalStorageを使ったデータの取り回しです。 localStorageは Web Storageの機能の一つで クッキーのようにブラウザでデータを保存できる仕組みです。 クッキーよりもデータ保存容量が大きく、データもクリアされないことから クッキーよりも使い勝手が良いと思
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
