uglify-jsで顧客とのアプリ確認をもっと楽に！
* 顧客に開発中のアプリを見てほしい * 自分たちはもちろんのこと、顧客にも素早く確認してもらいたい * アプリが完成に近づけば近づくほど、特定箇所の確認が難しくなる * 特定の手順を踏まなければならない * 特定の条件を満たさなければならない * このためのデバッグ用コードを残しておくと、リリースに影響するため、取り除くことを覚えておかなければならない * かといって、無ければ無いで開発に不便 こんな問題、思い当たりませんか？ ネイティブアプリなら、プリプロセッサを使っての条件付きコンパイルによるデバッグビルド/リリースビルドで解決出来ますが、JavaScriptを使うWEBアプリではどうでしょうか？ 実は、前回紹介したuglify-jsというnpmモジュールには、結合/圧縮だけではなく、この条件付きコンパイルという強力な機能があります。 ということで、上記の問題をこのuglify-js
MonacaバックエンドのAngularJSモジュールを作りました
<!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title>Example</title> <script src="plugins/plugin-loader.js"></script> <script src="js/angular.js"></script> <script src="js/monaca-cloud-angular.js"></script> <script src="js/main.js"></script> </head> <body ng-controller="MainCtrl"> <pre> {{result|json}} -------------------------- {{error|json}} </pre> </body> </html> m
OnsenUI(AngularJS)でMonacaアプリを作ろう
* index.html * home_navigator.html * page1.html * page2.html 追加で、プログラムを記述する「app.js」を作成しておいてください。 app.jsの先頭で、OnsenUIのモジュールを利用するmyAppモジュールを定義しています。 <!doctype html> <html lang="en" ng-app="myApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="plugins/plugin-loader.css"> <script type="text/javascript" sr
あんなこともこんなことも。そう、Node.jsならね。
こんにちは、斉藤です。 前回までのラズベリーパイは一旦置いておいて、今日は別の話でブログを書きます。 そう、Node.jsです。 Node.jsと言えば、WEBサーバーとして立てる方も多いと思いますが、ちょっとした別の使い方もあります。 ということで、今回はWEBアプリの開発に役立つNode.jsの便利なモジュールをご紹介します。 みんな使っているあのモジュールや、知らなかった便利なモジュールがあるかも！？ それでは、ご覧下さい！ ライブラリダウンロード webアプリと言えば、色々なJSライブラリですよね？ これらをいちいち公式ページをブラウザで開いて、ダウンロードしてくるのは面倒ではないですか？ そんなときに役立つのがこちら！ pulldownというモジュールをインストールしましょう。
OnsenUIを使った一覧と詳細画面の作り方
この記事は、英語版アシアルブログの翻訳記事です。 （原文はこちら） ============================== ほとんどのモバイルアプリでは複数のページ間でデータの共有・受け渡しを必要とします。 OnsenUIはAngularJSの機能を利用しながらページ間でのデータ受け渡しを実現しています。 実際のアプリでは以下のように作ることができます。 手順1. 『OnsenUI最小限のテンプレート』からプロジェクトを作成する 1-1. monaca.mobiにログインします。 1-2. 新しいプロジェクトを作成します。 1-3. 『OnsenUI最小限のテンプレート』を選択してプロジェクトを作成します ※詳しい作成方法についてはこのチュートリアルで紹介されています 新しいプロジェクトを作成するとこのようになります: 手順2. データを保持するためのServiceを作成する ここ
AngularJSに触れてみる その2
前回のブログに引き続き、AngularJSの機能を触っていきたいと思います。 こちらは今回機能紹介のために用意したＰＣ版のデモです。モバイルでは見にくいので、でうまく動かない場合はＰＣに最新版のブラウザ (最新版のGoogle Chromeなど) をダウンロードしてからご覧ください。 今回はデモで用いられているAngularJSの機能、主にngViewについて紹介していきたいと思います。ngViewを用いることでURLの切り替えによって読み込むコンテンツを切り替えることができます。 上記デモはボタンをクリックするごとにURLを切り替えて、そのURLに対応したHTMLテンプレートとコントローラーを読み込ませて表示を行なっています。また、切り替える時のアニメーションにはngAnimateというAngularJSのアニメーション機能を使っています。 まずはindex.htmlのソースコードを掲載
AngularJSに触れてみる その1
AngularJSはGoogle社が開発しているJavaScriptのMVCフレームワークです。Webの技術を使うMonacaでももちろん使うことができます。また、jQueryなどの他のライブラリと併用することもできます。MVCとはModel(モデル)、View(ビュー)、Controller(コントローラー)の略称でありそれぞれのコンポーネントにアプリケーション中の役割を分割する思想、手法です。 Model:アプリケーション内で使うデータ構造。 View:マークアップなどアプリケーションのユーザーの実際に目にするもの。 Controller:アプリ内で使うデータを操作するコンポーネントであり、ModelとViewを操作するもの。 AngularJSのMVCに関して本家ドキュメントへのリンクを貼っておきますので、詳しくはこちらを参照してください。 Model View Controller
最近のJavaScript開発まとめ
こんにちは、中川です。 ここ1・2年ですが、私の担当するプロジェクトでは、 PHPよりもJavaScriptの開発が多い状態が続いております。 JSのプロジェクトを重ねるにつれ、開発環境も段々と整理されてきましたので、 一旦、最近のJS開発で利用しているライブラリやツールなどをまとめてみました。 フレームワーク ●Backbone.js http://backbonejs.org/ JavaScriptのMVCフレームワーク。 何も使わない(もしくは我流)よりは、これを使って欲しいと思えるフレームワークです。 利用者が多く日本語情報も豊富にあるのと、フレームワーク自体が1500行程度と軽量なため、学習コストを低く抑えることができます。 ●AngularJS http://angularjs.org/ データバインディングを備えたフレームワーク。 高機能なテンプレートや、DIの仕組み、ルーテ
【Winアプリ】ブラウザの自動操作！～Selenium WebDriver～ : アシアルブログ
はじめに 今回はSelenium WebDriverをご紹介します。ブラウザ操作を自動化する際には最適な仕組みです。Webシステムのend-to-endテストを自動化する際には、ブラウザ操作が必要になることがあります。そんな時にSelenium WebDriverはとても便利です。 Selenium Seleniumとは、ブラウザをプログラムで動かすフレームワークです。この仕組みを使うことで、ユーザーテストなど、様々な処理を自動化できます。現在のところ、Seleniumは以下のWebブラウザを制御できます(公式サイト)。 Internet Explorer Firefox Chrome Opera Android標準Webブラウザ Safari (iPhone標準Webブラウザ) 実際に使用する際には、以下の2つの仕組みのどちらかを使用します。
PHPで仮想マシンベースの正規表現エンジンを作ってみる 第一回
こんにちは、久保田です。 皆さん正規表現は使っていますか? PHPに限らずどんな言語を使っていても、正規表現にお世話になっていないプログラマはいないと思います。しかし、その正規表現がどのように実装されているかについては知らない方が多いのではないのでしょうか。 この記事では、その正規表現エンジンの実装方法の一つである仮想マシンによる正規表現エンジンの実装方法を解説しつつ実際に簡単な正規表現エンジンを作っていきたいと思います。 正規表現エンジンの実装方法 正規表現エンジンの実装方法はいくつかあるのですが、それの一つに仮想マシンによって正規表現のマッチング処理を実行するやり方があります。PHPで利用している正規表現エンジンであるPCREはこの方式を採用しています。 仮想マシンによる実装方法は、正規表現というよりもプログラミング言語の実装方法の一つとして知られています。Rubyの最もメジャーな実装
JavaScriptのコードを測ろう「plato」
こんにちは、中川です。 PHPよりもJavaScriptを書く機会が多いこの頃です。 さて、JavaScriptといえば、何も考えずにアプリを作ると プロジェクトがカオスになることで有名な言語ですね。 気を使って作っていてもちょっとした油断で、 気付いた時にはメンテナンス不可能なコードが出来上がっていたりします。 今回ご紹介するのは、不幸にもそんな状態になってしまったたくさんのコードの どこがどのような状況なのかをパッと確認できるツールをご紹介します。 ■plato https://github.com/jsoverson/plato platoはNode.jsで動作します。 プロジェクトのJSファイルを解析して、 コードの行数や複雑度、メンテナンス性、jshintの警告などをHTMLレポートとしてまとめてくれます。 実際のレポート画面は以下で確認できます。 ・jquery ( http:
Webデザイン 配色をイメージで学ぶ【基本11色】
こんにちは、高橋です。 近頃、ユーザが製品を経験してどれだけ満足を得れるのかといった仕組みが注目を浴びています。UXですね。配色もUXの範疇とすれば、理解を深めておいて損はないと思います。今回は基本的は色と使われるWebサイトのタイプも併せてザックリと紹介していきます。 ・色紹介 ◯赤（Red） 情熱や活気といった気持ちを高ぶらせる色です。 インパクトを与えたいイベント・キャンペーンサイトで使われています。またサイトカラーだけでなく、強調したいコンテンツ・危険を促す削除ボタン等にも使えます。艶のある赤は上品さを感じさせますが、使い過ぎると落ち着きのない雰囲気になってしまいまいます。反対に暗い赤は気持ちを落ち着かせる効果があります。 ◯緑（Green） 健康や自然といった癒しを連想させる気持ちを落ち着かせる色です。 自然やエコをモチーフとしたサイトで使われています。また安心のカラーとも呼ばれ
準備が簡単。JavaScriptテストツール「Testacular」
各質問に答えていくと設定ファイルができあがります。 今回はテストフレームワークはjasmine、 ブラウザはChrome、Firefox、Safariとしています。 ※各質問の選択肢はタブで切り替えられます。 Which testing framework do you want to use ? Press tab to list possible options. Enter to move to the next question. > jasmine Do you want to capture a browser automatically ? Press tab to list possible options. Enter empty string to move to the next question. > Chrome > Firefox > Safari > Whic
ちょっと便利なJavascriptオブジェクトの作り方
今回は、ちょっと便利なJavascriptオブジェクトの作り方をご紹介します。いわゆるモジュール・パターンと呼ばれている方法です。 はじめに 最近、HTML5への注目と共に、Javascriptを使用する機会が増えてきました。以下のように適用範囲は多岐に渡っています。 通常のWebサイトでのユーザビリティ向上 スマートフォン用Webサイト開発 HTML5アプリによるクライアント・アプリ開発 スマートフォンのハイブリッドアプリ開発 Node.jsによるサーバサイド・プログラミング このように、Javascriptが基幹となる仕組みが広がっています。クライアント側とサーバ側を同じ言語で作れることは、開発側にとってはとても有難いことです（学習コストの低減、人的リソース配分の柔軟性など）。もちろん、発注者やエンドユーアにとっても開発速度などの面で利益が生まれます。 Javascriptプログラミン
PHPで使えるレコメンドエンジン
皆さん、こんばんは。笹亀です。 先日、MacBookProの13インチでRetinaディスプレイを搭載したとっても魅力的なモデルが発表されました。 自分のMacBookProが13インチでもう3年くらい使用しているので、買い替えたいと悩んでます。 PCはエンジニアの商売道具ですから、多少のわがまましても購入してもバチはあたらないかと思ってます＾＾； 本日はレコメンドエンジンについてご紹介したいと思います。 主にPHPで利用できるという目線で使ったことがあるもの、使ったことがないものの両方をご紹介します。 レコメンドというのはよく「この商品を買った人はこの商品も買ってます」とか見受けるかと思いますが、商品などをおすすめするような機能のことを言います。 ただ、一般的に無料（オープンソース）で提供されている独自のロジックにより複雑な計算などをさせてレコメンド機能を実装したい場合などにはあまりむか
JavaScriptでうっかりやってしまいそうなこと色々
こんにちは、中川です。 今回はJavaScriptで開発していると、うっかりハマってしまうちょっとした罠たちを紹介したいと思います。 JavaScriptでの開発経験者であれば、どれか一度はひっかかったことがあるのではないでしょうか？ String ●String#replace()は文字列指定では全部置き換えない 対象文字列を一括して置き換えたいなどでString#replace()を使いますが、 検索対象を文字列で指定してしまうと最初に一致した部分しか置換しません。
Linux でフォントのレンダリングを好みのものにする方法
$ curl -LOJ http://www.infinality.net/fedora/linux/zips/freetype-infinality-2.4.10-20120616_01-x86_64.tar.bz2 $ curl -LOJ http://downloads.sf.net/project/freetype/freetype2/2.4.10/freetype-2.4.10.tar.gz $ tar xvf freetype-infinality-2.4.10-20120616_01-x86_64.tar.bz2 $ tar xvf freetype-2.4.10.tar.gz $ cd freetype-2.4.10 $ patch -p1 < ../freetype-add-subpixel-hinting-infinality-20120616-01.patch $ p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.asial.co.jp/1249
http://blog.asial.co.jp/1241
http://blog.asial.co.jp/1236