404 NOT FOUND | プログラミングスクールおすすめラボ https://pg-happy.jp プログラミングスクールを実際に試してレポートしています。 Mon, 30 Oct 2023 06:50:41 +0000 ja hourly 1 https://wordpress.org/?v=6.4.3 https://pg-happy.jp/wp-content/uploads/2018/02/icon2-75x75.png 404 NOT FOUND | プログラミングスクールおすすめラボ https://pg-happy.jp 32 32 副業コースがあるプログラミングスクール厳選4校 https://pg-happy.jp/fukugyo-course.html Thu, 18 Aug 2022 05:46:10 +0000 https://pg-happy.jp/?p=4443 この記事ではスクールに実際に通ったりいくつかのスクールの取材にいった私が、実際に副業コースがあるプログラミングスクールを整理ました。

インタビューで聞いたところ、数年前はプログラミングスクールで「フリーランスへ!」なんてワードが流行ってたのですが、

現実問題としてフリーランスになるのは難しいよね

というのを中のメンターも認識したらしく(ぉぃ)プログラミングスクールは一斉に「副業コース」を新設し始めました。

副業コースがあるプログラミングスクール5選

テックアカデミーの副業コース (イチオシ!)

テックアカデミー公式

テックアカデミーには豊富なコースがありますが、今まさに一推ししてるコースがなんと「はじめての副業コース」それだけ受講生が多いということですね。

ちなみに私はテックアカデミーのWEB開発コースに通ってました。

副業案件を紹介してもらえる保証つき

さて副業コースですが他社と違う大きな目玉が1つ。それは受講生全員が「はじめての副業挑戦を必ず保証」してもらえるという点です。

実はテックアカデミーは自社のエンジニアがWEB制作案件を受注していて製造しています。その一旦に加わるようなイメージです。

お客さん→テックアカデミーへ発注→受講生へ発注

このような流れなので初めての案件獲得も保証されてると言う訳です。

納品までメンターと一緒に取り組めるから安心

未経験からエンジニアデビューしたとしてもテックアカデミーのメンターに見てもらいながら案件に取り組む事ができるので、何よりも心配な次の点が安心です。

  • 自分で本当にWEB制作を完了して納品できるだろうか
  • 定められた期限内に納品できるだろうか
  • 納品後に不具合が出たら怒られないかなぁ
  • お客さんとの交渉とかどうすればいいんだろう
  • いきなり難易度の高い案件が来たらどうしよう

まずはテックアカデミーの副業コースで十分に実力をつける必要があります。社内の合否判定テストに合格した人のみ案件受注の道へ進むことができます。

テックアカデミー副業コースの料金プラン

副業コースには「はじめての副業コース」と少し進んだ「フロントエンド副業コース」の2つがあります。

学ぶ言語はHTML/CSSに加えて、JavaScript/jQuery、それからデザインや画像関係のソフトの使い方も。

はじめての副業 フロントエンド副業
4週間プラン 8週間プラン 12週間プラン 16週間プラン 12週Liteコース 12週
社会人 284,900 372,900 449,900 526,900 207,900円 330,000円

※12週Liteコースにはメンタリングがありません
※学生さんはこれらより1~2割ほど安い

TechAcademyワークスサービスを活用しよう

テックアカデミー卒業生向けの副業紹介サービスで「TechAcademyワークス」というのがあります。私はこれに加盟してないので中を見れませんが次のような案件がある様子。

食品会社WEB制作案件 1~2万円
建築企業WEBページ制作 3~4万円
美容系企業WEBページ制作 1万円前後

いずれもHTML/CSSコーディングなので未経験者でもメンター付きで大丈夫だと思います。JavaScriptやRubyやPHP等を使うものではなさそうです。これで副業としての取り組みで月5万円前後を目指す人が多い様子です。今の給料に副業で+5万もあればなかなかイイ感じですね。

メンターが不要であれば取り分が1.6倍(平均)上がるようなので、早くメンター無しで受注できるようになりたいですね。

テックアカデミー公式

テックキャンプの副業コース

テックキャンプもWEBサイト制作案件を推していて、それに則した学習コースを用意しています。

また副業案件の獲得はご自身でできるようにその獲得方法をレクチャーする形なので特に紹介してもらえるわけではありません

学習する内容は全てのコースで同じで、HTML/CSS/Ruby/Ruby on Rails/JavaScriptの教材が用意されています。入会すれば全教材を閲覧する権利がありますがテックキャンプは月額課金制なので会員を辞めたら教材は閲覧できなくなります。

7日間で満足しなければ全額返金保証付き。これはテックキャンプの全てのコースに打ち出してるキャンペーンです。もし自分にあわなければ理由によらずキャンセル出来るのはリスクが少ないと言えます。

テックキャンプは入会金+月額課金制です。

入会費 1カ月 2カ月 3カ月 4カ月
217800円 0円 21780円 21780円 21780円

DMM WebCampの副業コース

DMM WebCampでは1回だけ使える副業サポートとなっています。WebCampでのコースを学習完了した後に活用できるサポートサービスです。

WebCamp卒業後にご自身でオンラインのクラウドサービス等を使って案件を獲得してください。(ランサーズやココナラ等を活用するとよいと思います)

その後DMM WebCamp側のメンターから副業サポート(1回のみ60分)を受けられるようになります。なのでここぞという時に活用されるとよいでしょう。

但し条件があり学習後に規定の基準をクリアしバッジを獲得した人のみがこのサポートを受けられるようになります。

DMM WebCampで学べる言語はHTML/CSS/PHP/Laravel/Ruby/Ruby on Rails/JavaScript/Java/Servlet/JSP/Pythonと多岐にわたります。スクール名の通りWEB系の言語が多いですね。

