知ったかぶりエンジニアの開発ブログ

~学んだことをアウトプット~

【Windows版】Postmanのインストール方法から使い方まで

はじめに

「Postman」はAPIをリクエストして取得結果の確認ができるWeb APIのテストクライアントツールです。
あまり聞き馴染みのないソフトかもしれませんが、Web APIを頻繁に使用する私としてはめちゃくちゃ便利なソフトです。
Webアプリケーションの開発にはAPIは必ずと言っていいほど使わなくてはならない部分だと思います。 その連携時に「Postman」を使ってレスポンスの確認をすれば開発効率が上がること間違いありません。
では、前置きはこの辺にして、早速ダウンロードからインストールをしていこうと思います。 手順としてはwindows版で書きますが、おそらくmac版もそこまで変わらないと思います(たぶんね)

ダウンロード

以下、公式サイトでダウンロード可能です。
インストールする端末のOSとbit数にあったものをダウンロードしてください。 www.postman.com

インストール

ダウンロードしたファイルを起動して下さい。
読み込みが始まります。
f:id:toxapex0748:20210815175326p:plain

アカウントを持っていない場合はここで新規作成できます。
f:id:toxapex0748:20210815175400p:plain

名前と使用目的を設定します。
f:id:toxapex0748:20210815175557p:plain

Postmanは複数人で共同作業で使うこともできます。
その場合はTeamの情報を設定してください。
個人で使う場合は「Continue without a Team」を選択してください。
私は個人で使う方を選択しました。
f:id:toxapex0748:20210815175722p:plain

ここまでの入力でPostmanが起動します。
f:id:toxapex0748:20210815175950p:plain

次は使い方です。

使い方

では、実際にAPIリクエストを投げてみましょう。

「WorkSpaces」のタブから「My WorkSpace」を選択します。
f:id:toxapex0748:20210815180029p:plain

以下の「My WorkSpace」上でAPIを設定できます。
「My WorkSpace」の右にある「New」を押してください。
f:id:toxapex0748:20210815180419p:plain

「HTTP Request」を選択してください。
f:id:toxapex0748:20210815180454p:plain

タブが追加されるので、そこにリクエスト情報を入力します。
f:id:toxapex0748:20210815180727p:plain

今回はサンプルとして、無料で使える郵便番号検索APIを使ってみようと思います。
zipcloud.ibsnet.co.jp

GETリクエストでURL部分に「https://zipcloud.ibsnet.co.jp/api/search」を入力してください。
そしてParamsの「KEY」 に「zipcode」と入力して「VALUE」に検索したい郵便番号を入力します。
f:id:toxapex0748:20210815180823p:plain

右の「Send」を押すとAPIが実行されレスポンス結果が表示されます。
ステータスコードが表示されるので(今回は200)エラー時に分かりやすいです。
f:id:toxapex0748:20210815181257p:plain

APIのリクエスト方法はGET以外にもPOSTやPUTのリクエストも可能です。
f:id:toxapex0748:20210815181824p:plain

また、「authorization」で認証設定や、「Headers」でリクエストヘッダーの設定も可能です。
f:id:toxapex0748:20210815181556p:plain

以上がインストール方法から使い方までを紹介です。 今後の開発でAPI利用時などに使ってください!

では、また次回。

