js

2016.10.16

AngularJSを使い始めて気づいた点

AngularJSを使い始めて、すぐさまつまずきました。。。
AngularJSのエラーが出て、全然実行できない。もう使うの止めようかな・・・絶対JQueryでガリガリ書いた方が早いし、楽！！と思い始めてますw

エラー内容わかりにくいし、独特のタグをHTMLに使用するからデザインとかと組み合わせると見にくくて、しかもSEO的に微妙みたいな話だし・・・

業務系とか管理側とかならいいのかも。SEOとか気にする表側にはたぶん向いてない。

一応、今回のエラー内容をメモ。まぁ、ちゃんとマニュアル読んで順番に手順踏んでれば大丈夫だったんですが・・・
こんな簡単なとこでつまずいているようじゃ、たぶん続かない・・・w

以下がエラーが出るソース。これを見て、すぐ原因がわかれば、AngularJS使っていけると思います。

{{ temp }}に’hogehoge’を表示するソース

<!DOCTYPE html>
<html ng-app>
  <head>
    <script src="js/angular.min.js"></script>
    <script>
    angular.module("app", [])
        .controller("sampleController", function($scope) {
            $scope.temp = 'hogehoge';
        });
    </script>
  </head>
  <body>
  <div ng-controller="sampleController">{{ temp }}</div>
  </body>
</html>

AngularJSのエラーメッセージ: Error: ng:areq
Bad Argument
Argument ‘sampleController’ is not a function, got undefined

回答

原因: module名の指定が足りない
対応: 「<html ng-app>」　→　「<html ng-app=”app”>」に変更

2016/10/07 追記
AngularJS2系は、だいぶ変わっていて、使いやすくなっている模様！
AngularJSは、失敗作だったという話も・・・？

2016.10.15

【簡単】AngularJS（jsフレームワーク）のダウンロード＆動作確認

近年、javascriptの開発にフレームワークを使用する傾向にあるようです。
javascriptのフレームワークには、AngularJSやBackbone.js、Knockout.js、React.jsなどがあり、種類が増えてきています。

javascriptのフレームワークは、おおむね以下のような特徴があります。

MVC/MVVMモデル
HTML/JavaScriptの双方向バインディング
URLルーティング
HTMLテンプレート

今回は、数種類あるjavascriptのフレームワークの中の一つ「AngularJS」をピックアップし、ダウンロード・導入〜実際に動作させてみたいと思います。

AngularJSとは

AngularJSはGoogle製のJavaScriptフレームワークで、Googleとコミュニティで開発している非常に活発なオープンソース(MIT)です。

AngularJSはMVWフレームワークで

双方向データバインディング
ルーティング
独自タグ、属性
REST API呼び出し
DI

など機能が豊富なフルスタックフレームワークです。

AngularJSダウンロード

1.公式サイトにアクセス

以下リンクをクリックし、公式サイトを開きます。
公式サイト

2.Downloadボタンクリック

真ん中の青いDownloadボタンをクリックします。

3.モーダルのDownloadボタンクリック

以下のようなモーダルが表示されます。
デフォルトの選択のままDownloadボタンをクリックします。
angular.min.jsのダウンロードが始まります。

AngularJS導入＆動作確認

1.ダウンロードしたjsファイルを任意の場所にアップロード

例）ルートディレクトリ以下の「js/common/angular.min.js」にアップロード

2.アップロードしたjsファイルを読み込む

headタグ内でscriptタグを使用して読み込む

<html>
<head>
<script src="js/common/angular.min.js"></script>
</head>
<body>
</body>
</html>

3.AngularJS動作確認

htmlタグに「ng-app」ディレクティブを追加し、body内に「{{ 5 + 1 }}」を記述

<html ng-app>
<head>
<script src="js/common/angular.min.js"></script>
</head>
<body>
5 + 1 = {{ 5 + 1 }}
</body>
</html>

以下のように「{{ 5 + 1 }}」の部分が「6」と表示されていればOKです。

「{{ }}」は、エクスプレッション構文で、HTML内で動的な処理を行うために使用します。

以上でAngularJsのダウンロード〜動作確認は終了です。
導入までは簡単に行えたかと思います。

AngularJS公式APIリファレンス

2016.10.12

fancyboxのモーダルでiphoneでのスクロール対応

fancyboxを使用してモーダル表示している場合、iphoneのバージョンによってはモーダル内のスクロールができないことがある。
※2本指でスクロールすると、モーダル内がスクロールするiphoneのバージョンもある。そのバージョンも以下の対応で1本指でスクールすることが可能

対応するにはfancyboxのoptionでonCompleteを使用し、スクロールできるようにする。

以下、サンプルコード

// オプション
var option = {
    'width': 740,
    'height': '85%',
    'type' : 'iframe',
    // スクロールしてもmodalwindowを中心にするか
    // [true:中心にする、false:中心にしない]@default:false
    'centerOnScroll' : 'true',
    // モーダル表示完了時に行う処理
    'onComplete':function(){
        // iphoneでiframe内がスクロールできない対応
        $('#fancybox-content').css('-webkit-overflow-scrolling', 'touch');
        $('#fancybox-content').css('overflow', 'auto');
    }
};

2016.10.12

hashchangeとfancyboxでブラウザバックがうまくいかない

ブラウザバック対応でjsでhashchangeイベントを使用しいている場合で、fancyboxのiframeを併用していると思うようにブラウザバックが行われないケースがある。

fancyboxはモーダル表示するjsのライブラリです。

原因

原因は、fancyboxで表示したモーダルを閉じた時に、ブラウザの履歴が記録されてしまうため。

fancyboxを閉じるときに、$.fancybox.close()が実行されているのだが、そのときにiframeのsrcを変更している箇所がある。
なんと、iframeのsrcを変更すると、ブラウザの履歴が記録されてしまう。同じハッシュで・・・

そのため、fancyboxを閉じた後にブラウザバックすると、ハッシュは変わらないのに1つ前のリクエストに戻ろうとするので、おかしな動作になる。ブラウザによっては起こらないみたいだが・・・firefox、chromeはダメだった。

対応

いろいろ試した結果、fancyboxのライブラリを修正することに。

jquery.fancybox-1.3.4.js 945行目あたりの$fancybox.closeファンクションの中

元のソース

content.find('iframe').attr('src', isIE6 && /^https/i.test(window.location.href || '') ? 'javascript:void(false)' : 'about:blank');

修正後のソース

if (isIE6 && /^https/i.test(window.location.href || '')) {
content.find('iframe').attr('src', 'javascript:void(false)');
} else {
if (content.find('iframe')[0]) {
content.find('iframe')[0].contentWindow.location.replace('about:blank');
}
}

修正する場合は、自己責任で要確認してください。

js