macでCotEditorを使用していて、複数行のインデント方法がわからなかったのでメモ。
- インデント
- 複数行を選択して Command + ]
- インデントを戻す
- 複数行を選択して Command + [
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は、失敗作だったという話も・・・？
【簡単】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のダウンロード〜動作確認は終了です。
導入までは簡単に行えたかと思います。
【Atom】 半角スペース・タブ表示
Macで使用するエディタでAtomが使いやすかったので、半角スペース・タブ表示を備忘録として残しておく。
Atom > Preferences > Settings > Editor SettingsのShow Invisiblesにチェック
以上
カレーin上野【デリー 上野店】
上野に用事があったので行きたかったお店に行ってきました！
・カシミールカレー（９５０円）
辛いのですが、嫌な辛さではないです。
体がポカポカしてきて、体の中の余分なものが出ている気がしました！！
今度は他のメニューも食べてみたいです！！
オススメです！！
カレーin恵比寿
最近カレーを食べる機会が多かったので記事投稿！！
モンスーンカフェ 恵比寿
・本日のカレー（８５０円）
この日はマレーシアンカレーでした。
辛さはマイルドです。
チキンは食べごたえあります。オススメです！！
ヴィナーヤ 恵比寿
・日替わりカレー（９５０円）
この日はキーマカレーでした。
辛さはマイルドです。
ナンとライスが選べ、ランチタイムはおかわり無料です。オススメです！！
【鹿児島】種子島のスナック|事前調査編
『ふらっとスナックーズ』による必死の種子島スナック調査が続いております。
が・・・なかなか情報が見つからず。。。
華りん
西之表市にあるフェリー乗り場から近めのお店。
| 住所 | 鹿児島県西之表市東町９０ |
|---|---|
| 営業時間 | ? |
| 定休日 | ? |
| tel | 0997-22-2371 |
Emico Club(エミコ クラブ)
南種子町にあるスナック。種子島の南の方。
ロケット関係者が集うスナックらしい。ママさんが綺麗とのこと。
| 住所 | 鹿児島県熊毛郡南種子町中之上2561-7 |
|---|---|
| 営業時間 | 20:30～00:00 |
| 定休日 | ? |
| tel | 0997-26-0707 |
SORA(ソラ)
西之表市にあるフェリー乗り場から近めのスナック。
情報少なめ。
| 住所 | 鹿児島県西之表市東町1 |
|---|---|
| 営業時間 | ? |
| 定休日 | ? |
| tel | 0997-22-0128 |
スナック れもんてい
西之表市にあるフェリー乗り場から近めのスナック。
情報少なめ。
→[追記]入りはしませんでしたが、入り口まで行ったら盛り上がってる感じでした。
| 住所 | 鹿児島県西之表市西町７０８２－２Ｆ |
|---|---|
| 営業時間 | ? |
| 定休日 | ? |
| tel | 0997-22-1257 |
グランドパブ ギャルソン
西之表市にあるフェリー乗り場から近めのスナック。
情報少なめ。
→[追記]入りはしませんでしたが、入り口まで行ったら結構盛り上がってました。
| 住所 | 鹿児島県西之表市西町7082 大洋ビル 2F |
|---|---|
| 営業時間 | ? |
| 定休日 | ? |
| tel | 0997-23-3934 |
【鹿児島】種子島の気になる居酒屋＆飯処｜事前調査編
『ふらっとグルメーズ』が頑張って調査しております。
種子島の居酒屋、飯処、ディナー、ランチで調査中です。
随時更新予定！
味処 井元
ディナーオススメの店「味処 井元」
種子島の四季折々の食材が楽しめる創作料理のお店。
活魚料理をはじめとした、旬の魚介を刺身や味噌・塩焼きなどが食べられるみたいです。
錦海老がうまそうー！希少らしいです。
あと気になるのは、手作りアイス！メディアにも取り上げられてて、ネットでも販売してます。
Facebookページ発見
味処 井元 Facebook
西之表市にあるフェリー乗り場から近めのお店。
| 住所 | 鹿児島県西之表市西町189-1 |
|---|---|
| 営業時間 | 11:00～14:00 17:00～22:00 |
| 定休日 | 不定休 |
| tel | 0997-22-1218 |
味の憲ちゃん 鴨女店
種子島のラーメン屋さん。
島内では有名なお店のよう。地元客がメインの地元の味が味わえるお店。
シメのラーメンはここか、と思いきや19時で閉まる。。
西之表市にあるフェリー乗り場から少し南に行ったところにあるお店。
| 住所 | 鹿児島県西之表市鴨女町217-5 |
|---|---|
| 営業時間 | 10:00～19:00 |
| 定休日 | ? |
| tel | 0997-23-2383 |
天竜
種子島の天ぷら屋さん。
刺身や名産の安納芋、キビナゴの天ぷらが食べられる地元で数少ない専門店。
昔ながらの雰囲気をただよわせるお店のようなので、気になる１店です。
西之表市にあるフェリー乗り場から近めのお店。
| 住所 | 鹿児島県西之表市西町65-2 |
|---|---|
| 営業時間 | 12:00～20:00 |
| 定休日 | ? |
| tel | 0997-22-1300 |
いつ味食堂
種子島の中種子町にある雰囲気ある定食屋。
ボリューム満点のラーメンと定食のお店で、昔ながらの大衆定食屋のような感じで、親しみやすいお店。
繁盛店で混んでることが多いらしい。
ここも11時で閉まるらしいので、シメのラーメンは無理か・・・w
| 住所 | 鹿児島県熊毛郡中種子町野間16900-1 |
|---|---|
| 営業時間 | 10:00～19:00 |
| 定休日 | ? |
| tel | 0997-27-3718 |
和風レストラン田園
地元の食材をふんだんに使用した料理が食べられるようです。
一番人気は『唐芋センの鉄板焼』
唐芋センの鉄板焼とは・・・さつま芋のでんぷんを使用した郷土料理をオリジナルにアレンジしたもの
最近あまり更新されていないようですが、Facebookページ発見
和風レストラン田園 Facebook
お店が南種子町なので、種子島の南側にあるお店。
フェリー乗り場からは車で1時間くらい。
※お店が小さい為、来られる際はお電話を頂ければとのことです。
| 住所 | 鹿児島県熊毛郡南種子町中之下1922-7 |
|---|---|
| 営業時間 | 11:30～14:00 17:30～23:00 |
| 定休日 | 日曜日(不定休) |
| tel | 0997-26-0686 |
我家
情報少なめ。なので、気になる。。
郷土料理も出してくれるお店のよう。
南国バリ風なおしゃれなロフト式２階建。
ランチがよかったという口コミを発見したので、ランチを食べに行ってみたいお店。
西之表市にあるフェリー乗り場から少し南に行ったところにあるお店。
| 住所 | 鹿児島県西之表市西之表１４４１５-１１２ |
|---|---|
| 営業時間 | ? |
| 定休日 | ? |
| tel | 0997-22-0287 |
なべ割
店主が漁師で、その日に獲れた新鮮な魚が食べられるよう。
他にもバラエティにとんだ、いろんな料理が量が多い＆安く食べられるとのこと。
地元感満載の居酒屋ぽいので気になるなー！
お店が南種子町なので、種子島の南側にあるお店。
フェリー乗り場からは車で1時間くらい。
最近はあまり更新されていないようだが、Facebookページ発見
なべ割 Facebook
| 住所 | 鹿児島県熊毛郡南種子町中之上2936-4 |
|---|---|
| 営業時間 | 17:00～23:00 |
| 定休日 | 日曜日 |
| tel | 0997-26-6778 |
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');
}
};
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');
}
}
修正する場合は、自己責任で要確認してください。