4週間プラン 8週間プラン 12週間プラン 16週間プラン
169800 224800 279800 334800

techboostでは副業のサポートもしている

プログラミングスクールのtechboostの中でも「ブーストコース」が該当します。副業案件の獲得方法、受注して納品出来るレベルまで持っていくことを可能とするコースです。案件獲得のためにランサーズやココナラやシュフティ等を使うと思いますが、これらのサービスの使い方やプロフィール添削なども実施しています。

ブーストコースの学習内容はかなりハードだと思いますがそれなりにやる内容も多く高いレベルを目指したい方向けでしょう。他のスクールでは実施しないような顧客との折衝をする工程(要件定義、機能設計、基本設計、画面遷移図、テスト)なども学べるのは珍しいかもしれません。

言語やスキルは、HTML/CSS/Ruby/PHP/Java/JavaScript/Linux/AWSをやります。

ブーストコース メンタリング
入会金 219,780円 月4回 月6回 月8回
月額料金 32,780円 34,760円 52,140円 69,520円

(副業の背景)不景気で先が見通せない世の中

バブル崩壊後の失われた20年、リーマンショック、震災、原発爆発、長い円高で苦しんだ時期。安倍政権になり不景気を脱し少しずつ明るい未来が見えてきたと思いきや。

コロナ、戦争、円安の加速。この短い期間にたくさんの予想できない出来事が起こりました。日本経済は先行き不透明

平均年収は1996年の470万円をピークに減り続け2021年で403万円へ。

消費税は10%へ増え、で健康保険や年金も上がり続けていますから、実質手元に残るお金は本当に少なく。若い世代ほど搾取されてることを実感していることでしょう。

政府に期待するよりも自分の仕事人としての価値を上げることへの注目度が上がっています。

・今の会社で給料を増やす
・投資で資産を増やす
・副業で収入源を増やす

意識が高い人からこういった取り組みに注目し、学び将来の不安を払しょくしようとする人が増えているのは事実です。むしろ何もしないことの方がリスクですよね。

別にプログラミング以外でも副業はできます。居酒屋のバイトを入れるとか、土日にバイトを入れれば時間給で確実に収入は増えるでしょう。

ところで生活様式が変わったこともあり在宅ワークで収入を得る手段が人気になりつつあります。単価も高いプログラミングを副業としてとらえるのは自然な流れかもしれません。

主婦が副業でWEB制作をして月5万円を稼いでる。それは凄い事です!月5万円でもかなり嬉しい5万円ですよねぇ。自由になるお金、将来への貯蓄、子供に使ってあげるお金、少し美味しいものを食べるお金ですから。

(副業の背景)プラスアルファの収入源としての副業

収入源がサラリーマンの会社からのみ、というのはリスクですよね、と皆気づき始めたようです。

不景気に加え世界的な情勢の変化によって会社が突然倒産するような事例があることから、大手企業に勤めてる人も「わが社は大丈夫」とは言えないような状況になってきました。

そこで1つだけでなく複数の収入源を確保しようという動きが自然と出てきてるようです。

誰でもピンときそうな「投資」という手段もありますが投資は元手が必要ですし。

副業の手段は山ほどあります。(こちらの記事に副業62個の体験談があります)

昨今はブログで副収入、とかYoutubeで大きな収入!みたいなのもありますし自分の得意を誰かに提供する!とかでもいいし

それらの手段の1つとしてプログラミングも注目を浴びています。プログラミングを使って作業を提供する、プログラミングで制作したものを納品するような取り組みです。

未経験からでも3ヶ月~半年でスキルを身に着け、副業できるようになる人もいます。ITに力をようやく入れ始めた日本ですから、プラスアルファの収入源としてまたスキルの方向性として将来性は高いと思います。

副業を始める前の準備と役所への手続きはこちらをご確認ください

さて副業としてプログラミングを考えてる方に少し準備などをお伝えしておきます。

・開業届って必要なの?
→スグすぐに必要という訳ではないけど、いずれ必要。自分の場合は副業を始めてちゃんと利益が出るようになってから開業届を出しました。原則として開業してから3ヶ月以内に出すのが決まりですから、最寄りの税務署に行って書類(紙1枚だったと記憶してます)を出します。これで青色申告が出来るようになります。開業届を出し忘れてたら確定申告は白色でやることになり、開業届は翌年に出せばいいと思う。詳細は税務署とか税理士にアドバイス貰って。

・確定申告はいつやるの?
1月1日~12月31日分の収支を、翌年の3月15日までに税務署に提出すればOKです。自宅のパソコンから電子申請すると楽かなぁ。3月15日前になって慌ててやる人が多いけど、1月の正月が終わったぐらいで必要なレシートとかクレカの利用履歴とかを出力し始めればいいと思う。

・案件獲得、報酬受取の明細を保存
ランサーズとかで案件を受けた場合は履歴画面や売上データを保存しておきましょう。対人や対法人で別個に契約した場合は、あれば契約書、請求書を保存ですね。あとは経費計上のためにレシート等は必ず保管を。

てことで以上です。
副業コースありのプログラミングスクールを検討してみてください。

]]>
Laravelのwithメソッドのリファレンスが無い😂ヘルパ関数?PHP? https://pg-happy.jp/laravel-with-method.html Mon, 01 Aug 2022 04:21:03 +0000 https://pg-happy.jp/?p=4425 Laravelを学習中です。

ところでLaravelをやってるとwith()メソッドがやたら出てくる。

