備忘録 – AngularJsで改行して表示する

本日の備忘録

 

Onsen UI でスマートフォンアプリを開発中です。今日調べたことでも書こうと思います。

AngularJSで {{ hoge }} で値を埋め込んでも、文字列中の改行コードは認識されないようです。

改行するためには、 \n を <br />に変換して、サニタイズしてバインドする必要があります。

 

html
<p ng-bind-html=”hoge | replaceNewLine”></p>
replaceNewLine
angular.module(“app”).filter(‘replaceNewLine’, function($sce){
  return function (input, exp) {
    return $sce.trustAsHtml(input.replace(/\n|\r/g, ‘<br>’));
  };
});

参考サイト様 – GitHubGist – 改行コードを<br>に変換するAngularJS

 

実際の実装はサーバ側で改行コード等の変換処理を行って、アプリ側ではサニタイズのみ行いました。

備忘録はブログのネタとしては良いですね。いつもブログのネタ探しに小一時間使ってしまっているので

時短になりそうです。今後も調べたことを書きつづろうと思います。

 

では。

恐ろしいプログラミング言語

こんにちわ。ぼん尻です。

 

fossBytesに掲載された記事

Most Loved Programming Languages Of 2016 — Rust, Swift, Go」で愛されるプログラミング言語と

恐れられている言語のランキングが発表されました。

 

順位は以下のようになっています。

 

愛されてるプログラミング言語・技術 ランキング

  1. Rust(79.1%)
  2. Swift(72.1%)
  3. F#(70.7%)
  4. Scala(69.4%)
  5. Go(68.7%)

恐れられているプログラミング言語・技術 ランキング

  1. Visual Basic(79.5%)
  2. WordPress(74.3%)
  3. Matlab(72.8%)
  4. Sharepoint(72.1%)
  5. CoffeeScript(71.0%)

 

愛されているプログラミング言語はRustでした。

恥ずかしながら、存在を始めて知りました。勉強不足ですね。

Mozillaが開発しており、2015年5月16日にRust1.0がリリースされています。

関数型プログラミング、並列アクターモデル、手続き型プログラミング、オブジェクト指向プログラミングを

サポートしているようです。

特徴として、安全性、メモリ管理、並列性に優れているそうです。

 

最下位はVisualStudioだそうです。

理由としては、簡単に組める分、可読性の低い適当なソースでも動いてしまうのが

メンテする際に厄介になっているのが原因のようです。

 

やはり、メンテがしやすいように、他人が分かるようにソースを書かなくてはいけませんね。

気をつけなければ。

 

 

 

 

 

 

【カテゴリ】プログラミング

第11回 Composite

こんにちわ。ぼんじりです。

 

マインツ武藤さんが2点を取る活躍をしましたね。試合を見るに今後も期待せざるを得ないです。

継続的に活躍できれば良いですね。

 

今回はお久しぶりのデザインパターンの11回目で、Compositeパターンをまとめてみたいと思います。

 

Compositeパターンとは・・・

容器と中身を同一視し、再帰的な構造を作るパターンである。

 

PCのファイルシステムである「ディレクトリ」のようなものらしいです。

フォルダの中には、フォルダかファイルが存在しています。それらは「ディレクトリエントリ」として扱われ、同一視して処理を行っていきます。

 

この処理を実現するためのデザインパターンがCompositeパターンになるようです。

 

<例>

抽象クラス   :Entryクラス

抽象メソッド  :getName、getSize、printList、add

 

実装クラス   :Fileクラス(Entryクラスのサブクラス)

実装メソッド  :getName、getSize、printList

 

実装クラス   :Directoryクラス(Entryクラスのサブクラス)

実装メソッド  :getName、getSize、printList、add

 

このような構造にすることによって、FileであってもDirectoryであってもEntryとして扱うことができます。

ただし、addメソッドはDirectoryにFileを追加するメソッドなので、Fileクラスでは実装しません。

 

その場合、Fileクラスではaddに実装せずエラーとして投げる方法やなにも処理を実装しないなどの手法をとります。

 

箇条書きの項目やマクロコマンドを作るときの再帰的な構造を実現できるようです。

 

Compositeパターンは特に難しくないのですが、採用する際に正しく選択できるかが難しそうですね。

ディレクトリの構造以外に何か使いどころはあるのでしょうか。

 

では。

【カテゴリ】プログラミング

第10回Strategy

こんにちは。ぼんじりです。

 

雨ですね。もうすぐ梅雨なんですかね。

嫌ですね。もともと雨は嫌いではないんですが、傘がめんどくさいですよね。

 

今回は、デザインパターンのまとめをやります。

でも、内容が薄くなりそうです。手抜きじゃないです。

 

今回はStragyパターンです。

Stragyとは戦略という意味で、プログラミングではアルゴリズムと考えて良いです。

プログラム中枢となる、アルゴリズムを切り替えができるように実装した方が良いですよ、ってお話です。

 

実装方法は色々あると思いますが、参考書の実装方法を例にサッカーのシュミレーションプログラムを

考えてみました。

 

まず、「戦術」インターフェイスを作ります。

抽象メソッドとして、「攻撃」メソッドと「守備」メソッドを作ります。

 

次に、「戦術」インターフェイスの具象メソッドを実装するクラスである

