タグ

ブックマーク / blog.asial.co.jp (6)

  • AngularJSに触れてみる その1

    AngularJSはGoogle社が開発しているJavaScriptのMVCフレームワークです。Webの技術を使うMonacaでももちろん使うことができます。また、jQueryなどの他のライブラリと併用することもできます。MVCとはModel(モデル)、View(ビュー)、Controller(コントローラー)の略称でありそれぞれのコンポーネントにアプリケーション中の役割を分割する思想、手法です。 Model:アプリケーション内で使うデータ構造。 View:マークアップなどアプリケーションのユーザーの実際に目にするもの。 Controller:アプリ内で使うデータを操作するコンポーネントであり、ModelとViewを操作するもの。 AngularJSのMVCに関して家ドキュメントへのリンクを貼っておきますので、詳しくはこちらを参照してください。 Model View Controller

  • ちょっと便利なJavascriptオブジェクトの作り方

    今回は、ちょっと便利なJavascriptオブジェクトの作り方をご紹介します。いわゆるモジュール・パターンと呼ばれている方法です。 はじめに 最近、HTML5への注目と共に、Javascriptを使用する機会が増えてきました。以下のように適用範囲は多岐に渡っています。 通常のWebサイトでのユーザビリティ向上 スマートフォン用Webサイト開発 HTML5アプリによるクライアント・アプリ開発 スマートフォンのハイブリッドアプリ開発 Node.jsによるサーバサイド・プログラミング このように、Javascriptが基幹となる仕組みが広がっています。クライアント側とサーバ側を同じ言語で作れることは、開発側にとってはとても有難いことです(学習コストの低減、人的リソース配分の柔軟性など)。もちろん、発注者やエンドユーアにとっても開発速度などの面で利益が生まれます。 Javascriptプログラミン

    ちょっと便利なJavascriptオブジェクトの作り方
  • JavaScriptでうっかりやってしまいそうなこと色々

    こんにちは、中川です。 今回はJavaScriptで開発していると、うっかりハマってしまうちょっとした罠たちを紹介したいと思います。 JavaScriptでの開発経験者であれば、どれか一度はひっかかったことがあるのではないでしょうか? String ●String#replace()は文字列指定では全部置き換えない 対象文字列を一括して置き換えたいなどでString#replace()を使いますが、 検索対象を文字列で指定してしまうと最初に一致した部分しか置換しません。

  • 【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18(前編)

    こんにちは、橋です。 今回と次回の2回にわたり、Safari、ChromeのWebインスペクターやFirefoxのFireBugで使えるconsoleオブジェクトの使い方について書いてみたいと思います。 Javascriptのコードをデバッグする際に、console.logを使ってメッセージやオブジェクトの内容をログに表示することがあるかと思いますが、 この「console」オブジェクト、実はlogメソッド以外にも複数のメソッドがあります。 まずは、consoleオブジェクトにどのようなメソッドがあるか、console.logを使って表示してみたいと思います。 consoleオブジェクトの中身を見てみると、__proto__オブジェクトに以下のメソッドが定義されています。 assert count debug dir dirxml error group groupCollapsed g

    【Javascript】consoleオブジェクトが持つlog以外の便利メソッド18(前編)
  • Twitter BootstrapでさくさくWeb開発 : アシアルブログ

    <div class="container-fluid"> <div class="row-fluid"> <div class="span4"> Span4の中身 </div> <div class="span8"> Span8の中身 </div> </div> </div> Preタグで囲むコード エンジニアの皆さんなら、ブログにコードを書きたいですよね。 Twitter Bootstrapでも、かっこ良くコードを見せる手法を提供しています。 ・codeタグで囲む 赤くなります。 ・preタグで囲む 囲み枠がつき、灰色になります。 ・Preタグ+Google Prettifyを使う preタグのclassに、prettyprint linenums を入れましょう。 これが超かっこいい!!コードを見せるならこれがよさそうですね! さて、かっこいいGoogle Prettifyですが、こ

    Twitter BootstrapでさくさくWeb開発 : アシアルブログ
  • HTML5+CSS3の導入時に役立つ7つの設定

    こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 1.HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam

    HTML5+CSS3の導入時に役立つ7つの設定
  • 1