しかも何故かリファレンス見つからないのよ。探し方悪いのかな?

普通HTMLリファレンス、Javaリファレンス、JavaScriptリファレンス色々あるでしょ。クラス名、メソッド、その中身、機能、return値全部見つかるよ。でもねLaravelのwithは見つからねーんだわ。

PHPのリファレンスかな?と思ったけど無い。

けどLaravelのドキュメントにはしばしばあちこちでwithメソッドを見かける。けど、どのクラスのどのメソッドにwith()があるのかが見当たらない。

Laravelではwithメソッドは例えばこんな風に使われている

①redirectメソッドのメソッドチェーン(->)で繋げてwithメソッド

Route::post('/user/profile', function () {
    // …
    return redirect('dashboard')->with('status', 'Profile updated!');
});

②viewメソッドのメソッドチェーンで繋げてwithメソッド

return view('greeting')
            ->with('name', 'Victoria')
            ->with('occupation', 'Astronaut');

どっちもwithメソッドだけど似たような使い方だけど同じものではなさそう。

Laravelのwithメソッドは何なのか?調べてみた

あちこち調べまわったけどリファレンスが見つからない。なのでソースから全頭検査することにしました。

そしたら見つかりました。

1つ目RedirectResponseクラスのwithメソッド

1つ目。ファイルの場所:
/vendor/laravel/framework/src/illuminate/Http/RedirectResponse.php

    /**
     * Flash a piece of data to the session.
     *
     * @param  string|array  $key
     * @param  mixed  $value
     * @return $this
     */
    public function with($key, $value = null)
    {
        $key = is_array($key) ? $key : [$key => $value];

        foreach ($key as $k => $v) {
            $this->session->flash($k, $v);
        }

        return $this;
    }

これはRedirectResponseクラスのwithメソッド。return $thisだから自分自身を返してる。
その前にセッションにフラッシュデータを入れてるように見える。

気になったのは$this->session。これはこのクラスのprotected変数$sessionを意味していると思う。
$sessionは

use Illuminate\Session\Store as SessionStore;

public function setSession(SessionStore $session)
{
    $this->session = $session;
}

という記述があるのでここでインスタンスをセットしてるように見える。でもsetSessionメソッドの呼び出し元までは追えてない。

$this->session->flash($k, $v)で、Storeクラスのflashメソッドを使ってるってことか。

2つ目、Viewクラスのwithメソッド

2つ目。ファイルの場所:
/vendor/laravel/framework/src/illuminate/View/View.php

    /**
     * Add a piece of data to the view.
     *
     * @param  string|array  $key
     * @param  mixed  $value
     * @return $this
     */
    public function with($key, $value = null)
    {
        if (is_array($key)) {
            $this->data = array_merge($this->data, $key);
        } else {
            $this->data[$key] = $value;
        }

        return $this;
    }

これはViewクラスのwithメソッド。return $thisだからView自身を返してる。

withメソッドの中身は、data配列の$keyに$valueを入れてる。

withメソッドの返り値がやはりViewクラスだから、さらにメソッドチェーン->で繋げて->withとかも出来る様子。

と、これで2つのwithメソッドの違いが概ね明らかになった。

Laravelのヘルパ関数にもwithがあった

あと調べてる途中でヘルパ関数のwithっていうのもあることが判明。

・with関数は、指定値を返します。関数の2番目の引数としてクロージャを渡たすと、クロージャが実行され、その戻り値を返します。

$callback = function ($value) {
    return is_numeric($value) ? $value * 2 : 0;
};

$result = with(5, $callback);

// 10

もうややこしいよ。。

]]>
ubuntuにあるファイルをWindowsのVSCodeで開く https://pg-happy.jp/ubuntu-windows-vscode.html Thu, 28 Jul 2022 01:34:44 +0000 https://pg-happy.jp/?p=4405 WindowsにWSL2+Ubuntu20.04をインストールした。
ubuntuに入ってるファイルをWindows側のVSCodeで開けないかなと思ってやってみました。

私の環境は
Windows10
WSL2
Ubuntu20.04

WindowsにVisual Sudio Codeをインストール

https://code.visualstudio.com/Download

ここからWindows用のインストーラーをダウンロード。

User Installerというのはインストールしたユーザーだけが使える版で、
System Installerというのは全ユーザーが使える版のようです。

zip版もあるけど今回は間違えてUser版をダウンロードしました。(System版にすればよかった‥)

・使用許諾に同意して

・インストール先の指定
次へ

・スタートメニューフォルダの指定
次へ

・追加タスクの選択
デスクトップ上にアイコンを作成するだけ追加チェックを入れた

インストール完了

Visual Studio Codeの設定とRemote WSL拡張機能のインストール

WindowsでVSCodeを起動してみる。

すると、画面右下に「表示言語を日本語に変更するには言語パックをインストールします」と出てきたので、「インストールして再起動」を押しました。

画面左側にあるメニューボタンから「拡張機能」ボタンを押して。検索窓にwslと入力。Remote – WSLというのが出てきたので、これをインストールした。(Remote WSL

拡張機能Remote -WSLについては

Linux用のWindowsサブシステム内の任意のフォルダーを開くことにより、Windowsの快適さからLinuxを利用した開発エクスペリエンスを取得します。

しかし、それよりも「VisualStudioCodeリモート開発拡張パック」をインストールした方がよかったかもしれない。

こっちの方は

・リモートSSH
・リモートコンテナー
・リモートWSL

と3つも入る。

UbuntuでVisual Sudio Codeを起動

ubuntuにログインしなおして「code .」と入力すれば、VSCode Server for x64のダウンロードとインストールが始まる。

VSCodeが起動して、「このフォルダー内のファイルの作成者を信頼しますか?」の画面が出てくるので「はい」を選択。

あとはVSCodeを使いやすいようにカスタマイズしてもよい。

Ubuntuに接続してることがわかる。VSCode上でターミナルを開くこともできたり。

Ubuntuのファイルを作成したり、編集したり、VSCodeを使って開発ができそうです。

てことで以上です。

]]>
WSL2とubuntuのファイルはWindowsのどこにあるのか? https://pg-happy.jp/wsl2-ubuntu-windows.html Thu, 28 Jul 2022 00:46:41 +0000 https://pg-happy.jp/?p=4398 Windows10にWSL2とubuntu20.04をインストールしました。

