オンライン勉強会開催、JavaScript (Deno)を使ったフロント&サーバーづくり解説。

webアプリをつくろう!勉強会 超かんたんフロントxサーバー編」 (src on GitHub)
unstableなserveHttpを使っていたため、バージョン違いで動かない件を修正。簡単にフロントエンドとサーバーサイドを使ったプログラミングを体験できる資料になりました。

応用例としてゲームでは欠かせないハイスコアサーバーを作ってみましょう。

import { Server } from "https://js.sabae.cc/Server.js"; const scores = []; class MyServer extends Server { api(path, req) { if (path == "/api/list") { return scores; } else if (path == "/api/add") { scores.push(req); scores.sort((a, b) => b.score - a.score); return "ok"; } } }; new MyServer(8001);

addでscoreを含むデータを受け取りソートしておき、listで返します。簡単ですね!


http://localhost:8001/api/add?{"score":100,"name":"a"}
http://localhost:8001/api/list
など、APIアクセスして試してみましょう。

あとは、fetchJSON でフロントエンドから呼び出せばOK!
保存したい場合、jsonfs などファイルで保存したり、データベースで保存しておきましょう。
何か困ったことあれば、@taisukef までご連絡ください。

チーム開発でがっつりwebアプリ開発をしたい人にオススメ「jigインターン」今年の夏も開催です!


jigインターン 2020夏インターン募集開始」
恒例jig.jpのインターン、昨年に続きオンライン開催、1週間を3セット実施します。ご都合よいスケジュールでお申し込みくださいl

あっと言う間に最終日を迎えた、jigインターン2021春!
夕方17時から、2チーム、2作品の発表会。10分でプレゼン&デモ、観覧者による質疑応答を経て、投票によって決まった優勝チームは!?

2日間、やりきった!


