開発スタッフがアプリ関連の最新技術やニュースをご紹介します。

NodeJSは、オープンソースのクロスプラットフォームツールで、基本的にブラウザ環境の外でJavaScriptが機能するための実行環境を構築するものです。非同期プログラミングを利用する。

基本的に、NodeJsはJavaScriptの機能の範囲を広げます。NodeJsは、コーディング言語とAPI、他の言語、およびいくつかの外部ライブラリとの統合を支援します。

クロスプラットフォームの互換性

NodeJSは、Windows、Unix、Linux、Mac OS X、モバイルプラットフォームなど、複数のプラットフォームに対応しています。正しいパッケージと一緒に、完全に自立した実行ファイルにバンドルすることができます。

V8エンジン

元々Chrome用に開発されたV8エンジンは、現在ではWebアプリ開発の目的に合うように改良されています。V8エンジンは、JavaScriptをC++の助けを借りて一般的な機械語コーディング言語に翻訳できる、最も優れたエンジンの一つです。したがって、V8エンジンは、最終的にサーバーやすべての機械語ベースの製品に役立つ。

シングルスレッド

Node.jsはシングルスレッドで動作します。これは、複数のクライアントからのリクエストを処理できる「シングルスレッド・イベント・ループ・モデル」アーキテクチャをベースにしています。メインのイベントループはシングルスレッドで実行されますが、バックグラウンドでは、イベントループに対応するためにNode APIの入出力操作は非同期（ノンブロッキング設計）であるため、入出力作業は別々のスレッドで実行されます。イベントループは、node.jsがすべてのノンブロッキング処理を実行できるようにするものです。

非同期

Node.jsはデフォルトで非同期です。つまり、ノンブロッキングで動作します。つまり、クライアントがサーバにリクエストすると、1つのスレッドがそのリクエストを処理し、リクエストがデータベースとのやりとりを伴うかどうかをチェックし、リクエストが処理され、サーバからクライアントに応答が返されます。このスレッドは次のリクエストを処理する準備ができています。

高いスケーラビリティ

Node.jsのアプリケーションは、非同期（ノンブロッキング）方式で動作するため、高いスケーラビリティがあります。Node.jsはシングルスレッドで動作し、1つのリクエストが到着すると、その処理を開始し、次のリクエストを処理できるようになります。また、応答が準備されると、それはクライアントに送り返されます。

ノードパッケージマネージャ(NPM)

おなじみ、Nodeパッケージマネージャは、Node JavaScript実行環境用のパッケージマネージャで、Node.jsインストーラの推奨機能です。これは世界最大のオンラインリポジトリです。また、私たちのプロジェクトのローカル依存関係の管理も行っています。

キャッシング

Node.jsは、キャッシュという点でかなり有利です。Node.jsはモジュールのキャッシュをサポートしています。Node.jsのモジュールが初めてリクエストされたとき、アプリケーションのメモリにキャッシュされます。キャッシュにより、アプリケーションはウェブページをより速くロードし、ユーザーに簡単に応答できるようになるので、コードを再実行する必要はありません。

高速データストリーミング

データが異なるストリームとして移動する場合、その処理には多くの時間が消費されます。そこで、NodeJSは、アップロード中のファイルを同時に処理することで、データ処理にかかる時間を短縮します。そのため、NodeJsは全体的にデータや動画のストリーミング速度を速めることができます。

By Tsuki

WhatFont

WhatFontは、Webページで使用されているフォントを知りたい開発者のための非常に便利なChrome拡張機能です。高速で効果的で、フォントファミリ、サイズ、太さ、色を識別します。

ColorPick Eyedropper

ColorPick Eyedropperは、あらゆるウェブページから色値を選択することができるシンプルなカラーピッカーツールです。

CSSViewer