ubuntuの中でファイルを開いたり画像を見ようと思ったときに、Windows側のエディタとかで開いた方が楽じゃね?と思いまして。

じゃぁWSL2のubuntuのファイルはWindowsのどこにあるかなと思って調べたところ。

Windowsのエクスプローラーに

\\wsl$

と入力する。

するとエクスプローラーが開いてこんなフォルダが出てきた。

ubuntuの中を見れて、入ってるフォルダやファイルを見れた。

試しに

Ubuntu-20.04/home/happi/

の下に

test.txt

というファイルを作ってみた。中身はメモ帳で開いてaaaだけ入力・保存。

Ubuntu側でも作られてるかなぁ?

ありました。

ということでWSL2とWindowsのファイルのリンクしてる場所(マッピング?)の確認ができました。

以上です。

]]>
Windows10+Docker+WSL2+ubuntuでLaravelをインストール&プロジェクト生成 https://pg-happy.jp/docker-laravel9.html Wed, 27 Jul 2022 04:58:20 +0000 https://pg-happy.jp/?p=4374 侍エンジニア塾に入ってた時に、講師のすすめでPHP Laravelの環境を構築してたものの、ついぞ構築できないまま終わってしまった悔しさがあります。

そこで改めて(いまは侍エンジニア塾生じゃないけど)Laravelのインストールのリベンジをしたいと思いました。

あぁ、こんなところに便利なサイトが。
https://readouble.com/laravel/9.x/ja/installation.html

現在の私の環境は

PHPバージョン8.1
Laravelのバージョン9
Windows 10 Pro

こんな風になっています。

Docker Desktopのインストール

Docker Desktop
Docker Desktop is collaborative containerization software for developers. Get started and download Docker Desktop today on Mac, Windows, or Linux.

ここから「Also available for windows and Linux」を押せば、「Docker Desktop Installer.exe」のダウンロードが開始します。

1.インストーラーの起動

2.Configurationの画面

・Use WSL 2 instead of Hyper-V
・Add shortcut to desktop

この2つにチェックが入ってることを確認して「OK」

3.Installation succeeded画面

インストール成功したら、「Close and restart」をクリック。

4.Our Service Agreement has Changed画面

この画面がでたら「I accept the terms」にチェックを入れて「Accept」

5.WLS 2 installation is incompleteの画面

WSL2 Linuxカーネルは別のMSI更新パッケージを使用してインストールされるようになりました。リンクをクリックしてカーネルアップデートをインストールしてください。

てことなので、

https://aka.ms/wsl2kernelをクリック。

以下の画面がでるので

「X64 マシン用WSL2 Linuxカーネル更新プログラムパッケージ」をクリックすると、「wsl_update_x64.msi」のダウンロードが始まる。

これを起動。Windows Subsystem for Linux Update Setupの完了。

6.Docker Desktopを起動

起動した。

Get started with Docker in a fiew easy stepsの画面で「Start」をクリック。

Ubuntuのインストール

画面左下のWindowsボタンから、Microsoft Storeを起動して、ubuntuを検索。色々でてくるので「Ubuntu 20.04.4 LTS」を「入手」

Ubuntuを起動。Enter new UNIX usernameと出てくるので任意の名前とパスワードでユーザーを作成しておくこと。

(ここでユーザーを作成せずに他のことやっちゃってエラー出た。)

Windows PowerShellからWSL2の設定

コマンドプロンプトでもいいと思うけど。WindowsマークからPowerShellを起動。

wsl -l -v

でWSLのバージョンを確認。

Ubuntu-20.04がStoppedになっててVERSIONが1のままなので、これのVERSIONを2に変更。

wsl --set-version Ubuntu-20.04 2

「変換中です。この処理には数分かかることがあります」と出る。

Docker Desktopの設定

画面右上の歯車のボタンからSettings画面を出す。

General > Use Docker Compose V2にチェックを入れて

Resources > WSL Integration > Ubuntu-20.04のスイッチをONにして

画面右下の「Apply & Restart」をクリック。

ubuntuにログインしてアップグレードを実施

sudo apt update && sudo apt upgrade -y

Ubuntu Linuxのアップデートの確認と、実際にアップグレードを行う。

Laravelのインストール

ubuntuから下記コマンドを実行。

curl -s "https://laravel.build/coffeeapp?php=81" | bash

coffeeappというプロジェクトを作成。

完了。

次に

cd coffeeapp && ./vendor/bin/sail up

このコマンドを入力してねと出てくるので、

sailコマンドを入力すれば

これでLaravelのインストールが完了する。このあと時間がかかる。

sailコマンドについて。

Laravel Sail(セイル、帆、帆船)は、LaravelのデフォルトのDocker開発環境を操作するための軽量コマンドラインインターフェイスです。 Sailは、Dockerの経験がなくても、PHP、MySQL、Redisを使用してLaravelアプリケーションを構築するための優れた出発点を提供します。Sailの本質は、docker-compose.ymlファイルとプロジェクトのルートに保存されているsailスクリプトです。sailスクリプトは、docker-compose.ymlファイルで定義されたDockerコンテナを操作するための便利なメソッドをCLIで提供します。
https://readouble.com/laravel/9.x/ja/sail.html

Sailは、macOS、Windows(WSL2)、およびLinuxと互換性のあるLaravel用のDockerを利用したローカル開発エクスペリエンスを提供します。Dockerを除いて、Sailを使用する前にローカルコンピューターにソフトウェアやライブラリをインストールする必要はありません。SailのシンプルなCLIは、Dockerの経験がなくてもLaravelアプリケーションの構築を開始できることを意味します。
https://github.com/laravel/sail

ちなみにbashエイリアスに登録することで sail と入力するだけで起動するようになる。ユーザールートにある.bashrcに記述してもよい。

$ alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'

.bashrcに記述したものをすぐ反映させるにはsource ~/.bashrcと入力。

これでdockerの中でLaravelが起動してるはず。

途中、「Windowsセキュリティの重要な警告」の画面が出てきた。ファイアウォールでDockerがブロックされてるようなので「アクセスを許可する」にした。

ところが

ターミナル上にずーっとログっぽい文字が流れてていつ終わるのかわからない。

mailhog-1 | [APIv1] KEEPALIVE /api/v1/events
meilisearch-1 | [2022-07-26T05:51:2Z INFO actix_web::middleware::logger: 127.0.0.1 “GET /health HTTP/1.1” 200 22 “-” “Wgett/” 0.000032

なにか‥奇妙だ‥

ブラウザでlocalhostにアクセスすると‥

UnexpectedValueException
The stream or file “/var/www/html/storage/logs/laravel.log” could not be opened in append mode: Failed to open stream: Permission denied The exception occurred while attempting to log: The stream or file

なんかエラー出ててLaravelの画面が出てくれない。

これさっきubuntuユーザーを作成せずに進めた結果らしい。

なのでubuntuでユーザーを作成するところからやり直しした。

rootユーザーをexitして。
新たに作成したユーザーでubuntuにログイン。
coffeeappはもうあるので、example-appを生成。

curl -s "https://laravel.build/example-app?php=81" | bash

Docker is not running

と出てしまう。Dockerは起動中のはずなんだけど‥PCを再起動してDockerを起動して。

ubuntuにログインして、

curl -s "https://laravel.build/example-app?php=81" | bash

を実行。

途中作成したユーザーのパスワードを入力。

DocierのContainersを見ると、example-appがRunningになってる。

ブラウザでlocalhostにアクセスすると‥

出た!

]]>
JavaScriptで簡単な検索ツールを作った https://pg-happy.jp/search-tool.html Fri, 22 Jul 2022 01:05:53 +0000 https://pg-happy.jp/?p=4321 JavaScriptで検索ツールを作ってみよう

JavaScriptで簡単な検索ツールを作ってみようと思い立ちました。

どういうものかというと、複数の商品やサービスがある中から特定の条件にマッチするものを抽出して表示させる。ECサイトなんかによくあるツールです。

そういった無料ツールは転がってそうですが、自分自身のエンジョイのために作ってみようと思ったのです。

もしアド広告(YahooリスティングとかGoogle広告とか)回しててこういうツールを簡単にサクッっと導入しようと思ってる方がいれば、自作できるので参考になれば幸いです。

簡単な検索ツールで何を作るか

このブログ用の検索ツールになるので、プログラミングスクールをユーザーの希望する条件で抽出して一覧で表示させるツールです。
トップページに置いてあります。

簡単な検索ツールの設計

簡単に設計をしようと思いました。

検索項目

項目は以下のとおり。

検索項目 フォーム 選択肢
目的 チェックボックス プログラミング/転職・就職/副業・フリーランス・起業
スキル選択 チェックボックス WEBサイト制作/WEBアプリ開発/フロントエンド/iPhoneアプリ/Androidアプリ/ゲーム開発/AI/データサイエンス/デザイン/Linux/AWS/副業/オリジナル開発
言語選択 チェックボックス HTML/CSS/PHP/Laravel/Ruby/Ruby on Rails/JavaScript/jQuery/Vue.js/Java/Servlet/JSP/Python/Unity/Kotlin/C++/C#
料金 ラジオボタン 指定なし/10万円未満/20万円未満/30万円未満/月額課金制
メンタリング ラジオボタン こだわらない/あり
チャットサポート ラジオボタン こだわらない/あり
転職保証 ラジオボタン こだわらない/あり
ハローワーク給付金 ラジオボタン こだわらない/あり
資格試験対策 ラジオボタン こだわらない/あり
全教材見放題 ラジオボタン こだわらない/あり
卒業後教材閲覧 ラジオボタン こだわらない/可能
コミュニティ ラジオボタン こだわらない/あり

最初に画面にこれらの検索項目を表示させ、ユーザーにチェックを入れて貰ったりして、結果を表示します。

結果表示項目

抽出された後表示する項目を以下のように考えました。

・スクール名
・スクールのバナー
・3つのトピック
・概要
・料金プラン
・カリキュラム
・学べる言語
・筆者の感想
・オプション
・内部リンク
・公式ページへのリンク

ところで、1個1個項目ごとに抽出して表示するよりは、スクールで1単位のHTML文を保有して、それを表示するだけにしたほうが簡単だぞ、と思いました。

なので結果表示項目はこれら項目の全ての内容を含むHTML文そのものです。

データの保有方法とデータの作成