ゲーム好きのための双方向情報交換サイト「ゲームちゃんねる on GitHub」 ロゴデザイン by もしゃ(jigインターン2020 OB
既存のサイトでは物足りない!主な情報源の動画だけどとまとまらない。そんなとき「ゲームちゃんねる」


今回はXAMPPで構築、サーバーの掲示板システム。フロントエンドはレスポシブ対応! 好きな人が作るのが一番!ぜひリリースに向けて育てましょう!


こどもでも苦手な人でも気軽に自分の音楽ができる「べいびぃすたじお on GitHub」 ロゴデザイン by もしゃ(jigインターン2020 OB
音楽理論とかセンスとか難しいことは置いといて、楽しくステキな音楽づくり、実現します!


ブラウザで鳴るJavaScript音源 Tone.js を使って、シーケンサーと共有するシステムを実装。GitHubのようにどんどんフォークしたり、混ぜたりできると楽しそう! 作詞や、ビジュアライズ、動画との組み合わせなど、いろんな方向への発展を考えるだけでもワクワクしますね!

優勝は「べいびぃすたじお」賞品の Oculus Quest 2 を使ったVR版にも期待です!
どちらもオープンソース。参考にしたり、フォークしたり、開発に参加したり、いろいろ作って発表しましょう!


normalize-japanese-addresses-es
DenoによるJavaScript/HTML/CSSを使えると、サーバー(バックエンド)にクライアント(フロントエンド)にいろいろ応用できて便利です。 こちら、本日発表された、Geolonia社の、日本の住所表記を正規化するオープンソースライブラリ「@geolonia/normalize-japanese-addresses」を、フォークし、ブラウザやDenoで使えるESモジュール表記に変更した「normalize-japanese-addresses-es」です。

B Inc. odp(オープンデータプラットフォーム)を使った、新宿区の行政メニューオープンデータもスタート!
東京都新宿区とB Inc.、オープンデータを使った行政サービス案内用のwebサービスを公開~利用者が迷わない窓口案内を目指して~|株式会社B Inc.のプレスリリース
DX、がんがん進める力は、エンジニアにあり!

Denoはじめのいっぽ、ぜひどうぞ!
Denoでつくる掲示板webアプリ、ハンズオン

はじまりました、jigインターン2021春!勉強会&チーム開発、2日間のオンライン開催。

やる気、6名の学生 with 眼鏡堅パンjigbox開封の儀

サーバーとクライアント、2つのコンピューターを使うwebアプリの基本をJavaScriptのランタイム、Denoを使って作る勉強会。 「Denoでかんたん、フロント&バックエンド超入門 in JavaScript」をベースにハンズオン。 全員、JavaScriptエンジニアの仲間入り!

チーム開発、スクラムのプラクティスのひとつ「KPTふりかえり」を元に作成、もっと優しい、Windows/Mac向けのハンズオン教材「Denoで作るシンプルなBBS

こんな掲示板アプリが2ファイル、90行で作成できます。
(慣れている方はこちら src on GitHub

0. エディタ VSCodeセットアップ(すでに入っている人はスキップ)
Visual Studio Code の「今すぐダウンロード」からセットアップし、起動する

1. Denoセットアップ
ブラウザで Deno を開き、Windows用インストールスクリプトをコピー

iwr https://deno.land/x/install/install.ps1 -useb | iex

Mac/Linuxの人はこちら

curl -fsSL https://deno.land/x/install/install.sh | sh

VSCodeのメニュー、Terminal、New Terminal
開いたTerminalで、貼り付けて、エンター

2. Deno動作確認
Terminalで deno と書いて、エンター
1+1 と書いて、エンター、JavaScriptが動きました!
Ctrlキーを押しながらD、で deno のREPL(リプル)を終了

3. webサーバーを動かす
適当なディレクトリ(例としてbbsserver)に、bbs.js と static/index.html を作成する
VSCodeのTerminalで、下記を書く(Windows用)

mkdir bbsserver New-Item -Type File bbsserver/bbs.js mkdir bbsserver/static New-Item -Type File bbsserver/static/index.html code bbsserver

(Mac/Linux用)

mkdir bbsserver touch bbsserver/bbs.js mkdir bbsserver/static touch bbsserver/static/index.html code bbsserver

新しくVSCodeが開く。
bbs.js を次のコードに編集する

import { Server } from "https://js.sabae.cc/Server.js"; new Server(8008);

static フォルダ内 index.html を次のコードに編集する

hello deno!

VSCodeのメニュー、Terminal、New Terminal
開いた Terminal で下記を書く

deno run -A --watch --unstable bbs.js

ライブラリをダウンロードしながら起動するので少し待つ(初回だけ)
ファイアーウォールのダイアログが出たら「プライベートネットワーク」で「アクセス許可する」
http://localhost:8008/ をブラウザで開く(Ctrl+click)と「hello deno!」と出る

4. バックエンド、APIサーバーを作る
bbs.js を下記に変更する

import { Server } from "https://js.sabae.cc/Server.js"; import { jsonfs } from "https://js.sabae.cc/jsonfs.js"; const datafn = "data.json"; let data = jsonfs.read(datafn) || []; class MyServer extends Server { api(path, req) { if (path == "/api/list") { return data; } else if (path == "/api/add") { data.push(req); jsonfs.write(datafn, data); return "ok"; } } } new MyServer(8008);

Denoのwebサーバーは自動的にファイルの更新を検出して、再起動する(--watch)
http://localhost:8008/api/add?{"date":"t","name":"test","body":"body"} にアクセスすると、"ok" とでる
VSCodeで data.json が更新されることを確認する
http://localhost:8008/api/list にアクセスすると、書き込んだデータが表示される
APIサーバーできた!

5. フロントエンド、掲示板(BBS)をHTML/CSS/JavaScriptでつくる
static/index.html を下記に変更する

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <title>DenoでシンプルなBBS</title> <script type=module> import { fetchJSON } from "https://js.sabae.cc/fetchJSON.js"; const enc = (s) => { s = s.replace(/&/g, "&amp;"); s = s.replace(/</g, "&lt;"); s = s.replace(/>/g, "&gt;"); s = s.replace(/\n/g, "<br>"); return s; }; window.onload = async () => { const data = await fetchJSON("api/list"); for (const d of data) { const div = document.createElement("div"); div.className = "bbsitem"; div.innerHTML = `<span class=date>${enc(d.date)}</span> by <span class=name>${enc(d.name)}</span> <div class=body>${enc(d.body)}</div>` container.appendChild(div); } btn_write.onclick = async () => { const item = { name: inp_name.value, body: inp_body.value, date: new Date().toString() }; if (await fetchJSON("api/add", item) == "ok") { window.location.reload(); } } }; </script> <style> .bbsitem { border-top: 1px solid gray; margin: 1em; } .writebox { border: 2px solid gray; padding: 1em; margin: 1em; } input, textarea { width: 80%; } </style> <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css"> </head> <body> <h1>DenoでシンプルなBBS</h1> <div id=container></div> <div class=writebox> 名前:<input type=text id=inp_name><br> <textarea id=inp_body></textarea><br> <button id=btn_write>書き込む</button> </div> <footer>App: CC BY <a href=https://fukuno.jig.jp/3169>@taisukef</a></footer> </body> </html>

http://localhost:8008/ にアクセスすると掲示板として使える
あとは自由に変更しよう!

6. 演習
フロントエンド、関数 enc が無いとどうなってしまうか試してみよう。
フロントエンド、スタイルシート sakura.css の行を消すとどうなるか見てみよう。
バックエンド、jsonfs とは何者か?リンクを辿って確認してみよう。
バックエンド、書き込みを全削除するAPIを作ってみよう。(ヒント、Array mdn、キーワードとmdnと一緒に検索するのがオススメ!)

7. 参考
HTMLはじめのいっぽ
CSSはじめのいっぽ
JSはじめのいっぽ

Denoは株式会社になったようです!ますます楽しみ、DenoとJavaScript!
Announcing the Deno Company | Deno Blog

楽しいことがありすぎる!

元高専生による高専生のためのプログラム「jigインターン」をjig.jpのサービスとして個別ページでスタート! 2012年から始まったブログを中心にGitHubでまとめて、Alpine.js のタブ機能と、sakura.cssで飾りました。ソースは、GitHubでのオープンソース。 歴代jigインターンのOBの方たちによる、コンテンツや機能追加のプルリクも、ぜひ!

jigインターン / intern.jig.jp

2021春、2回目のオンラインインターン、募集開始です!プログラミングが好きな高専生、ぜひエントリーください! 本当は鯖江に招待したいところですが、叶わないので替わりにお楽しみjigboxと、優勝賞品としてバーチャルに会えるが創れるツール「Oculus Quest 2」を用意しました!

2021年春jig.jpインターンプログラム ~募集のお知らせ~
オンラインで出会った仲間、企画、webアプリ開発、チーム開発勉強会を経て、3人ずつチームに別れてチーム開発、2日間、福野ががっつりメンタリングします! 作った作品はGitHubでオープンソース。どんな作品が飛び出すか!?楽しみです!

links
- jigインターン / intern.jig.jp

起業家甲子園と合わせて開催、社会人向けのコンテスト起業家万博に、信越地区代表としてチャレンジした長野高専出身の株式会社エボシステムのサイキックこと、佐伯さん!

ベジスター 〜日誌で繋がる生産者と消費〜
IT集団でありながら、農家を営むエボシステムによる新サービス。農業DXのはじめのいっぽ、農家の方には便利なデジタル日誌を提供しつつ、そのまま消費者へのメッセージを楽しい育成シミュレーションゲームと共に届けるサービス。


かわいいキャラクターとリアルな日誌との連携がおもしろい!


作成した野菜のパッケージにQRコードを付けて、認知を広めます。
iPhone版、ダウンロードできますよっ。
農家とつながる育成シミュレーション 『ベジスター』 公式サイト


SNSでの悪いバズリ”炎上”を未然に防いでくれる、jigインターン2021冬Eチーム作品「炎上チェッカー」は、情報公開な不慣れな農家の方にも提供できると安心かも? 誤字脱字のチェックや、おかしな文章を指摘してくれる機能などあると、更にうれしいかも!


他プロダクトへのコラボや、改善につなげるべく、動かしかたドキュメントを用意しました!自分で作ったものも後でみるとわからなくなるもの。作っていいきながらメモしていくのがおすすめです。


Google社のAPI「Cloud Natural Language」を使って、まずは炎上指数を取得し、計算するAPIをコンソールにて動作を確認。 うまくいかなかったらAPIキーを確認しましょう。


APIとしての動作をブラウザで確認!GETパラーメータ(?以降にJSON指定)でのチェックが便利です。


炎上指数が表示され、ツイートできます。


こうして、ツイートして広がってくれるとうれしいですね!

API活用による新サービス、どんどん実現していきましょう!

昨年に続きオンライン開催となった10回目の総務省/NICT主催の起業家甲子園。 全国の地域予選からICTメンターにより選出された学生チームによる決勝プレゼン!

エムキャスで配信、オンライン開催。


「Wall Art Online」
有明高専チームのプレゼン、地元の工務店とコラボし、壁面ディスプレイを互いに接続し、バーチャル二世帯住宅を提案するプラン。 スマホや、パソコン、大型テレビで十分!?いやいや、きっとその場に等身大に現れる遠隔地の様子は別次元の自然さなはず。 光量の問題は置いておいて、まずは大型プロジェクターで実験してみましょう!


「オーラルボイス」
高専プロコンからの選出、福井高専チームは口の動きと機械学習で英語の発音を判定し、オンライン対戦ゲームで楽しく学ぶプラン。 英語の先生の口の動かし方大事!というアドバイスから生まれた作品。


福井高専チーム、有明高専チームのICTメンターとして応援メッセージ。


「ICT・IoTフュージョンによる農業支援サービス」
旭川高専チームは、テクノロジーで日本の農業を再生させる!


高専WiConでも活躍とのこと。

「エレクロ」
会津大学生による、名前がおもしろい、デザインが変えられる新ファッションというビジネス。 ゲーミングネクタイもエレクロファッションの仲間かも? テクノロジーとファッション、どんどん融合進めたいですね。


Alumnote
同窓会プラットフォーム、Alumnoteプランが最優秀賞!創業済みで、サービス運用も始まっていることが評価されました。


Alumnoteのメンター、UFJリサーチ&コンサルティングの杉原さん、最優秀メンター賞獲得!


審査委員長、セプテーニ・ホールディングスの佐藤さん!


実際の投資家からの質疑応答と審査、良い刺激になりますね。jig.jpもスポンサーです!

良いプランには、良い名前と、良いデザインが伝えるために大事。
プロトタイピング時の味方、お手軽デザインツール「Bootstrap」適応の例です。

すくーるめもりー - Bootstrap一部適応プルリク
Alumnoteにも通じる、同じクラス内での写真共有サービス、jigインターン2021冬Bチーム作品、「すくーるめもりー」への改善提案(プルリク) 左がビフォー、右がアフター。コードの違いは極わずか、参考にどうぞ!


有明高専チームから送ってもらった写真!
ものづくり学生、応援します!

jigインターン2021冬、Cチームの作品「登下校タイムアタック!!」は、退屈な毎日の登下校をゲームに変えて、ヒーローになろうというサービス。

いいフォント!


ターゲットは学生!遅刻常習犯にこそ使ってほしい!?


設定画面、勝手にGeo3x3対応してみたバージョン。住所入力面倒ですよね?Geo3x3なら1コードで楽々。サービス側もジオコーディングいらずで楽々。 (住所を入力した場合、APIでジオコーディング対応)


登校手段を設定して、いざスタート!


プレイ画面、スタート、ゴール、現在位置がマーカー表示されます。区間タイムが出るとうれしいというコメントもありました。


本日のスコア!が表示されおつかれさまでした!スコアがサーバーに保存されるまでが実装されています。(ゴール判定、ランキング、ユーザー管理は未実装)


Geo3x3
40言語に対応した、Geo3x3、コード体系を変更しました(全言語更新済み!)。
いままで左上から123と並んでいたものを、左下から123、中段が456中段、上段が789とキーボードのテンキーの並びに合わせる形に変更した、v1.05をリリース。

いままでの地図アプリへのリンク(#E379)は、新地図アプリ(#913)へリダイレクトするように変更しました。 今までのコードを使っている方は、v1.05系への移行がおすすめです。

今後実アプリにどんどん活用していきたいと思います!

jigインターン2021冬、Dチームの作品「BazUp!!」は、誰でもバズリ体験できるサービス。 画像、タイトル、文章を入れると勝手にバズったように見せてくれ、通知止まらない状態を体験できます!


forked BizUp!! on GitHub
登録後の自動遷移とローカル通知を加えてプルリク、APIサーバーなしに起動するバージョンを試作しました。 ogpを取得してどんなどんなページでも仮想バズして、そのページ自体をシェアできるとおもしろいかも?


使用技術は、Nuxt.jsServer.js。 開発期間は2日間、アイデアから、実装、発表まで、ここまで仕上げて来ているのはすごい!

楽しいチーム開発、学びも多く、オススメです!

2日間のDeno勉強会付きハッカソン型インターン「jigインターン2021冬」では、過去最多の18名参加、5チームの作品ができました。

テーマは「学生xバズる」、快適な学生生活には推し配信者を持つことがいいみたい。YouTubeのプレイリストに目をつけ、共有できるAチームのプロトタイプ「切り抜きまとめサイト(仮)」、 社員投票によう優勝プラン!

切り抜きまとめサイト(仮) - 鯖江バージョン」(src on GitHub)
YouTube Data APIを使って、プレイリストから動画リストを取得して、使いやすく横スクロール表示を使ったスマホ対応で表示してくれます。

ユーザー毎の保存はできないので、ひとまず保存機能が効かない状態でアップしています。サーバーとフロント、それぞれシンプルなJavaScriptでできているので、ぜひ自分の手で動かしてみてください。

YouTube Data APIが、フロントエンドから呼び出されていたものをバックエンド側へもっていくなど、調整してみました。(プルリク


プレゼンもよかった!


2日間、おつかれさま!
どんどん作っていきましょう!


2月最後の金曜日、プレミアムフライデーを勝手に引き継ぐサイバーフライデー in 鯖江商工会議所地下!
勉強会や、ワークショップ、セグウェイを使った移動にも最適!

春のオンラインjigインターンスタート!集まってくれた18名、アイスブレイク&LTの後は勉強会。 サクッとWebアプリづくりの基本を学んで、いざ開発へ!今回のインターン期間は2日間のハッカソンスタイル、楽しくいきましょう!
事前に送った開封厳禁「jigボックス」中身のひとつ、鯖江の銘菓、眼鏡堅パン


下記、順にたどっていくだけで、作れます。(要、コマンドプロンプト or ターミナルの知識)
introweb src on GitHub



Denoをイントール!」




Server.js」で簡単サーバー起動! powered by Servest

$ deno run -A --watch --unstable server.js

更新を確認して、自動リロードしてくれるオプションを使うと更に便利!
Deno の組み込み機能、ソースコードの変更を検知してオートリロードする "File Watcher" の紹介


















さぁ、これでみなさんもwebエンジニア!

2021.2.26(金)18:30- Cyber Friday @ 鯖江商工会議所(E3792198838339) 地下1Fにて!
コンピューター好きな方、ぜひどうぞ!

links
- introweb src on GitHub

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS