ボム君.com

Masa's blog

今まで学んできたITスキルを主に。

ターミナルコマンド mkdir

mkdir

説明:ディレクトリを作成
書式:mkdir [オプション] ディレクトリの名前

オプション

1)-m モードを設定する。デフォルトでは、read, write, execute となっている。

mkdir -m 777 new_dir

2)-p: 指定されていたパスに存在しないものはすべて作成される。指定したディレクトリをサブディレクトリごと作成する。

mkdir new_dir/new_dir/new_dir/new_dir/sample.txt

3)-v: ディレクトリが作成されるたびに名前が出力される。

ターミナルコマンド ln

ln

説明:ファイルやディレクトリのリンクを作成
書式:ln [オプション] 元のファイルのパス リンクファイルのパス

リンクとは、コピーと違って、ただリンク先を表示するだけ。
二種類のリンクがある。シンボリックとハードリンク。

シンボリック:そのファイルまたはディレクトリの詳細/内容などはリンクでは見れない。

ハードリンク:そのファイルまたはディレクトリの詳細/内容などはリンクでは見れる。

オプション

1)-b シンボリックに上書きがされる場合は元のファイル/ディレクトリのバックアップが作成される
2)-d  ハードリンクが作成される。スーパーユーザーだけ可。
3)-i  上書きの確認がされる
4)-s シンボリックのリンクが作成される。よく使うやつ。
5)-v リンク作成前に、ファイル/ディレクトリの名前を出力する。

ターミナルコマンド mv

mv

説明:ファイルやディレクトリを移動する
書式:mv 元のファイルのパス 新たなファイルのパス

1)普通に移動する場合。
新しいファイルを新しいパスの元に作られる。

mv Downloads/old.txt Desktop/new.txt

2)オプション

  • b: 上書きや削除されるファイルが存在する場合、バックアップファイルが作成される。
  • f: 上書きの確認せず、そのまま実行される。
  • v: 移動される前に名前を表示。

ターミナルコマンド CP

cp

説明:ファイルをコピー
書式:cp [オプション] コピー元のファオルのパス コピー先のファイルのパス

1)あるパスから現在いる、カレントディレクトリにコピーしたい場合は ‘.’ ピリオドだけでいい。

cp ~/Downloads/sample.txt . 

2)あるディレクトリ内のすべての画像(img)ファイルをカレントディレクトリにコピーしたい場合は’ * ‘スター指定。

cp ~/Downloads/*.jpg . 

3)あるディレクトリ丸ごとコピーしたい場合は オプションに「-r」を指定。
もし指定されたディレクトリが存在しない場合は、勝手にその名のフォルダーが作成される。

cp -r ~/Downloads/  ~/Desktop  

4)上書きさせるかどうかを一旦確認がしたい場合は オプションに「-i」を指定。
Overwrite [directory]? (Y/n [n]) と出力される。

cp -ir ~/Downloads/  ~/Desktop  

MVC (Model View Controller モデル・ビュー・コントローラ)とは

プログラミングの上級者になると頻繁にこのMVCという単語を使うことになると思う。

じゃー、一体このMVCとは何なのかを簡単にここでまとめたのでどうぞ参考までに。

MVCとは

MVCは、簡単にいうとアプリケーションを作る時に必要になってくるある一種の設計ノウハウみたいなものです。

一つアプリケーションにはたくさんの機能が入っていて、例えば:

  1. サーバーに接続する
  2. ユーザーインターフェイスを表示する
  3. ユーザーのデータを保存もしくはサーバーから取り出す
  4. たくさんのインターフェイスを所有する
  5. 管理人のページがある

などがありこれらを一つ一つこなしていても結構な労力と時間が費やされるため、非効率的です。

よってこのMVCが役に立つっていうことです。
Wikipediaではこう説明されています。

MVC(Model View Controller モデル・ビュー・コントローラ)は、ユーザーインタフェースをもつアプリケーションソフトウェアを実装するためのデザインパターンである。
アプリケーションソフトウェアの内部データを、ユーザーが直接参照・編集する情報から分離する。そのためにアプリケーションソフトウェアを以下の3つの部分に分割する。
model: アプリケーションデータ、ビジネスルール、ロジック、関数
view: グラフや図などの任意の情報表現
controller: 入力を受け取りmodelとviewへの命令に変換する

三つのプログラム

MVCには、Model(モデル)View(ビュー)、とController(コントローラー)のこの三つのプログラムがあります

どれも重要で役割はそれぞれ違います。
ですので、それぞれの役割をちゃんと理解して、覚えてください。
しかし、冷静に考えれば、いいアプリケーションを作るために、ただこの三つのことを把握していれば作れるってわけですから、そんなに苦ではありませんね。

モデル(Model)

  1. データを管理するところです。主にデータベースを設計、管理、変更などをする
  2. データの内容を送受信
  3. ユーザーに通知、告知などやデータに対する制限などもここで行える

ビュー(View)

  1. ユーザーのインターフェイス、表示の仕方、HTML、JavaScriptなどをここで扱う
  2. モデルから受け取ったデータを表示
  3. HTMLテンプレートを使う
  4. CSSなどに敏感
  5. JavaScriptを使う
  6. ユーザーのブラウザーに表示する

簡単にいっちゃえば、HTMLなど、ユーザーのブラウザーにどのように表示させるかをここで決めています。

コントローラー(Controller)

  1. 司令塔みたいなもの
  2. ビューとモデルに仕事を与える
  3. ビューから、ユーザーから受け取ったデータ(内容)をここで受け取り、モデルに保存させる。
  4. MVCの中で一番忙しいプログラム
  5. ビューに表示させる内容もここで変更可
  6. ビューとモデルがいなくてもこれさえあればMVCは成立する
  7. コントローラーにバグがあったらもう全ておしまい。ビューとモデルだけでは処理できない。
  8. モデルはデータを直説ビューに渡してもいいが、コントローラーに一旦データを処理してもらう方がオススメ。

MVCの構造/まとめ

f:id:masa25michi:20170502030112p:plain

JQury:自身のサーバー上、もしくはローカルのフォルダー内にある全てのイメージをHTMLにロードする(読み込む)

ロードする前に。。。

JQueryを使って下記のコードを使えば一瞬でロードできる。
ただその前にJQueryをインポートする。方法は二つ。

1) グーグルがサーバー上で提供しているJQueryを使う

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

上記のコードをhead内に埋め込めばOK.


2) 自身のサーバー上、もしくは、ローカルフォルダーにJQueryを保存する。
jquery.com

ダウンロードを終えた後、

<script src="あなたのサーバーURL/jquery.min.js"></script>

同じく、上記のコードをhead内に埋め込めばOK.

画像をサーバーから読み込む

var folder = "images/";

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
                $("body").append( "<img src='"+ folder + val +"'>" );
            } 
        });
    }
});

何をしているのかというと、まずJQueryAJAXメソッドを使ってサーバーにファルダーを送ってもらうようにリクエストする。
その後、サーバーは全ての画像ファイルのリンク先を返してくる。あとはそれら一つ一つのリンク先を解読し、htmlに画像をアペンド(追加)するだけ。

**注意**
サーバーがない場合でこのAJAXメソッドを行うと、

XMLHttpRequest cannot load javascript:;. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

という意味不のエラーが発生するので下記の方法をオススメする。

画像をローカルフォルダーから読み込む

セキュリティーの問題により、ある一つのフォルダー内の全ての画像を入手、または取り出し、ページにロードするなどはできません。よって二つ方法があります。

1)ファイル名を1から順に設定し、あとはJavaScript内でLoopしてページにロードする。
画像ファイル名が"back1","back2","back3"が保存されているとする。

<body>
      <script type="text/javascript">
          var imageFolder = 'asset/img/back' ;
          for(var i=1;i<=3;i++){
            var html = "<img src = '"+imageFolder+i+".jpg' width=100 height = 100 >";
            $('body').append(html);
          }
      </script>
</body>

2)Form Inputでユーザーにファイル(複数可)選択してもらい、HTML5のFilereader機能で、全て読み込む。

<input type="file" id="fileinput" multiple />
<script type="text/javascript">
  function readMultipleFiles(evt) {
    //Retrieve all the files from the FileList object
    var files = evt.target.files; 

    if (files) {
        for (var i=0, f; f=files[i]; i++) {
              var r = new FileReader();
            r.onload = (function(f) {
                return function(e) {
                    var contents = e.target.result;
                    alert( "Got the file.n" 
                          +"name: " + f.name + "n"
                          +"type: " + f.type + "n"
                          +"size: " + f.size + " bytesn"
                          + "starts with: " + contents.substr(1, contents.indexOf("n"))
                    ); 
                };
            })(f);

            r.readAsText(f);
        }   
    } else {
          alert("Failed to load files"); 
    }
  }

  document.getElementById('fileinput').addEventListener('change', readMultipleFiles, false);
</script>

Programming: Parallel VS Concurrency

In functional programming, such as Erlang and Haskell could be better suited for answering question of what are the differences between Parallel and Concurrency programming.

According to "Parallel and Concurrent Programming in Haskell",

In many fields, the words parallel and concurrent are synonyms; not so in programming, where they are used to describe fundamentally different concepts.

A parallel program is one that uses a multiplicity of computational hardware (e.g. multiple processor cores) in order to perform computation more quickly. Different parts of the computation are delegated to different processors that execute at the same time (in parallel), so that results may be delivered earlier than if the computation had been performed sequentially.

In contrast, concurrency is a program-structuring technique in which there are multiple threads of control. Notionally the threads of control execute "at the same time"; that is, the user sees their effects interleaved. Whether they actually execute at the same time or not is an implementation detail; a concurrent program can execute on a single processor through interleaved execution, or on multiple physical processors.

Concurrency:

  • It only has one CPU
  • It shared both memory and processing time
  • It has multiple threads programming to handle each task by single CPU

Parallelism:

  • It is truly parallel
  • It has multiple CPUs
  • It does not share memory and processing time

Benefits of Parallelism compared with Concurrency:

  • Better performance
  • Scalability
  • Fault Tolerance
  • Clarity