データベースは使わないでCSV形式のテキストファイルをサーバー上に保存して、そこからデータを取り出す形にしました。

データは以下のようにエクセルで作成しました。

保持しているデータ項目は以下のものだけ。

項目 プロパティ
名称 name
表示用HTML desc
目的 goal
スキル skill
言語 lang
料金下限 minRyokin
料金上限 maxRyokin
月額課金フラグ subscFlg
メンタリング mentaling
チャットサポート chat
転職保証 tenshokuHosyo
ハローワーク給付金対象 kyufukin
資格試験対策 sikaku
教材見放題 mihodai
卒業後教材見れる forever
コミュニティ community

このエクセルをそのままTXTファイルにコピペして保存。

つまりタブセパレートバリュー(tsv)形式のTXTファイル。

簡単な検索ツールのJavaScript部分

JavaScriptのフロントだけで全部やっちゃう、サーバーサイドはやらない。

HTMLからJSファイルを読み込みます。

検索用ワード
JavaScript ファイル読み込み
JavaScript ローカルファイル読み込み
JavaScript サーバー上のファイルを読み込む

HTMLをロードした時点のイベントでjsを起動するようにしました。

window.addEventListener('load', function(){
  document.getElementById("srcbtn").onclick = search;
  readSearchData();
});

これで検索ボタンのonclickイベントにsearchという関数を登録し、その後データ読み込み関数を起動(readSearchData)。

サーバー上のTXTファイルを読み込みます。

function readSearchData() {
  var request = new XMLHttpRequest();
  request.open('GET', filePath, true);
  request.send();
  request.onload = function() { //リクエストの終了
    var lines = extractLine(request.responseText); //1行ずつ取り出し
    for(var i=0; i<lines.length; i++) {
        var items = tabSeparate(lines[i]);
        if(items.length == 17) { //項目数は17個であることをチェック
          var tmp = new School(items);
          searchData.push(tmp);
        }else {
          console.log('TXTファイルの書式がおかしい');
        }
    }
  };
}

サーバー上のTXTファイルを読み込むには、XMLHttpRequestのオブジェクトじゃないと取り出せないみたいでした。またTXTファイルの文字コードはUTF-8で保存しないと文字化けするのでUTF-8としました。

書式に倣っています。

request.openで読み込みURLと方式(GET)を指定。
sendメソッドでリクエスト開始。
onloadでリクエストが終了した時の処理を無名関数で記述しています。

extractLine関数は自作の関数。改行コード(\n)でファイル内の文字列を分割して1行ずつ取り出して配列linesに入れています。

取り出したlines配列の数だけforループでまわして、やはり自作の関数(tabSeparate)にて、今度はタブ(\t)で分割して配列itemsに入れていっています。

項目数が17個であることを確認して、items配列をSchoolオブジェクトに渡してスクール毎のオブジェクトを生成しています。

ユーザーがトップページを読み込みしたらここまでが完了状態でスタンバイです。

あとは「検索ボタン」が押されたらsearch関数が動きます。

search関数でやってることは

まず最初の1つ目の以下の条件をgetElementsByNameで取得しています。

検索項目 フォーム 選択肢
目的 ラジオボタン プログラミング/転職・就職/副業・フリーランス・起業

例えば「目的」のラジオボタンであればHTML側は以下のようになっているので

<label><input class="m10-r" value="プログラミング" type="radio" name="goal" checked />プログラミング</label>
<label><input class="m10-r" value="転職・就職" type="radio" name="goal" />転職・就職</label>
<label><input class="m10-r" value="副業・フリーランス・起業" type="radio" name="goal" />副業・フリーランス・起業</label>

JavaScript側では以下のようにして要素を取得しています。

var goals = document.getElementsByName('goal');
for(var i=0; i<goals.length; i++) {
  if (goals[i].checked) {
    goal = goals[i].value;
    break;
  }
}

要素を配列goalsで取得してから、goalsの中の要素に対して1つ1つcheckedプロパティのtrue/falseを確認し、trueのところのvalueプロパティを取得するようにしました。

例えばユーザーが「転職・就職」にチェックを入れて検索したら、「転職・就職」に対応しているプログラミングスクールを探していきます。

Schoolオブジェクトは最初の読み込み時点で配列searchDataに入れていますので

var tmp1 = [];
for (var i=0; i<searchData.length; i++) {
	if(searchData[i].goal.indexOf(goal) !== -1) { //目的に対応してるスクールなら
		tmp1.push(searchData[i]);
	}
}

このように各スクールオブジェクトのプロパティgoalはただの文字列なので、その中をindexOfメソッドを使って検索しています。

indexOfメソッドでは検索文字列があればそのインデックス値を返しますが、検索文字列が無ければ-1を返す仕様です。なので-1じゃなければ検索文字列が見つかったと言う事なので、それを条件にしました。

目的「転職・就職」に対応してるスクールが見つかれば、そのオブジェクトを仮の表示用配列tmp1に入れています。