CSS Viewerは、ウェブ開発者のためのシンプルで非常に効果的なChrome拡張機能です。その名前が示すように、このアドオンは、マウスがポイントされた場所ならどこでも、与えられたページのCSSプロパティを表示します。小さなポップアップウィンドウが表示され、ポイントされている要素を構成するCSSデータが表示されます。

Lorem Ipsum Generator

lorem ipsum ジェネレーターは、その名の通り、デフォルトのテキストを簡単に素早く作成することができます。デフォルトのテキストを簡単かつ迅速に作成する方法を提供します。プレースホルダーとしてデフォルトのテキストが必要な場合、間違いなく、これは手っ取り早い方法です。

Cookie Remover

このエクステンションは、開発者にとっても最高のエクステンションの1つになるでしょう。それは現在のサイトのためのすべてのクッキーを削除することができます。
壊れたクッキーをクリックすると、現在のサイトのすべてのクッキーが削除されます。

Window Resizer

Window Resizerは、ウェブ開発者向けの非常に便利なChrome拡張機能です。シンプルですが、特にレスポンシブデザインやアプリで作業するときに非常に効果的です。Chromeにインストールすると、作業中の画面を一般的な画面サイズの範囲にリサイズしてくれます。

By Tsuki

CSS Design Awards

このサイトは、クリエイティビティ、機能性、ユーザビリティのバランスを特に重視したデザイナーやウェブエージェンシーを表彰するサイトです。

Designspiration

このサイトには、ウェブデザイナーのための素晴らしいデザインがたくさんあります。

Dribbble

Dribbble には、ウェブデザインのほか、アニメーション、ブランディング、イラスト、モバイル、印刷、プロダクトデザイン、タイポグラフィのカテゴリがあります。

 Pinterest

Pinterestでは、Webデザインだけでなく、さまざまな種類のデザインを提供しています。

Instagram

インスタグラムは、あらゆる種類のビジュアルコンテンツを10億人のアクティブユーザーに届けることができるNo.1プラットフォームとなりました。

Codepen

HTML、CSS、JavaScriptのコードエディターで必需品です。”ブラウザにコードを入れる”

CSS NECTAR

CSSnectarでは、トリプルベットされたインスピレーション溢れるウェブサイトを紹介しています。 訪問者は、国、特徴、カテゴリー、カラータグなどのフィルターやタグを使って、サイトを見て回ることができます。

Niice

優れたデザインコンセプトのアイデアを提供するサイトです。

By Tsuki

Packages

パッケージは独立したソースコードで、開発者は composer などのパッケージ管理ツールを使って自分のプロジェクトに取り込むことができます。これらのソースコードは、メインのソースコードとは別にバージョン管理することができ、独自のテストを持ち、独自の依存関係を管理することができます。

多くのプロジェクトがあり、いくつかの機能や特徴が似ている場合、これらの機能をパッケージで実装し始めるとよいでしょう。

Composerは、PHPパッケージの依存関係管理ツールです。各パッケージが必要とするすべての依存関係をベンダディレクトリに 重複させることなく取り込み、パッケージの管理を支援します。

Laravelパッケージの作成

1.新しいLaravelプロジェクトを作成する

Laravelのプロジェクトを作成するために、コマンドラインでComposerを使用します。

composer create-project — prefer-dist laravel/laravel custom-message

2.ファイル構造

新規Laravelプロジェクトのデフォルトフォルダ構造上で、以下のようなファイル構造を作成します。

packages –> custom-simple-package -> custom-message –> src

packages フォルダ内には、ベンダー名 custom-simple-package の後に、パッケージ名 custom-message を記述することに留意してください。src フォルダには、パッケージのすべてのソースコードが格納されます。 

3.パッケージcomposer.json

コマンドで、packages/custom-simple-package/custom-message ディレクトリに移動します。次に、以下のコマンドを実行して、このフォルダをcomposerパッケージとして初期化する必要があります。

composer init

初期化が終わったら、composer.json ファイルを編集します。