アルゴリズムクラスを二つ用意します。

ここでは、名前の区別だけつけ「戦術A」と「戦術B」とします。

 

「戦術A」の「攻撃」メソッドはドリブル中心で攻める、「守備」メソッドにはゾーンディフェンスで守ると規定します。

「戦術A」の「攻撃」メソッドはパスをつないで攻める、「守備」メソッドにはゲーゲンプレスで守ると規定します。

 

今度は、「戦術」を扱う「チーム」クラスを作成します。

「チーム」クラスはインスタンスを作成するときに「戦術」インターフェイスを必要とします。

 

「チーム」クラスのメソッドとして「攻撃時の作戦」と「守備時の作戦」を作成します。

「攻撃時の作戦」メソッドでは、インスタンス作成時に得た「戦略」の「攻撃」メソッドを呼び出します。

「攻撃時の作戦」メソッドでは、インスタンス作成時に得た「戦略」の「守備」メソッドを呼び出します。

 

これで準備は完了。

メインメソッドで、チーム1は戦略Aを引数にインスタンスを作成、チーム2は戦略Bを引数にインスタンスを作成。

すると、チーム1は「攻撃時の作戦」はドリブル中心で攻め、チーム2は「守備時の作戦」はゾーンディフェンスで守ります。

すると、チーム2は「攻撃時の作戦」はパスをつないで攻め、チーム2は「守備時の作戦」はゲーゲンプレスで守ります。

後は、戦略ごとの相性や、得点率、防御率のアルゴリズムさえあれば簡単なサッカーシュミレーションゲームが作れそうですね。

今の例では、戦略が2つしかありませんでしたが、戦略がもっと増えるとStragyデザインのありがたみがわかるように思います。

「戦略」インターフェイスを実装するクラスを作りさえすれば、「チーム」を作成するときに簡単に戦略が切り替えることができます。

 

最近デザインパターンのまとめが言葉遊びになってきてるような気がします。

実際の開発で活かせるようにしないと意味ないですよね。理解は深まるとは思うのですがどう進めていけばいいのでしょうか。

 

では。

【カテゴリ】プログラミング

第8回Bridge

こんにちわ。ぼんじりです。

 

今って花粉が多いのでしょうか。数日鼻水が泉のように湧き出ており苦労してます。

鼻炎の薬を飲んだのですが、体調があまり優れません。

 

元々アレルギー性鼻炎なのでティッシュはお友達なのですが、

ここまでひどいと嫌になりますね。

 

 

今日は久しぶりにデザインパターンについてメモ書きします。

かなり期間があいてしまったので軽めなデザインパターンのBridgeです。

 

Bridgeデザインパターンは簡単にいうと、サブクラスを作るときは「機能のクラス階層」と「実装のクラス階層」を

分けましょうよというお話。

 

「機能のクラス階層」とはスーパークラスを継承して、新たに独自の機能を追加したい場合に行う実装の階層構造で、

「実装のクラス階層」とはインターフェイスを規定しているスーパークラスを継承して、具象メソッドを実装する際の階層構造のことです。

 

■動物

   □哺乳類

      ●犬

        ○柴犬

        ○ダックスフンド

        ○コーギー

      ●猫

   □鳥類

      ●鳩

      ●鴨

   □魚類

      ●マグロ

      ●さば

 

このような図となり、「動物」→「哺乳類」→「犬」→「柴犬」の関係が”機能のクラス階層”、

「哺乳類」→「鳥類」→「魚類」の関係が”実装のクラス階層”と表現することができます。

 

Bridgeパターンは「機能のクラス階層」と「実装のクラス階層」を分けた方がいいですよというお話です。

上の例ではありません。

 

Bridgeパターンを例えてみると

(何か)”を表示する” という

(何か)というスーパークラスと

“を表示する”というスーパークラスを組み合わせて使用するプログラムがあったとします。

 

(何か)が実装されるクラスで、”を表示する”が機能が追加されるクラスです。

それぞれのクラスに実装や機能追加の様子を図に表すと下のようになります。

 

「機能のクラス階層」

■ “を表示する”

  □ “を数回表示する”

     ◆ “を数回表示すると思いきや消える”

 

「実装のクラス階層」

●(何か)

  ○(数字)

  ○(文字列)

  ○(記号)

 

“~する”の機能が書かれたクラスは(何か)であれば実行することができるので、

(数字)”を表示”したり、(記号)”を数回表示”、(文字列)”を数回表示すると思いきや消え”たりすることができるように

なりました。

”実装”と”機能”が分かれていることによって、様々な機能を簡単に拡張できるようになりますよーというデザインパターンが

Bridgeで、(何か)と”を表示する”と言う関係が2つの階層の間を結ぶ橋になってるんですよーってことのようです。

 

今回は比較的簡単でしたね。しかし、久しぶりだったので理解して自分の言葉にするのに子一時間かかってました。

月に一回は書いていこうと思います。では。

【カテゴリ】プログラミング

プロフィール

愛知県名古屋市にあるジャスウィルで働く社員です。

ジャスウィルは大学事業に特化したシステムを提案しています。『大学向け事務・教務統合パッケージ―TriR Campus』を開発しています。


Facebookページでは、イベントや普段の社員の様子を公開中♪
ぜひご覧ください☆

過去一年の月別記事 全て表示