Web Service
- 2022年04月28日
- Web Service
Nodejsの特徴
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
tsuki at 2022年04月28日 10:00:00
- 2022年04月21日
- Web Service
ウェブ開発者のためのベストブラウザ拡張機能
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
tsuki at 2022年04月21日 10:00:00
- 2022年04月14日
- Web Service
ウェブデザイナーのためのインスピレーションを与えるベストサイト
CSS Design Awards
このサイトは、クリエイティビティ、機能性、ユーザビリティのバランスを特に重視したデザイナーやウェブエージェンシーを表彰するサイトです。
Designspiration
このサイトには、ウェブデザイナーのための素晴らしいデザインがたくさんあります。
Dribbble
Dribbble には、ウェブデザインのほか、アニメーション、ブランディング、イラスト、モバイル、印刷、プロダクトデザイン、タイポグラフィのカテゴリがあります。
Pinterestでは、Webデザインだけでなく、さまざまな種類のデザインを提供しています。
インスタグラムは、あらゆる種類のビジュアルコンテンツを10億人のアクティブユーザーに届けることができるNo.1プラットフォームとなりました。
Codepen
HTML、CSS、JavaScriptのコードエディターで必需品です。”ブラウザにコードを入れる”
CSS NECTAR
CSSnectarでは、トリプルベットされたインスピレーション溢れるウェブサイトを紹介しています。 訪問者は、国、特徴、カテゴリー、カラータグなどのフィルターやタグを使って、サイトを見て回ることができます。
Niice
優れたデザインコンセプトのアイデアを提供するサイトです。
By Tsuki
tsuki at 2022年04月14日 10:00:00
- 2022年03月31日
- Web Service
Laravelのカスタムパッケージを構築する方法
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
tsuki at 2022年03月31日 10:00:00
- 2022年03月24日
- Web Service
Nodejsの始め方
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
tsuki at 2022年03月24日 10:00:00