こういうのを以下の全ての条件に対してマッチしてるかしてないかでふるいにかけています。データベースを使ってたらSELECT文で1発なんでしょうけど(汗

スキル選択 チェックボックス
言語選択 チェックボックス
料金 ラジオボタン
メンタリング ラジオボタン
チャットサポート ラジオボタン
転職保証 ラジオボタン
ハローワーク給付金 ラジオボタン
資格試験対策 ラジオボタン
全教材見放題 ラジオボタン
卒業後教材閲覧 ラジオボタン
コミュニティ ラジオボタン

最終的に該当するスクール達が残ります。

検索結果のスクールを表示する際には次のように対象スクールのdescプロパティをそのままinnerHTMLにぶち込んで表示しています。

document.getElementById('result').innerHTML = school.desc;

これだけ。

汎用的な機能じゃないけど、取り合えず満足しています

このブログだけで動く簡易な検索ツールは出来ました。

もっとイイやり方、スムーズなやり方はあると思いますがベタ書きで完成することができました。満足。

JavaScriptでデータ数も少ないしフロントだけでやってるので、スピードは速いです。

]]>
簡易チャットボット無料ダウンロード(プログラミングで作った) https://pg-happy.jp/chatbot.html Wed, 06 Jul 2022 04:30:36 +0000 https://pg-happy.jp/?p=4239 プログラミングの勉強をしながらチャットボットを作ったので公開します。こんなのでも使ってみたい方はダウンロードしてください。(いないか‥いないよね‥)

2023年3月15日 ChatGPT APIを使う様にVer2化しました。

ブログに入れれば他者のサイトと差別化できて、SEO効果がアップするかも!!?

ソースコードは公開してます。このツールで情報収集は一切やっていませんのでご安心ください。

無料チャットボットで出来る事

このツールができること‥

それは‥

選択した「問い」に応じて、「答え」を表示する

以上。

これだけ。

(Ver2はChatGPT API連携してるけど別にChatGPTを連携する必要は無いんだけど個人的にやってみたかっただけ。)

これでチャットボットと言えるんだろうか‥

むしろ「チャット」すらしてないような。文字入力エリアが無いので文章の受付もしないし、対応する回答をするわけでもなく。

AIは勿論搭載されていません。学習して答えを返すような機能もありません。

あらかじめ用意された「問い」の一覧から、ユーザーがボタンを押せば、その問いに対応する「答え」を表示するのみです。

簡易なQ&Aを画面右下に表示させることができるツールです。

無料チャットボットのダウンロード

こちらからダウンロードしてください。

chatbot.zip

chatbot2.zip

無料チャットボットのデモサイト

このサイトの右下にあるボタンを押してチャットボットウィンドウを開いてください。ここで動作確認できます。

動作確認できるのはVer2です。

ChatGPT APIを使っていますがレスポンスが遅くて。早くレスポンスを表示するのにうまくいってません(誰かやり方教えて‥)

チャットボットの設置の仕方

ここからはVer1の設置方法について説明しています。Ver2のほうはまだ‥

ダウンロードファイルを解凍すると以下のファイルが出てきます。

●ファイル構成

chatbot/     **フォルダ
┗chatbot.css   **chatbot用のCSS
┗chatbot.js    **chatbotの本体JS
┗eyecatch.png   **アイキャッチ画像 300×90
┗eyecatch-sp.png  **スマホ用アイキャッチ画像 50×50
┗profile.png   *プロフィール画像 50×50

●設置方法

ドメインルート直下にchatbotフォルダ毎アップロードしてください。

例)https://pg-happy.jp
なら

403 Forbidden

このようになるようにアップロード

※ドメインルート直下じゃなくてもうごくけど

●設定

HTMLファイルの</head>タグ直前に以下のコードを追記してください。

www.example.comのドメイン部分は適宜あなたのサイトのドメインに書き換えてください。


<script type="text/javascript" src="https://pg-happy.jp/chatbot/chatbot.js"></script>

とりあえずはこれで動きます!

あとは自分のサイト用にカスタマイズすればよいです。

無料チャットボットのカスタマイズとか

画像を変えたい

ファイル名 縦横サイズ
アイキャッチ画像 eyecatch.png 300 x 90
アイキャッチ画像(スマホ用) eyecatch-sp.png 50 x 50
プロフィール画像 profile.png 50 x 50

これらのファイルを用意して、chatbotフォルダの中に上書きしてください。

「問い」と対応する「答え」を設定するには

ここからは直接ソースコードをいじることになります。

修正するファイル : chatbot.js

const menu = [
  'プログラミングスクールはやめとけ?',
  'おまえは何者じゃ?',
  'おすすめのプログラミングスクールは?',
  'どんな基準で言語を選ぶ?',
  'おすすめのプログラミング言語は?',
  '次のおすすめの言語は?',
];

ここの中身を変更することで「問い」を変えることができます。

次に以下の中身を変更することで「答え」を変えることができます。「問い」の数と「答え」の数は一致させてください。

const res = [
  '独学できる人はやめとけ。自分で数千円で書籍を買えば数十万円もするスクールに通わなくても1年やれば一定の知識とスキルは身に着くでしょう。ただ、途中で挫折しないことが条件‥',
  '40代のオッサン。むかしSEとPGやってたけど、ブログのためにわざわざプログラミングスクールに実費で入会を繰り返して、ガチのレビューを書いてまふ。',
  '3ヶ月受講したけどテックアカデミーの先生は良かった。次点でテックキャンプ、テックキャンプの先生はちょっと心もとなかった。',
  'WEB系ならHTML/CSS/JavaScript/PHP/Rubyあたり。業務系ならJava/Cあたり。組み込みならC。JAVAはWEBもAndroidもできる。AI・統計分析ならPython。iOSはSwift。AndroidはKotlin。',
  '初心者ならまずはHTMLとCSSをやるとよい。その後にJavaScriptかな。画面で見てすぐ結果がわかるしWeb上にたくさんの参考が載ってる。',
  'まずは1つの言語をつきつめるとよい。大抵のプログラミング言語は似たような構文をしているので。',
];

名前を変えたい

修正するファイル : chatbot.js

以下の「光のプログラマー」のところを適宜、あなたの名前に変えればOKです。

const yourName = "光のプログラマー";

役職を変えたい