{
    "name": "custom-simple-package/custom-message",
    "description": "CustomMessage - A simple Laravel package.",
    "type": "project",
    "license": "MIT",
    "authors": [
        {
            "name": "Mary Blury",
            "email": "maryblury@gmail.com"
        }
    ],
    "minimum-stability": "dev",
    "autoload": {
        "psr-4": {
            "CustomSimplePackage\\CustomMessage\\": "src/"
        }
    },
    "require": {}
}

ここで追加されたもので注意すべきは、autoloadオブジェクトプロパティだけです。これは、与えられた名前空間CustomSimplePackgeのCustomMessageで自動的にあなたのパッケージをロードします。

4.プロジェクトcomposer.json

CustomSimplePackageの行を追加して、パッケージの名前空間をオートロードします。”packages/custom-simple-package/custom-message/src” という行を、プロジェクトの composer.json ファイルの autoload->psr-4 プロパティに追加してください。

"autoload": {
    "psr-4": {
        "App\\": "app/",
        "CustomSimplePackage\\CustomMessage\\": "packages/custom-simple-package/custom-message/src"
    },
    "classmap": [
        "database/seeds",
        "database/factories"
    ]
},

プロジェクトの composer.json ファイルを編集したので、プロジェクトのルートディレクトリで次のコマンドを実行して、再読み込みします。

 composer dump-autoload

5.CustomMessage.php Class

<?php

namespace CustomSimplePackage\CustomMessage;

class CustomMessage
{
    public function greet(String $name)
    {
        return 'Hello ' . $name . '! How are you doing today?';
    }
}

このクラスの名前空間は、プロジェクトの composer.json ファイルで指定した名前空間と同じものを指定して、オートロードされるようにします。

6.パッケージのテスト

これで、シンプルなパッケージがテストできるようになりました。その前に、ルートを作成して、とりあえずこのルートからパッケージのCustomMessageクラスを呼び出してみましょう。

<?php

use CustomSimplePackage\CustomMessage\CustomMessage;

Route::get('/custom-message/{name}', function($name) {
    $cMessage = new CustomMessage();
    return $cMessage->greet($name);
});

CustomMessage クラスをパッケージからインポートするには、use キーワードで最初に名前空間を指定します。そして、プロジェクトのルートファイル内で、そのクラスのインスタンスを作成し、そのメンバ関数を呼び出すことができます。

プロジェクトのルートディレクトリで、以下のコマンドを実行して、開発サーバーを実行します。

php artisan serve
Laravel development server started: <http://127.0.0.1:8000>

ブラウザを起動し、次のURLを入力します。http://127.0.0.1:8000/custom-message/Mary

ブラウザで見ると、

Hi Mary ! How are you doing today?

7. GitLabへのパッケージの公開

まず、GitLabで新しいプロジェクトを作成しましょう。可視性のレベルが public になっていることを確認しましょう。

パッケージディレクトリpackages/custom-simple-package/custom-messageに移動します。以下のコマンドを実行して、git を初期化し、変更をコミットし、チェンジセットにセマンティックバージョニングのタグを付けます。

// packages/custom-simple-package/custom-message
$ git init
$ git checkout -b master
$ git add .
$ git commit -m "Initial commit"
$ git tag 1.0.0

ローカルのソースコードを新しく作成したGitLabプロジェクトにプッシュするために、次のコマンドを実行します。

// packages/custom-simple-package/custom-message
$ git remote add origin https://gitlab.com/tsuki/custom-message.git
$ git push -u origin --all
$ git push -u origin --tags

これで、準備は万端です。

8.Laravelパッケージのインポート

これで、Composerを使ってGitLabサーバーから新しいLaravelプロジェクトにパッケージをインポートすることができます。ローカルマシンで別の Laravel プロジェクトを作成します。