良かったらブログの読者になってもらえると嬉しいです(^^♪

【Windows版】Hyperでポケモンのターミナルを使ってみよう

はじめに

僕はポケモンが大好きです。
名前のドヒドは害悪ポケモンで有名は「ドヒドイデ」から拝借したほどです。
ゲームとしても世代である初代の「赤緑」から最新の「ソードシールド」まで全てで遊び、 「ソードシールド」のオンラインランクマッチも「マスターボール級」を長い間キープしています。
ちなみにパーティードヒドイデハピナスミミッキュを使った害悪パーティーですw
まったくわからない人ごめんなさい。
本題です

そんな大好きなポケモンのターミナルを見つけたので紹介していこうと思います。
画面としてはこんな感じです。
背景にミュウが設定されます。可愛い

f:id:toxapex0748:20210809204104p:plain
ミュウ

作りとしてはターミナルアプリの「Hyper」というソフトに「Hyper-Pokemon」というテーマを設定するイメージです。

インストール

まずは「Hyper」をインストールしましょう。
以下のリンクから可能です。
hyper.is

「Download Hyper」をクリックしてダウンロードできます f:id:toxapex0748:20210809204314p:plain

ダウンロードした「Hyper-Setup-3.1.2.exe」をクリックしてインストールを始めます。

インストールフォルダを選択します。
デフォルトのままでも問題なさそうです。
f:id:toxapex0748:20210809204357p:plain

以下の画面まで来ればインストール完了です。
f:id:toxapex0748:20210809204554p:plain

ちなみに、この状態で「Hyper」を開いてもデフォルトの真っ黒い状態です。
殺風景な画面だ。。
f:id:toxapex0748:20210809204702p:plain

では、ポケモンのテーマを設定していきましょう

設定

まずは設定ファイルを編集します。
設定ファイルは%USERPROFILE%\AppData\Roaming\Hyper\.hyper.jsにあります

config: に以下を追記します

        pokemon: [好きなポケモン名を設定],
        unibody: 'false',
        poketab: 'true',

ポケモン名は全部小文字の英語名で設定します。
第一世代しか対応してないっぽいです。
(ドヒドイデ使えなかった。。)

参考に以下から英語名を探してみてください
wiki.xn--rckteqa2e.com

私は以下のように設定しました。
これでヒトカゲフシギダネゼニガメピカチュウ、ミュウがランダムに表示されます
pokemon: ['charmander','bulbasaur','squirtle','pikachu','mew'],

あと
plugins: [],
plugins: ['hyper-pokemon'],にします。

これで設定完了です。

「Hyper」を開くとこんな感じにターミナルが出てきます!
可愛い☺
f:id:toxapex0748:20210809205904p:plain

ちなみに別タブを開くとアクティブなタブにポケモンのアイコンが設定されます
可愛い☺
f:id:toxapex0748:20210809205939p:plain

最後に

以上、珍しいターミナルの紹介でした。
これを使って、ちょっとでも気分を上げて開発しようと思います。

使ってもらえると嬉しいです。

【JavaScriptライブラリ】リズムによって要素を踊らせる"Rythm.js"

はじめに

ちょっと面白いJavaScriptのライブラリを発見したので使い方を紹介します。
以下のRythm.jsを使うと画像、文字、ボタンなどが
ページに流れる音楽のリズムに合わせて動かすことができます。
okazari.github.io

音楽のテンポによって動きが変わるので色々なリズムの音楽を試すと面白いです。

使い方

とても簡単で、githubからRythm.jsを取得します
github.com

取得したjsファイルを読み込ます。
<script type="text/javascript" src="./rythm.js"></script>

音楽を鳴らすタイミングで以下の処理を記載します。

  var rythm = new Rythm();
  rythm.setMusic("鳴らせる音楽を指定");
  rythm.start();

動かしたい画像などの要素に対して以下のclassを設定します。
class="rythm-bass"

動きのテンポを変更したい場合はrythm-mediumrythm-highで変えられます。

またaddRythmの関数を使うことで独自にリズムを変更することができます。

以上で完了です。
面白いJavaScriptのライブラリですので是非遊んでみてください。

Web開発をする際にインストールしておくと便利なソフトウェア9選

はじめに

開発をおこなう際に使用しているソフトウェアを紹介します。
どれも有名なものばかりですが、 これからプログラミングを始める方や
勉強中で便利なソフトを探している方の参考になれば幸いです。

前提

環境設定の話も含めると長くなってしまうので、
ローカル環境は既にapachephpの動作環境が構築されている。という前提で進めます。
また、開発環境のOSはwindows10です。

1.エディタ

プログラミングをする際には必ずお気に入りの
エディタを見つけておいた方が良いです。
私は「Visual Studio Code」を使用していますが、「Atom」も使いやすいです。
また、メモ帳代わりに「サクラエディタ」も使います。

おすすめエディタは、以前の記事でも紹介しているので是非ご参照ください。 dohidoi.hatenablog.com

2.SQLクライアントソフト

DBに接続する際に使用するSQLクライアントですが、
「DBeaver」を使用しています。
使用するDBがMySQLPostgresqlOracleと3つもあるため、
全てに接続できるこのソフトを使用していますが、
根強い人気のある「A5:SQL Mk-2」 も使いやすいです。 dbeaver.io

3.ターミナルソフト

「GitBash」を使用しています。
ソース管理がGitなので初期インストール時に一緒に入れて
そのまま使ってる感じです。
Gitの操作をする分には使いやすいです。

4.SSHクライアント

サーバに対してファイルのアップやダウンロードで使用します。
私は「RLogin」を使用していますが、
GUIで操作したい場合は「WinSCP」を使用する事もあります。
github.com

5.ブラウザ

Webページの開発をする上で絶対必要なブラウザ。
私の場合はjavascriptデバッグがしやすいので 「Google Chrome」 を使用しています。
(だいたいみんなそうかな)
便利な拡張機能も幾つか入れているので、そのうち紹介します。
www.google.com

6.WinMerge

ファイル比較をおこなうソフトです(diffが取れる)
CSVやTSVのファイルのやり取りがあるので、差分チェックのために使用しています。
winmergejp.bitbucket.io

7.XMind

マインドマップツールです
考えたロジックの整理用に使用します。
設計の後に自分でプログラミングする際は、
ブログラム設計書として使えるし、
誰かに依頼するときも、これを準備しておくと話がスムーズに進みます。
jp.xmind.net

8.ScreenToGif

画面をGIFアニメーションとして保存できるレコーダーのソフトです。
Web画面の動作イメージを使えるときに使用します。
また、動作テスト時のエビデンスとしても使用できます。
www.screentogif.com

9.Postman

WebAPIのテスト用ツールです。
外部APIを使用することが多いため、
実際にブログラムに組み込む前に
このツールを使って取得データの確認をします。
www.postman.com

以上、便利なソフトウェアの紹介でした。
全て無料のソフト(一部、有料プランもあるけど)なので
開発する際に参考にしてもらえると嬉しいです。

ではまた次回~

【PostgreSQL】XMLとJSON型の操作について

はじめに

オープンソースRDBMSである「PostgreSQL」を使って、
XML型とJSON型の抽出と検索の方法です。

バージョンはwindows版の13.3を入れました。

PostgreSQL」のインストール方法は以下をご参照ください!
dohidoi.hatenablog.com

XML

XML型が入るテーブルを準備します。

CREATE TABLE straw_hat_pirates_xml(
 id integer,
 val xml --xml型で作成
);

以下の方法でXML型にデータを挿入できます。

INSERT INTO straw_hat_pirates_xml
VALUES
 (1,'<member><name>ルフィ</name><position>船長</position><bounty>1500000000</bounty></member>')
 ,(2,'<member><name>ゾロ</name><position>剣士</position><bounty>320000000</bounty></member>')
 ,(3,'<member><name>ナミ</name><position>航海士</position><bounty>66000000</bounty></member>')
 ,(4,'<member><name>ウソップ</name><position>狙撃手</position><bounty>200000000</bounty></member>')
 ,(5,'<member><name>サンジ</name><position>コック</position><bounty>330000000</bounty></member>')
 ,(6,'<member><name>チョッパー</name><position>船医</position><bounty>100</bounty></member>')
 ,(7,'<member><name>ロビン</name><position>考古学者</position><bounty>130000000</bounty></member>')
 ,(8,'<member><name>フランキー</name><position>船大工</position><bounty>94000000</bounty></member>')
 ,(9,'<member><name>ブルック</name><position>音楽家</position><bounty>83000000</bounty></member>')
 ,(10,'<member><name>ジンベエ</name><position>操舵手</position><bounty>438000000</bounty></member>');

SELECTする際はXPATHで抽出できます。
TEXTにキャストすることで文字列として取得できます。

SELECT
 XPATH('/member/name/text()', val),
 XPATH('/member/name/text()', val)::TEXT,
 (XPATH('/member/name/text()', val)::TEXT[])[1]
FROM
 straw_hat_pirates_xml;

f:id:toxapex0748:20210720234829p:plain

WHERE句にもXPATHが使用できます。
今回はINT型にキャストして1億ベリー以上のメンバー抽出しました。

SELECT
 (XPATH('/member/name/text()',val)::TEXT[])[1]
 ,(XPATH('/member/position/text()',val)::TEXT[])[1]
 ,(XPATH('/member/bounty/text()',val)::TEXT[])[1]::INT
FROM straw_hat_pirates_xml
 WHERE (XPATH('/member/bounty/text()',val)::TEXT[])[1]::INT >= 100000000;

f:id:toxapex0748:20210720235018p:plain

JSON

JSON型が入るテーブルを準備します。

CREATE TABLE straw_hat_pirates_json(
 id integer,
 val json --json 型で作成
);

以下の方法でJSON型にデータを挿入できます。

INSERT INTO straw_hat_pirates_json
VALUES
 (1,'{"member":{"name":"ルフィ","position":"船長","bounty":"1500000000"}}')
 ,(2,'{"member":{"name":"ゾロ","position":"剣士","bounty":"320000000"}}')
 ,(3,'{"member":{"name":"ナミ","position":"航海士","bounty":"66000000"}}')
 ,(4,'{"member":{"name":"ウソップ","position":"狙撃手","bounty":"200000000"}}')
 ,(5,'{"member":{"name":"サンジ","position":"コック","bounty":"330000000"}}')
 ,(6,'{"member":{"name":"チョッパー","position":"船医","bounty":"100"}}')
 ,(7,'{"member":{"name":"ロビン","position":"考古学者","bounty":"130000000"}}')
 ,(8,'{"member":{"name":"フランキー","position":"船大工","bounty":"94000000"}}')
 ,(9,'{"member":{"name":"ブルック","position":"音楽家","bounty":"83000000"}}')
 ,(10,'{"member":{"name":"ジンベエ","position":"操舵手","bounty":"438000000"}}');

SELECTする際は 「->」で取得可能です。
「->」ではJSONのまま抽出して、「->>」でtextとして取得できます。

SELECT
 val->'member'
 ,val->'member'->'name'
 ,val->'member'->>'name'
FROM
 straw_hat_pirates_json;

f:id:toxapex0748:20210720235802p:plain

WHERE句にも以下も方法で使用できます。
こちらもINT型にキャストして1億ベリー以上のメンバー抽出しました。

SELECT
 val->'member'->>'name'
 ,val->'member'->>'position'
 ,(val->'member'->>'bounty')::INT
FROM
 straw_hat_pirates_json
WHERE
 (val->'member'->>'bounty')::INT>= 100000000;

f:id:toxapex0748:20210721000003p:plain

XML型とJSON型の抽出と検索の方法について以上です!
今後もPostgreSQLについて書けたらと思います~

【PostgreSQL】Windows版インストール手順

はじめに

Windows10にPostgreSQLをインストールする手順について説明します。
フリーで使えるので練習から実践まで使い易いDBです。

以下リンクからダウンロードします。
www.enterprisedb.com

今回は最新である「13.3」をインストールしました。
f:id:toxapex0748:20210722214706p:plain

インストール

ダウンロードした「postgresql-13.3-2-windows-x64.exe」をダブルクリックします。
インストーラが起動するので「Next」を押します。
f:id:toxapex0748:20210722215233p:plain

インストールするフォルダを選択します。
フォルダの選択後に「Next」を押します。
f:id:toxapex0748:20210722215342p:plain

インストールするコンポーネントを選択する画面です。
不要なコンポーネントは外してください。
ただし、「PostgreSQL Server」は今回のメインなので必ずインストールしてください。
「pgAdmin4」はSQLクライアントソフトなので他のツールを使っている場合は不要です。
f:id:toxapex0748:20210722215542p:plain

データの保存先を選択します。
フォルダの選択後に「Next」を押します。
f:id:toxapex0748:20210722220329p:plain

管理者「postgres」のパスワードを設定します。
2回入力します。
(パスワードは忘れないように注意!)
f:id:toxapex0748:20210722220427p:plain

ポート番号を指定します。
特に問題なければデフォルトのままでOKです。
f:id:toxapex0748:20210722220639p:plain

PostgreSQLが動作するロケールを選択します。
特に指定がない場合は「c」を選択してください。 f:id:toxapex0748:20210722220729p:plain

インストール内容の確認画面です。
問題なければ「Next」を押します。
f:id:toxapex0748:20210722221426p:plain

ここまででインストールの事前設定完了です。
「Next」を押すとインストールが始まります。
f:id:toxapex0748:20210722221640p:plain

以下のようなインストール画面が表示されます。
f:id:toxapex0748:20210722221749p:plain

正常に完了したらインストール終了です。
お疲れ様でした。
f:id:toxapex0748:20210722221827p:plain

PostgreSQLに接続

スタートメニューから 「PostgreSQL 13」 →「SQL Shell (SQL)」を選択します。
以下のコマンド画面を入力していきます。
パスワード以外はデフォルトで良いので「Enter」キーをクリックしてください。
(インストール時に設定した管理者「postgres」のパスワードです)
f:id:toxapex0748:20210722222309p:plain

入力完了画面
f:id:toxapex0748:20210722221933p:plain

「postgres=# 」が表示されれば無事に接続できた状態です。

この状態で、テーブル作成、INSERT文、SELECT文が使うことができます。
DBの操作は今回インストールした「pgAdmin 4」でも可能です。

XMLJSON型についても記載したので、こちらも見てもらえると嬉しいです!
dohidoi.hatenablog.com

今回はここまでです。
ありがとうございました。

【SourceTree】ソース改修からプッシュの方法

手順

ソースの改修を行うと、「作業ツリーファイル」に追加されます
f:id:toxapex0748:20210711102121j:plain

commitするファイルを選択して「選択をインデックスに追加」をクリックします。
コマンドとしては $ git add [ファイル名] の意味です
f:id:toxapex0748:20210711100118j:plain

「Indexにステージされたファイル」がコミットの対象になります。
コミットの際に、プッシュも同時にする場合には
「変更をすぐにorigin/mainにプッシュする」を選択しておきます。

コミットはコメントを書いて右下の「コミット」をクリックします。
f:id:toxapex0748:20210711100133j:plain

コマンドとして
$ git commit -m "first commit"
$ git push origin main
となります