技術ブログ | 株式会社クラウディア » Google https://cloudear.jp/blog クラウド専門の業務システム・社内ツール開発 Fri, 12 Nov 2021 05:00:35 +0000 ja hourly 1 http://wordpress.org/?v=4.0.1 『AngularJS』を今すぐコピペで体験！ https://cloudear.jp/blog/?p=628 https://cloudear.jp/blog/?p=628#comments Sun, 08 Feb 2015 11:52:39 +0000 https://cloudear.jp/blog/?p=628 みなさんこんにちは masa です。今日は CSS設計について書こうと思っていたのですが、前回のシングルページアプリケーションの記事がそこそこ人気だったようなので（？）、その流れで今人気の AngularJS を取り上げたいと思います。

突然ですが、だまされたと思って以下のコードを test.html など適当なファイル名でデスクトップに保存し、GoogleChrome で開いてみてください↓

<!DOCTYPE html>
<html lang="ja"  ng-app="" >
  <head>
    <meta charset="utf-8">
    <title>AngularJS を体験してみよう！</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
    <script>
      function MainCtrl($scope) {
          $scope.foods = [
              { foodname: 'SUKIYAKI' },
              { foodname: 'SUSHI' },
              { foodname: 'YAKINIKU' },
              { foodname: 'HAMBURG' },
              { foodname: 'TEPPANYAKI' },
              { foodname: 'CURRY' },
              { foodname: 'OYSTER' },
              { foodname: 'BANANACAKE' },
              { foodname: 'APPLEPIE' },
          ];
      }
  </script>
  </head>
  <body>
    <h2>AngularJS を体験してみよう！</h2>
    <div ng-controller="MainCtrl">
      <input type="search" placeholder="リアルタイム検索" ng-model="search">
      <ul ng-repeat="food in foods | filter:search">
        <li>{{food.foodname}}</li>
      </ul>
    </div>
  </body>
</html>

ang1

うまくリアルタイムに絞り込みされましたか？これがインクリメンタルサーチというやつです。素の JavaScript でこれを実装しようとすると結構大変ですが、AngularJS なら html のタグに ng-タグを書くだけで実装できます。

私が最近買った本に、AngularJS の特徴として以下の項目が書いてありました。

  1. HTML ベースのテンプレート機能
  2. 豊富なディレクティブ （html に直接書いたタグのこと）
  3. 多彩な表現を実現するフィルター機能
  4. 双方向データバインディング
  5. シングルページアプリケーションに最適なルーティング
  6. Ajax 通信のサポート
  7. セキュリティ対策
  8. その他（DIコンテナ、厳格なスコープ、テストの重視、モバイル対応）

前回記事で書いた「シングルページアプリケーション（以下SPA）」を作るときに、この AngularJS は大いに力を発揮します。jQuery だけで SPA 制作をがんばっていると、規模が大きくなってきたときにソースコードが膨大＆散乱してメンテナンス性が悪くなってきますので、それでお悩みの人は乗り換えてもいいと思います。

逆に、SPA のようなデータ書き換えというより、アニメーションバリバリなサイトのために jQuery プラグインを多用している方は、乗り換えてもあまりウマミがないかもしれません (´ρ｀)

ちなみに AngularJS でも「jqLite」という jQuery の簡易版が使えますし、AngularJS ファイルの前に本家フル jQuery ファイルを読み込めば AngularJS と併用できます。
※その際 jQuery2系は使えないので1系を使ってください

これからも何回か AngularJS について取り上げていく予定ですが、今日は上記「4. 双方向データバインディング」が一体どういう意味なのか、実践を交えて解説していきましょう。

 

　AngularJS の双方向データバインディングを解説

何やら難しそうに聞こえますが、まずは冒頭と同じように以下のソースコードを test2.html など適当なファイル名でデスクトップに保存し、GoogleChrome で開いてみてください↓

<!DOCTYPE html>
<html lang="ja" ng-app>
  <head>
    <meta charset="utf-8">
    <title>AngularJS の双方向データバインディングを体験</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
  </head>
  <body>
  	<h2>AngularJS の双方向データバインディングを体験</h2>
    <input type="text" placeholder="お名前を入れてください" ng-model="name">
    <div>こんにちは！ {{name}}さん</div>
  </body>
</html>

ang2

リアルタイムに名前が表示されましたか？

これが双方向データバインディングです。これも素の JavaScript でやろうとすると結構ソースコードが多くなりますが、ご覧の通りソースコードは非常に少ないですね。これは Angular が ユーザーからのデータ入力（= Model）と表示データ（= View）をヒモ付けて監視しているためです。

上の例ではフォームから一方向にしかデータ操作していませんが、プログラムで name を書き換えれば、画面上の名前もリアルタイムに書き換わります。一方通行ではなく、Model と View が常に同期することが「双方向データバインディング」です。

いかがでしたか？今日は「AngularJS に興味はあるけど、難しそう」という方向けに、すぐに試せる形で解説をしてみました。実際、AngularJS は重厚なフレームワークで学習コストが高いです。が！極めればフロントエンドの開発工数をグっと圧縮させることができると思います。また、次回以降 AngularJS の機能や使い方について解説していきたいと思います。

]]> https://cloudear.jp/blog/?feed=rss2&p=628 0 Illustrator & PhotoShop で Google Fonts を使う https://cloudear.jp/blog/?p=443 https://cloudear.jp/blog/?p=443#comments Sun, 04 Jan 2015 09:46:11 +0000 https://cloudear.jp/blog/?p=443 あけましておめでとうございます。新年みなさまどのようにお過ごしでしょうか？
さて、今回は Google Fonts をウェブフォントとして使う、ではなく Google Fonts を PC にインストールしてイラレやフォトショから使う方法です。

Google Fonts というと、無料で商用利用もできるウェブフォントで、使いたいフォントを探して HTML のメタに URL を貼り付けて、font-family から読み出すというのが本来の使い方。
これだけではなくそのフォントを自分の PC にインストールすることも出来るので、ロゴを作るデザイナーさんにとってもありがたいサービスなんです。

 

「なんだって！？オイラはいつでも明朝体で勝負でぇ！」という粋な日本男児は読み飛ばしてください。

 

さて、早速 Google Fonts からイケてるフォントをダウンロードする手順をば

gf1

 

どのフォントでもいいですが、今回は「geo」で検索します。
ちなみにゲオではなくジオだと思います´･∀･)　↓

gf2

 

 

次は「GEO」の中でダウンロードしたい字体の「Add Collection」をクリックします。↓

gf3

 

次に真ん中の小さいボタンをクリックします。↓

gf4

 

 

字体を選んで、下矢印のボタンをクリックします。↓

gf5

 

ウインドウが出ますので、一番上の文章の「zip file」をクリックするとダウンロードが開始されます。↓

gf6

 

あとはファイルを解凍して、インストールしたい .ttf ファイルをダブルクリックするだけです。
ちなみに regular に対して、 oblique は斜め字体のことです。

gf7

 

では今回は Illustrator CC から使ってみましょう。↓

gf8

 

ＧＥＯ フォントはうちのブログロゴで使っています。ポップで角ばったフォントで、個人的によく使うフォントのひとつです。ひとつ注意点ですが  GoogleFonts は日本語はありません(ﾉД`)　あぁ・・・無数の漢字がある日本語の切なさよ。

 

いかがでしたか？
今日はデザイン関連の記事でした。これだけの数のフォントが無料で使えるとはありがたいですよね。みなさんもお気に入りのフォントを見つけて、イケてるデザインを制作してください。

]]> https://cloudear.jp/blog/?feed=rss2&p=443 0