新しいプロジェクトの composer.json ファイルを編集して、このパッケージを require するようにします。また、GitLab のリポジトリを指定して、Composer がデフォルトの packagist リポジトリ以外にパッケージを取得する場所をわかるようにします。

以下のコマンドを実行し、プロジェクトの composer.json ファイルに加えた変更を読み込み、パッケージをインストールします。

composer update

これで、プロジェクトの vendor ディレクトリにパッケージが見つかるはずです。 

By Tsuki

NodeJSは、サーバーサイドのWebアプリケーションを開発するためのオープンソースでクロスプラットフォームな実行環境です。今回は、NodeJSをNode Package Module（NPM）を使って、ステップバイステップで基本的な実装と解説を学びます。

NodeJSは、イベント駆動型のノンブロッキングI/Oモデルを採用しているため、軽量で効率的です。

NodeJSとNPMのインストールは、NodeJSの公式ホームページから入手できるインストーラーパッケージを使用することで簡単に行うことができます。

Nodejs

• NodeJS WebSiteからインストーラーをダウンロードします。
• インストーラーを実行します。
• インストーラーの手順に従って、使用許諾契約に同意し、「次へ」ボタンをクリックします。
• システム/マシンを再起動します。

以下のコマンドで、nodejsのバージョンを確認します。

node --version

コマンドでnpmのバージョンをテストします。

npm --version

test.js ファイルを作成します。

/*test.js file*/
console.log("Node is working");

test.jsは、コマンドプロンプトからNodeコマンド > node test.jsで実行することができます。これでインストールは終了です。

Node Package Module

NPMは、JavaScript開発者が効率的に依存関係をロードするのを助けるパッケージモジュールです。依存関係をロードするには、コマンドプロンプトでコマンドを実行する必要があります。

npm install

このコマンドは、ルートディレクトリにあるpackage.jsonという名前のjsonファイルを見つけて、そのファイルに定義されているすべての依存関係をインストールするものです。

Package.json

Package.jsonはこんな感じです。

{
  "name": "ApplicationName",
  "version": "0.0.1",
  "description": "Application Description",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/npm/npm.git"
  },
  "dependencies": {
    "express": "~3.0.1",
    "angular": "latest",
    "angular-ui-router": "~0.2.11",
  }
}

package.jsonで最も重要なのは、名前とバージョンです。これらは実際に必須であり、これがないとパッケージはインストールされません。

Repository

{
  "repository": {
    "type": "git",
    "url": "https://github.com/npm/npm.git"
  }
}

コードが存在する場所を指定します。もしgitリポジトリがGitHubでない場合は、npm docsコマンドで見つけることができます。

Scripts

{
 "scripts": {
    "start": "node server.js"
  }
}

NPMは、npm install、npm start、npm stopなど、便利なスクリプトを多数提供しています。

パッケージのルートにserver.jsファイルがある場合、npmはデフォルトでnode server.jsを開始コマンドとして使用します。

Dependencies

{
   "dependencies": {
     "express": "~3.0.1",
     "angular":"latest",
     "angular-ui-router": "~0.2.11",
  }
}

依存関係は、パッケージ名とバージョン範囲を対応させたシンプルなオブジェクトで指定します。

Example:

/*server.js*/

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer(function(req, res) {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

server.listen(port, hostname, function() {
  console.log('Server running at http://'+ hostname + ':' + port + '/');
});

require(‘http’) を使って http サーバを作成し、それを http という変数に渡しています。ここでは、localHost（127.0.0.1）とポート番号3000を使用し、これをそれぞれ変数hostnameとportに代入しています。createServerメソッドを使用して、httpサーバーを作成します。

次に、server.jsファイルをnodeでコマンドを使って実行します。

node server

ブラウザを開き、URL http://127.0.0.1:3000/ を入力してください。ブラウザが画面にHello Worldのメッセージを表示します。

これで、サンプルのnodejsスクリプトを作成し、正常に実行できるようになりました。

By Tsuki