修正するファイル : ファイル chatbot.js

以下の「駆け出しプログラマーサポート」のところを適宜、あなたの役職名に変えればOKです。

const yourRoll = "駆け出しプログラマーサポート";

アイキャッチの画像サイズを変えたい

修正するファイル : chatbot.css

6行目付近にある以下の「width: 300px;」の数字をいじれば幅を変えることができます。「height: 90px;」の数字をいじれば高さを変えることができます。(パソコンでの表示時)

#chatbot-eyecatch-div {
  display: block;
  position: fixed;
  padding: 0;
  top: auto;
  bottom: 0; /*アイキャッチの場所下からの距離*/
  right: 0; /*アイキャッチの場所右からの距離*/
  overflow:visible;
  width: 300px;
  height: 90px;
  background-image: url(eyecatch.png);
  background-position:right;
}

スマホでのアイキャッチ画像のサイズを変える場合は、

修正するファイル : chatbot.css

176行目付近にある以下の「width:50px」と「height:50px;」の数字を変えれば幅高さのサイズを変えられます。

@media screen and (max-width: 480px) {
  #chatbot-eyecatch-div {
    bottom: 50px;
    width: 50px;
    height: 50px;
    background-image: url(eyecatch-sp.png);
  }

アイキャッチ画像の位置を変えたい

修正するファイル : chatbot.css

・PC画面の場合

6行目付近にある以下の「bottom: 0;」は画面下からの距離を表しています。

数字を増やせば、画面下から上の方に位置を移動できます。

#chatbot-eyecatch-div {
  display: block;
  position: fixed;
  padding: 0;
  top: auto;
  bottom: 0; /*アイキャッチの場所下からの距離*/
  right: 0; /*アイキャッチの場所右からの距離*/
  overflow:visible;
  width: 300px;
  height: 90px;
  background-image: url(eyecatch.png);
  background-position:right;
}

もし画面右端に張り付きじゃなくて、左端に張り付きにしたい場合は「right: 0;」のところを「left: 0;」にすればOKです。

・スマホ画面の場合

同様に、176行目付近にある以下の「bottom: 50px;」の数字部分をいじればOKです。

@media screen and (max-width: 480px) {
  #chatbot-eyecatch-div {
    bottom: 50px;
    width: 50px;
    height: 50px;
    background-image: url(eyecatch-sp.png);
  }

ということで以上です。

簡易チャットボットの利用規約

当チャットボットの著作権は㈱ハピアントにあります。
当プログラムの転用、転載はお控えください。
改変してあなたのサイト内で使うのは自由です。

Twitterでシェアしてくださると喜ぶかもしれません。

]]>
JavaScriptとcssで読み込む画像の「相対パス」「絶対パス」 https://pg-happy.jp/javascript-css-imgpath.html Tue, 05 Jul 2022 13:34:38 +0000 https://pg-happy.jp/?p=4215 JavaScriptで画像を読み込むパスの話、まずはhtmlからjsを読み込む

こういう階層構造のケース

sample.html

jsファイルの読み込みは絶対パスでも相対パスでも構わない。
Wordpressのような全ての記事(全ての階層にあるhtmlファイル)から同じjsファイルを読み込むなら絶対パスを使って</head>タグの直前に同じコードを記述して読み込むと思う。

<head>
<script type="text/javascript" src="https://pg-happy/js/sample.js" ></script>
</head>

CSSから画像を読む場合は絶対パスを使う

やはり同じくこのケース

/css/sample.css

cssファイルの中で読み込みたい画像は、cssファイルから見た相対パスで書く

background-image : url(../images/icon-apple.png);
background-image : url(./icon-banana.png);

JavaScriptでCSSを指定してHTMLに読み込ませるパス

おなじくこのケース

/js/sample.js

jsファイル→CSSと読み込んでhtmlファイルにcssを反映させるなら
絶対パスか、htmlファイルから見た相対パスを書かないといけない。間違えてjsファイルから見た相対パスを書くと駄目。

jsでcssを読み込む部分

let linkTag = document.createElement("link");
linkTag.href = "./css/sample.css"; //sample.htmlから見た相対パス(または絶対パス)
linkTag.rel = 'stylesheet';
linkTag.type = 'text/css';
document.getElementsByTagName("head")[0].appendChild(linkTag); //sample.htmlのheadタグに追加する

JavaScriptで動的に画像を読み込んでHTMLに反映させるパス

同じくこのケース

/js/sample.js

jsファイルの中で動的に画像を読み込んで、sample.htmlに反映させるには、sample.htmlから見た相対パスか、絶対パスを使う。

var appleImg = document.createElement("img");
appleImg .src = "./images/icon-apple.png";
bodyTag.appendChild(appleImg );

絶対パスを指定するために、jsファイル自分自身のパスを取得するには

このようなケース

sample.js

//sample.jsファイルまでの絶対パスをとる
function getOwnUrl() {
    var url;
    var scripts = document.getElementsByTagName("script");
    var i = scripts.length;
    while (i--) {
        var match = scripts[i].src.match(/(^|.*\/)sample\.js$/); //sampleのところは自身のjsファイル名に変更する
        if (match) {
            url = match[1];
            break;
        }
    }
    return url; //このサイトだったら https://pg-happy/tool/ という文字列を取れる
}

var ownURL = getOwnUrl(); //sample.jsまでの絶対パスを取得
var cssURL = ownURL + 'sample.css';
var bananImgURL = ownURL + 'icon-banana.png';

//以後でcssURLとbananaImgURLの絶対パスを利用

参考にしたサイト様→自分自身が設置されているURLを取得する

]]>