【AngularJS】自作のカスタムフィルタで true、false を変換して表示するコード

スポンサードリンク


やりたい事

  • true、false を HTML では任意のフォーマットに変換して表示したい。
  • たとえば、true ⇒ ○、false ⇒ ×
  • AngularJS を使いたい。

調べてみますと、フィルタという機能を使えば、たとえば「1」を「$1」と表示形式を指定できるようです。

さらに、自作のフィルタも作ることができるそうですので、やってみました♪

カスタムフィルタのサンプルコード

“【AngularJS】自作のカスタムフィルタで true、false を変換して表示するコード” の続きを読む

【Monaca】iPad の DatePicker が使えた♪※デザインはイマイチ

Monaca Datepicker プラグインは iPad では使用できないとある。

ポイント

  • Datepickerプラグイン – Monacaドキュメント には「こちらのプラグインはiPhoneでのみ動作し、iPadでは正常に動作しません。」とある。
  • しかし、iOS 8 の iPad で確かめたところ、Datepickerプラグインを使ってネイティブ側の DatePicker コントロール ( 日付設定 ) にアクセスできた
  • ただし、タップした場所ではなく常に左上に表示され、デザイン性には欠けた

“【Monaca】iPad の DatePicker が使えた♪※デザインはイマイチ” の続きを読む

AngularJS の date フィルタで日本語の曜日を表示するサンプル

ポイント

  • 国際化、i18n、多言語対応用 JavaScript ファイルを読み込む。
  • date フィルターの使い方は同じ。

i18n ファイルの導入・入手手順

“AngularJS の date フィルタで日本語の曜日を表示するサンプル” の続きを読む

Material Design Lite に input type=”file” の部品はありませんでした><(2015年8月13日現在)

ポイント

  • Material Design Lite には、サーバにファイルをアップロードする <input type=”file”> タグに対応するパーツは無い。
  • <input type=”file”> を実現するには、アイコンやラベルを使用して対応すること。

この悲しい結論に至るまで。

“Material Design Lite に input type=”file” の部品はありませんでした><(2015年8月13日現在)” の続きを読む

Material Design Lite のアイコンを自分のサーバにダウンロードして使う方法!

Material Design Lite でパッとウェブページを作ったときに学んだことメモ | oki2a24 で MDL を使ったウェブページの作り方を初めてやってみました。

初めてですので GETTING STARTED ページにまずは取り組みました。フレームワークに関するファイル等を自分のサーバに置くやり方を実践いたしました。

JavaScript ファイル、CSS ファイルは自分のサーバに置くことができました。けれども、アイコンだけは CDN にホストされたファイルを使用しておりました。

前回の実践では強引にリンク先をたどってファイル等を入手いたしました。ですけれども次のページにアイコンも自分のサーバにホストする方法がございました。

今回は自分のサーバで MDL のアイコンをホストする方法を記録しますわ♪

“Material Design Lite のアイコンを自分のサーバにダウンロードして使う方法!” の続きを読む

【AngularJS 】ページにバインドした $scope を別のコントローラと共有・同期したい【Monaca 】【Onsen UI】

AngularJS でデータ共有用のファクトリーを生成し、複数のコントローラーに注入することでコントローラー間でデータ同期を取る

【まとめ】AngularJS でデータ共有用のファクトリーを生成し、複数のコントローラーに注入したときのふるまい・ポイント

  • ファクトリーオブジェクトは 1 つのみ存在する。
  • $scope はファクトリーの参照である。
  • ファクトリーまたは $scope のどちらのプロパティの値を変更しても、すべてのコントローラーのデータが即時で同期される
  • ファクトリーまたは $scope のどちらにプロパティを追加しても、すべてのコントローラーのデータが即時で同期される

はじめに

  • Monaca で iOS アプリを作っている
  • 一覧ページと詳細ページがあり、それぞれ別の AngularJS のコントローラーが紐付いている
  • 一覧ページで選択したデータは、移動先の詳細ページで値を更新できる
  • 詳細ページで更新した値は一覧ページの値へも反映されていてほしい

こんなことを実現したいのですけれども、コントローラー間でデータの共有ってできるのかしら?

“【AngularJS 】ページにバインドした $scope を別のコントローラと共有・同期したい【Monaca 】【Onsen UI】” の続きを読む

Material Design Lite でパッとウェブページを作ったときに学んだことメモ

パッと作りたいもの

  • ヘッダーとそこにメニュー
  • フッター
  • レスポンシブ
  • パスを指定するページを作りたい。
  • リストデータをテーブル表示するページを作りたい。
  • コードを書くというよりも、パーツをペーストすることでウェブページを組み立てたい
  • インターネットとの通信はしない。

パッと作るのに使えそうなフレームワーク

“Material Design Lite でパッとウェブページを作ったときに学んだことメモ” の続きを読む

【Mac Boot Camp】Windows8.1 から Windows10 にアップグレードした時の様子

Windows10 へアップグレードする前の環境

  • MacBook Pro
  • Boot Camp
  • Windows8.1

アップグレードした時の様子

ゆっくりとメモや写真などを撮りながら進めました。

  • かかった時間: 約 65 分

“【Mac Boot Camp】Windows8.1 から Windows10 にアップグレードした時の様子” の続きを読む

【ANA】株主優待券を使った航空券予約時の注意事項メモ

往復の場合の注意、ポイント

  • 往路復路の両方とも株主優待券での申込みにする必要がある。
  • スクラッチありなし券の併用は不可能
  • 優待情報入力は予約してから。予約→支払い→優待情報入力の順番となる。

2015年8月9日 現在、ANA の株主優待券には古いスクラッチなしと、新しいスクラッチありの 2 パターンあります。いずれ新しい方のみになっていくと思われますわ。

ネットでのANA株主優待券を使っての買い方 2 パターン

“【ANA】株主優待券を使った航空券予約時の注意事項メモ” の続きを読む

2015年夏、0歳児とのモエレ沼公園ピクニックの思い出、ポイント

モエレ沼公園。アクアプラザ、カナールで水遊びも楽しそう♪
モエレ沼公園。アクアプラザ、カナールで水遊びも楽しそう♪

前日までの計画

  • モエレ沼公園-イサム・ノグチ設計 | 公式サイト
    • 7:00-22:00 → 07:00 開園だが、レンタルやビーチの利用を考えて、09:00 に着くように出発する。→ 09:25の始発で、10:04着、240円だった。
    • 無休
  • 行き方: 公共交通機関。バスを使う。
    • 大通バスセンターから【東6】「モエレ沼公園」行き、を選択する。最初のバスは 09:25 発。
    • 時刻表 – 北海道中央バス
    • ↓選択肢となったバス路線。アクセス | モエレ沼公園-イサム・ノグチ設計 → 「公共交通機関をご利用の場合」タブより。
    •  地下鉄東豊線「環状通東駅」から
      • 【東69】「あいの里教育大駅」/「中沼小学校通」行き
      • 【東79】「中沼小学校通」行き。「モエレ沼公園東口」にて下車
      • 【東61(ビ61)】「中沼小学校通」行き。「モエレ沼公園西口※」にて下車
    • 地下鉄南北線「北34条駅」/東豊線「新道東駅」から
      • 【東76】「中沼小学校通」行き。「モエレ沼公園西口※」にて下車
    • 地下鉄東豊線「環状通東駅」から
      • 【東79】「モエレ沼公園」行き直行便
      • 【ビ68】「モエレ沼公園」行き(サッポロビール博物館発)
    • 大通バスセンター/JR「苗穂駅」から
      • 【東6】「モエレ沼公園」行き
    • 地下鉄南北線「麻生駅」/東豊線「栄町駅」から
      • 【麻26】「モエレ沼公園」行き
  • 持ち物・現地調達について
    • ベビーカーレンタルしたい。 → 車イス、ベビーカーなど | モエレ沼公園-イサム・ノグチ設計
      • ガラスのピラミッド1F総合案内。09:00〜。3台。
      • レンタサイクル。09:00〜。5台。
    • 飲料水。凍らせる。
      • 凍らせるなら、体積が増えることを念頭に。増える量は、約10パーセント
      • 2L ペットボトルのミネラルウォーターを凍らせて持っていく。
      • そのまま凍らせると容器が破裂するため、少し減らしておく。
      • 膨張して 2L とするには、1 : 1.1 = x : 2
        x = 2 / 1.1 = 1.81818182
        よって、1.8 L を凍らせれば良い。
        → 12時間程凍らせたが、完全ではなかった。少し膨らんでいたので、1.6 〜 1.7L に減らして凍らせたほうが良かったかも。
    • 水場で遊びたい。水泳パンツを用意する。 → モエレビーチ | モエレ沼公園-イサム・ノグチ設計
    • カサを持っていく。日傘として使う。→ 忘れてた。風が強かったのでどちらにせよ使えなかったので後悔はしていない。しかし、雨が降ったら対応できないので反省。
    • レジャーシート。→ 忘れた。後悔した。

“2015年夏、0歳児とのモエレ沼公園ピクニックの思い出、ポイント” の続きを読む