jigインターン2020、いよいよ最終日、成果発表会。2週間のチーム開発、jig.jp社と同様、自ら企画し、開発して、提供(発表)する。 ほぼ初めてチーム開発、しかも初見同士のメンバーで取り組むフルオンライン開発にも関わらず、どのチームもすばらしい成果に感動です!

Zoomのウェビナーを使って社内外観客を前に緊張気味でしたが毎日の「がんばるぞい」の掛け声で少しやわらいだ? 発表10分、質疑応答5分、共感を得る課題、おもしろい切り口で設定したビジョン、開発したデモ、開発の裏側の紹介と展望、どのチームも堂々と、かつ、笑いも生むステキなプレゼンでした!


GET by チームC 開封厳禁 (src on GitHub)


虚無になりがちな登校なしの新入生がターゲット、確かに世界的な問題に、気軽なチャットで仲間と夢をGETしてもらおうというアプリ。
webアプリ開発における基本、HTTPメソッドのGETを思い起こさせるシンプルで強い名前がいい。
プレゼのオープニングアニメーションが凝っていたし、CLS = IchigoJamコマンド を使ってくれているのもうれしかった。
シンプルに答え、ルームへの案内時の質問が最初の会話のとっかかりになって良かった!プレゼン中にも各部屋、盛り上がってました!
WebSocketで実装されたルーム付きチャットもちゃんと機能していてよかった!
トップページあるステキナ動画、スクロールせずに見えるところに置いても良かったかも?


紹介動画、動画テク、いいですね!ちなみに再生コードはこんな感じ。ffmpegで動画形式変換も覚えておくと便利です。

<video src="https://jigintern.github.io/2020-Cteam/static/pic/GET.mp4" playsinline muted loop autoplay id="video" style="width:610px"></video><br>


きんにくサプリ by チームB ヤッツィー (src on GitHub)
jig.jpオンラインインターン2020 振り返りbyもしゃ


キャラ、かわいい!
運動する機会、減少、通勤通学は地味に運動になってる課題に、かわいく実用的に解決!
筋トレ系アプリと言えば、リングフィットアドベンチャー、自宅で83日なぜ続くのか?達成感だけでなく、ソーシャルも追加、コメントありましたが、掛け声があると優勝かも。
腕立ての数の判定をwebアプリからカメラを使って実際動く形で実装しているのが、スゴイ!
メニューにスクワットを加えて、ぜひ加速度センサーで判定したい。


AKA by チームA Darkmode (src on GitHub)
jig.jpオンラインインターン2020最終日 by けさらん
jig.jpオンラインインターン2020 振り返り byうるし
短かった2週間 by すずとも - jigインターン2020


平時でも大事、でも学生にはつらい、朝の目覚まし、コロナで一層生活リズム崩れがち。
楽しく学べて確実に目が覚める目覚ましアプリは、多くの学生の共感を得られそう!
課題をクエストと呼んだり、黒板風の課題表示画面に作者を「日直」と呼んだり、学生目線がすばらしい!
目覚まし効果もありそうな、メンターのアニメーションGIFも良かった。
細かなところで、まずはサクッと使えて、後でプロフィール登録すればいいという自然な設計がナイス!
ブラウザでの通知でのプロトタイプ、ぜひ実際に目覚ましアプリとして使えるよう、ネイティブアプリ化もチャレンジしたいところですね!


みんな、jigインターン2020参加ありがとう!みんな優秀な成績で修了です!

開発の楽しさ、伝わったかな?
続けるほどに強くなるのが実感でき、共有するほどに楽しめるが、エンジニアのいいところ!


2次会としても開催、高専プロコン競技部門を勝手に創る会も、JavaScript開発や、チーム開発を継続的に楽しく学ぶプロジェクト!ウェルカム!


フィールドをぐるっと囲みにいくAIはこんな感じのプログラム。邪魔が入るとスタックしてしまうシンプル版、どう回避する!?

import { KakomimasuClient, Action, DIR } from "./KakomimasuClient.js" import util from "../util.js"; const kc = new KakomimasuClient("taisukef_kacom", "kacom", "kacom", "tf_kacom_kakomimasu" ); // kc.setServerHost("http://localhost:8880"); // ローカルに接続してチェックする場合に使う let info = await kc.waitMatching(); const pno = kc.getPlayerNumber(); const nagents = kc.getAgentCount(); const points = kc.getPoints(); const w = points[0].length; const h = points.length; const line = []; for (let i = 0; i < w; i++) { line.push([i, 0]); } for (let i = 1; i < h; i++) { line.push([w - 1, i]); } for (let i = w - 2; i >= 0; i--) { line.push([i, h - 1 ]); } for (let i = h - 2; i >= 1; i--) { line.push([0, i]); } info = await kc.waitStart(); // スタート時間待ち const field = kc.getField(); while (info) { const actions = []; for (let i = 0; i < nagents; i++) { const agent = info.players[pno].agents[i]; // console.log(field); if (agent.x === -1) { // 置く前? const p = line[(line.length / nagents * i) >> 0]; actions.push(new Action(i, "PUT", p[0], p[1])); } else { const n = line.findIndex(p => p[0] === agent.x && p[1] === agent.y); if (n >= 0) { const next = line[(n + 1) % line.length]; actions.push(new Action(i, "MOVE", next[0], next[1])); } } } console.log(actions); kc.setActions(actions); info = await kc.waitNextTurn(); }

参考に最強のAIづくり、チャレンジしてみよう!(kacom.js on GitHub


第二回大会の優勝者は、ぷれーん!Zoomでの実況しながらの観戦も盛り上がりますね!

jigインターンは終わりましたが、楽しいのはまさに今から!

jig社、週イチで開催される開発共有MTG。今日はjigインターン期間中スペシャル、LT会!

開発側に偏った、テーマ7つ!
FFmpeg
・Rust frontend フレームワーク(Yewとか)
・オープンデータを利用した無料動画教材サイトを作った話でもしてみる(いえでまなぼう!)
・C言語でファミコンゲームを作る話をします(8bitworkshop)
・Flutterでいのちの輝きを描きます(Flutter on CodePen)
・とある言語を実行できるSlackBotを作った話をします(Glitch)
・プログラミング言語 Crystal を推奨します
・ふわっちを支えるキーボード(Thanks 遊舎工房)

Flutter版は他にはない!ということで、Flutter版をforkして、何か作ろうと、ひとまずありがちなJSをESモジュール実装し、SVG出力機能を付けてみました。
Kagayaki.js」(src on GitHub)
JavaScript慣れしたjigインターン生は、サクッとforkして遊べますね!
気になる、かがやきくんロゴのライセンス、問い合わせ中・・・。(Denoロゴや、IchigoJamロゴはオープンデータですが、如何に?)

今日のブログは、みっちー!
jig.jpオンラインインターン2020 9日目! - jigintern2020’s diary

エンジニア同士の情報交換、おもしろいものはすぐに使えるから、刺激的で楽しい!
その後のjigインターンの開発にもすぐに役立ったものもありました!
code4sabae-js Range request対応し、Safariの動画再生に対応!

人に変わってサービスし続けてくれるサーバー。その元祖、タイムシェアリングシステムは、60年近く前、1961年開発。

商業的初成功を収めたダートマス・タイムシェアリングシステム(DTTS)は、誰もがコンピューターを使えるようにとダートマスBASICと共に1964年開発。 見慣れたコマンド、LIST / RUN / SAVE / NEWが並ぶ。 そう、これらはBASICのコマンドではなく、TSS(今で言うシェル)のコマンドだったのです!

圧倒的に高速なコンピューターくん、マイクロ秒単位で相手する人を切り替え、人間から見てあたかも同時に対応してくれているように振る舞います。 シェルは、コンピューターと人とをつなぐ窓口のひとつ。IchigoJam BASICのように、コマンドを送ると、その結果を返事として返してくれます。

開発大詰め迎えるjigインターン、デモのためそれぞれチームごとに提供しているサーバーを設定し、Deno(JaavScript)で開発しているサービスをデプロイ(公開)しよう!

サーバー(AWS)上でDenoをサービスとして動かす方法
まずサーバーにログインする

動かしたいサービスをGitHubからとってくる
リポジトリの緑ボタン[Code]からで、Use HTTPS に切り替えて、Clone with HTTPSのアドレスをコピー

git clone https://github.com/.....git

Webサーバー Nginx(エンジンエックス)設定のため、一時的にrootユーザーになる

sudo su -

Webサーバーnginxの設定を追加する

cat > /etc/nginx/default.d/team.conf

下記を貼り付けて、Ctrl-D(ポート番号 8881 はそれぞれの環境に合わせる)

location / { proxy_pass http://127.0.0.1:8881; } location /ws/ { proxy_pass http://127.0.0.1:8881/ws/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; }

nginxを再起動して設定有効化

nginx -s reload

で動かすとエラーがでる

Location の設定がかぶっているので、下記を修正

vi /etc/nginx/conf.d/ssl.conf vi /etc/nginx/nginx.conf

"Location / { }" を # を頭に付けてコメントアウト

再び再起動

nginx -s reload

で動かし、エラーがでなければ設定完了!

exit

で、ユーザーを root からもとに戻す

サービスの動かし方

cd [service path] deno run -A main.js

サーバーのホスト名をブラウザに入れて、確認してみよう!
自分たちで作ったサービスが動くと感動ですね!

画面共有と音声帯域を使ったリアルタイムサポート、チームで感動も共有!

サービスとして、ターミナルから抜けてもずっと動くようにする方法

nohup deno run -A main.js &

サービスの止め方

ps -u [account name]

denoのPIDを探して

kill [PID]

サービスの止め方2
サーバープログラムに、ファイルを見たり、特定アクセスで Deno.exit(0) するようにプログラムしておく

サービスの更新方法

git pull

サーバーで更新してしまっていて、pullできない場合

git stash

で、一時保存した上で、 git pull
サーバープログラムを更新した場合は、サービスを一旦止めて、起動
(staticフォルダ内など、クライアント用ファイル更新のみの場合は再起動不要)

サーバー操作にも通じる、BASIC。
黒い画面に強いこども達が生む、サービス誕生が楽しみです!


ザイログZ80伝説(カラー版) | 鈴木 哲哉 | 工学 | Kindleストア | Amazon
今も生き続けるZ80、開発秘話から現況、タイムシェアリングのはじまりから回路設計まで幅広く多様な内容が楽しい!


IchigoJam BASICの元とした、タイニーBASICのプログラムも掲載!
このBASICでは、@マークでメモリアクセスになってますね。ご先祖を想って楽しい、コンピューター考古学!

せっかくなので、世界最初のBASICプログラムと言われる、エラトステネスの篩による素数計算をIchigoJam BASICで実装。アルゴリズム、見比べてみましょう。

1 'Sieve of Eratosthenes 10 CLV 20 FOR I=2 TO 10:?I 30 IF [I]=1 NEXT 40 N=2 50 M=I*N:IF M<102 [M]=1:N=N+1:CONT 60 NEXT 70 ?"PRIME NUMBERS" 80 FOR I=2 TO 101:IF [I]=0 ?I;" "; 90 NEXT:?

今日のjigインターンブログは、もしゃ!
jig.jpオンラインインターン2020 8日目! - jigintern2020’s diary
情報交換タイムでのおもしろ写真付き!

バーチャル背景生成アプリというジャンルもおもしろい!

どんな大規模プログラムも小さなプログラムの集まりです。 きちんと動くプログラムを作るコツは、構成する小さなプログラムをひとつひとつをシンプルかつ、丁寧に仕上げておくこと。 小さく切り分けておくことで、何か問題があった時に、すばやく解決することができるでしょう。


チーム開発で進む、高専プロコンの競技部門予定だった「Code for KOSEN、囲みマス」。 練習試合は盛り上がるも、忍者が消えてしまうコアモジュール「Kakomimasu.js」のバグは直さねば。

Denoの標準、testフォルダにテストコードを書いて、問題を特定、解決した。

1. 早速、チーム開発の基本に従い、debug-code branch作成。

2. 元々のシンプルなテストコード conflict1_test.js は問題なく通っていた。

cd test deno test conflict1_test.js

3. 忍者が寝返ってしまう状況を再現するランダムテスト random_test.js を書いて実験、時々おかしなことが起きる。

4. 修正がうまくいった時に再現できるよう、乱数の種を設定できる高性能なランダム MersenneTwister.js を用意。

5. おかしなことが起きるタイミングが掴めたので、そのタイミングに合わせて詳しい表示を console.log で入れて、チェック。REMOVEとMOVEの相互競合が原因と分かったので、まずは再現するテストコード conflict3_test.js を書いて、問題が起きることを確認。

6. コア修正し、テストコードが動くようになることを確認!

deno test

(全テストコードをまとめてテスト!)

7. コミットし、プルリク、レビューしてもらって、マージしましょう(GitHubでのチーム開発

テストコードがあれば、何か機能を足した時にデグレ(デグレーショション、退化)していないかを確認できて安心です。 とはいえ、最初から、完全なテストコードを書くのは大変なので、必要となる品質など、開発全体からのバランスを見て決めましょう。

プログラムをどこから手を付けていいか悩む時、テストコードから最初に書く、TDD(テスト駆動開発)という手法も有効です。 問題の切り分け、テストコードと実装、チームで開発する祭の役割分担にも良いですね。楽しい、開発を!

jigインターン、ぷりんによる、1週間のふりかえり!
jig.jpオンラインインターン2020 一週間の振り返り!byぷりん - jigintern2020’s diary

GitHubを使ったオープンソースプロジェクトへの貢献方法を紹介しましたが、今回はもっとライトな、1つのリポジトリをチームで使った開発入門。

1. GitHubのリポジトリ、権限「Write」のメンバーに設定しましょう
2. 大原則「masterリポジトリ」は直接触らない!
3. 変更するタスクに取り掛かる時、GitHub Desktop、New Branchで、branchを作ります

英数ハイフンのみを使った短い単語で名前をつけます。
branchは、名前付きでそのリポジトリをまるっとコピーしてくれます。
壊してしまっても簡単に元に戻せるので安心!(日付付きファイルコピーは不要です)
4. 作って、テスト!
5. できたら、何をやったかコメントと共にコミットし、プルリクを作成


6. 他のメンバーにレビューしてもらいます

GitHub Desktop、プルリクを選べばまるっとその環境にしてくれます
7. OK!なら、masterへマージ!

おかしなところがあれば、コメントしたり、直してコミットしたりしましょう。 もし、masterのbranchと競合しているかどうかもここで分かります。
8. できました!

いつ誰がどう変更したか、一目瞭然で便利です!
(いらなくなった branch は remove しちゃってもOK!)

今回、このGitHub実験と合わせて作った、自宅のIoT温度計を一覧できるダッシュボード

IchigoOndo list
月額66円のIoT、IchigoSoda + SHT31温湿度計のデータを、sakura.ioのDataStore APIで取得し、表示するHTML/CSS/JavaScriptのプログラム。 メインはこんな感じです(src on GitHub)

window.onload = async () => { const tokens = await (await fetch("ichigoondo-settings.json")).json(); const cr = (tag) => document.createElement(tag); list.style.display = "grid"; list.style.gridTemplateColumns = "1fr 1fr 1fr 1fr 1fr"; for (const c of ["", "温度", "湿度", "WBGT", "水分量"]) { const div = cr("div"); div.textContent = c; list.appendChild(div); } for (const c of tokens) { const a = cr("a"); a.textContent = c.name; a.href = c.link; list.appendChild(a); const data = await fetchDataLatest(c, 1); console.log(c, data); for (const name of [["t", "℃"], ["h", "%"], ["wbgt", "℃"], ["water", "g/m<sup>3</sup>"]]) { const div = cr("div"); div.innerHTML = `${data[name[0]].toFixed(2)}<small>${name[1]}</small>`; list.appendChild(div); } } const reloadevery = 5 * 60 * 1000; // 5min setTimeout(() => location.reload(), reloadevery); };

各温度計の詳細ページへ、ジャンプするように、tokenなどを設定して自宅で運用開始!

この日、家のIoT温度計、36.7℃にまで上昇!


オンライン開催jigインターン、困った時は画面共有して、みんなで問題解決!
みんな、どんどんレベル上がっていきますね!


jigインターン12名と、パロット化したメンター2名

今日のブログ担当は、けさらん!
jig.jpオンラインインターン2020 5日目! - jigintern2020’s diary

GitHub、個人プロジェクト、少人数チームプロジェクトから世界規模のオープンソースプロジェクトまで、多彩! まずは友達同士、あれこれ楽しく触って作って壊してみるのがおすすめです!(プロジェクト「囲みマス」もぜひどうぞ!)

jigインターン2020、まるっと1日、本格開発となった、4日目!
jig.jpオンラインインターン2020 4日目! - jigintern2020’s diary

Breakout Roomでそれぞれのチーム毎の開発が進みます。フロントエンド、バックエンド、基本2人ずつ担当し、詰まったら、まずはチーム内で共有してトライして、15分間進展がなければヘルプを呼ぶ感じで進めます。 何件かヘルプに入って解決。画面共有があれば、ちょっと見せてがオフライン同様にできて便利です。

プログラムを見ていて気になった冗長な書き方。歴史が長いJavaScriptはブラウザの進化と普及ともに変化するベストプラクティス。ちょっと便利なミニテク集を紹介してました。

1. document.getElementById は使わない
document.getElementById("nanika").value は nanika.value と書けます。
(ifやwindowなど、JavaScriptの予約語とかぶるidはつけない!)

2. 文字列と変数の連結は ` ` を使う
"./next.html?a=" + num.value + "&b=" + select.value;

`./next.html?a=${num.value}+&b=${select.value}`
すっきり!(間に改行も使えるので、HTMLの埋め込むにも便利です)

3. 関数定義でfunctionと書かない
function a(param1, param2) { .. }

const a = (param1, param2) => { .. }

4. DOM構築の document.createElement など長い関数を繰り返し使う時はコンパクトに
const cr = (tag) => document.createElement(tag);
const p = console.log;

5. クラスを使おう
JavaScriptでも class が使える
class A {
func(param1, param2) { .. }
}
より自然な関数定義、積極的にクラスでまとめていきましょう!

まだまだいろいろあるので、少しずつ紹介していきます。まとめアプリにするのも便利かも。


Code for KOSEN、高専プロコン競技部門を勝手にやる会「囲みマス」練習試合。
AIを持ち寄って、対戦させてみたところ、これが結構おもしろい!1試合3分、観戦するのもなかなか楽しく、いい感じでした。

参戦方法
囲みマス」を開きます
Kakomimasu on GitHubをクローンかダウンロード
cmd or terminal で、cd client_deno

deno run -A client_a4.js

ブラウザで表示されるゲーム一覧にゲームIDがつき、対戦者待ちになります
もうひとつ起動するか、誰かが参戦すれば対戦が始まります!
ゲームIDをクリックして観戦しましょう!

ローカルで試したい場合は、ローカルで apiserver を起動し

cd apiserver deno run -A apiserver.ts

client_deno/.env のhostを http://localhost:8880 にして、http://localhost:8880 を開き、クライアント起動!

強いAI、楽しいAI、人の手を介在させてもOK、ご参戦、待ってます!


全国高専卒業生の会 ヒューマンネットワーク高専(HNK) の月例会、オンラインに登壇!
神山まるごと高専についてお話しました!中学生に選ばれる高専になるために、技術でアピールしましょう!

HNKでの登壇、ブログで振り返ってみると、東京(2014)仙台(2015)東京(2015)大阪(2017)に続く、5回目でした! イベントから広がる、いろんな縁がつながってます!


毎日更新「新型コロナウイルス対策ダッシュボード
こちらもJavaScriptのオープンソース(src on GitHub)。Chart.jsで「入院治療を要する者」だけ表示にした推移。第二波収束方向のようです。
まずい状況が社会に伝わると、みんなが気をつけ、緩むと増える、繰り返しているうちに弱毒化してくれることを願います。

スマホアプリの開発現場ってどんな感じ?
今日のお楽しみは、jig.jp 本店&開発センターのバーチャルツアー。

スマホのZoomと、社内大型ディスプレイで交流しました。

社内外の名所を巡り。時には立って仕事するスタンディングデスクコーナー。

ふわっちのアプリは、Flutter、Dart言語でつくってます。
コードの変更がすぐにアプリで確認できて便利!

おかし食べ放題!

去年のjigインターン2019あたりから増殖を続ける、キーボード分割派。キーボードを割ると良いことあるかも。 このキラキラ光り輝くキーボードは、はんだづけして自作したもの。

チームA、すずとも、ふくっち(ヘルプ)、うるし、けさらん、はーど、よしろー(メンター)

チームB、きのぴー(メンター)、ふくっち(ヘルプ)、ぷりん、みゅーすけ、もしゃ、ぴんぽん

チームC、ぷれーん、ふくっち(ヘルプ)、ほどた、ほっぴー、Pちゃん(メンター)、みっちー

3日目のブログ! 「jig.jpオンラインインターン2020 3日目! - jigintern2020’s diary

JavaScript、ミニテクニック。自由にタグを作れる HTMLElement を使った、code4sabae-js のファイルアップロードタグ input-file の使い方。
シンプルweb開発Serverを動かし、input-file タグにアップロード先を指定すれば準備OK。
ファイルを選択すると、onuploadで、画像URLを取得できるので、プログラムでいろいろと使えます。

<!DOCTYPE html> <html><body> <h1>image uploader</h1> <script type="module" src="https://code4sabae.github.io/js/InputFile.js"></script> <input-file id="file1" name="file1" accept="image/*" uploadurl="http://127.0.0.1:8881/data/" maxsize="1MB" maxwidth=1220 multiple></input-file><br> <textarea id="ta" style="width: 80vw; height: 10em"></textarea><br> <script type="module"> file1.onupload = async (e) => { ta.value = file1.value; }; </script> </body> </html>

これを利用して、画像サイズを取得しブログへの埋め込み用HTML出力機能を作って使いはじめました。

import { imgutil } from "https://code4sabae.github.io/js/imgutil.js"; file1.onupload = async (e) => { const inputfile = e.target; console.log(inputfile.value); const maxw = 1220 / 2; const maxw2 = 800 / 2; const urls = inputfile.value.split(","); const ss = []; for (const url of urls) { if (!url) { continue }; const img = new Image(); img.src = url; await imgutil.waitImageLoad(img); const [iw, ih] = [img.width, img.height]; const max = iw > ih ? maxw : maxw2; const [dw, dh] = [max, Math.floor(max / iw * ih)]; const s = `<img src="${url}" width="${dw}" height="${dh}"><br>`; ss.push(s); } ta.value = ss.join("\n</p><p>\n"); };

タグ作りは HTMLElement を継承したクラスを作り、customElement.define を呼び出すだけ!
あとは HTML内で、普通にタグとして書けば、自在に埋め込めます!(プログラム中で使用する場合は、document.createElement は使えないので、new クラス名で作成)

links
- タブ区切りデータをHTMLテーブルに楽々変換、tsv-tableタグ! JS x WebComponentsはじめのいっぽ
- さばえものづくり博覧会OPENDATA、みんなで創るオープンソースでwebサイトづくりとお手軽テク集
- HTMLタグだけでOK! アイコン付き地図を埋め込む map-gsi タグ、JSゼロフレームワーク入門
- HTMLElementでオリジナルタグをつくろう!csv-tableタグでテーブル楽々うめこみ

jigインターン2日目、恒例の鯖江市長室訪問、今年はオンライン! webネイティブ世代の高専生からの鋭い質問と重みある回答。直接民主主義に近づける、市民主役で持続可能なまちづくりへの熱い想い、受け取りました。(これからを担う、鯖江市長候補者比較オープンデータ

鯖江市長と学生オンラインQAセッション - jigインターン2020学生 - YouTube
ITが十分に普及していないガラケー時代の16年前、なぜITに目をつけたのですか?


朝9時ちょうど、ラジオ体操から始まる夏のインターン。オンライン、みんなで体を動かすのは意外と効果あり!何でもやってみるものですね。

AWSを使ったサーバー設置勉強会、オープンデータの可能性と楽しさを知ってもらって、鯖江市役所オンライン訪問。

最後に記念写真!
鯖江市長の牧野さん、CIOの牧田さんありがとうございました!


インプットの後は、アウトプットの時間。チーム別ブレイクアウトルームで、社員エンジニアによるメンターと共に課題とアイデアをディスカッション。 明日の午前中にはかっこいい「ビジョン」を決めますよ!

サーバーで自分で作ったwebアプリが動く感動体験。
1時間単位課金で使えるVPS(バーチャル・プライベート・サーバー、仮想専用サーバー)のおかげで隨分手軽になりました。

ConoHaのVPS(700円クーポン付き?)に登録し、サーバーを一番安いプラン、OSは「CentOS8」で起動。 コンソールを表示して、次のコマンドを貼り付けるだけで、Denoがセットアップされ、自分だけのwebサービスが稼働します。(src on GitHub)

curl https://code4sabae.github.io/js-sample/setup-for-centos8.sh | sh

http (SSLは未設定なので https ではない)に、起動したサーバーのIPアドレス、更に :8881 とポート番号を付けて、アクセスし、「Hi Deno!」と出れば成功です! (参考、Deno x Servest x JavaScript で始めるシンプルweb開発

しばらく稼働する場合は、サイバーセキュリティの基本、サーバーのアップデートをしておきましょう。

$ yum update

* 本当は、スタートアップスクリプトに起動前に入れるだけでOK!としたかったのですが、うまくいかず。・・・もっと勉強が必要です。うまく行った方、教えてもらえるとうれしいです。

jigインターン生によるブログ、2日目は福井高専、すずとも!
Jig.jpオンラインインターン2020 2日目! - jigintern2020’s diary

links
- Deno x Servest x JavaScript で始めるシンプルweb開発
- 昨日、毎夏恒例となっている㈱jig.jpのインターン生との意見交換でした。(市長Facebook)

今年はオンライン開催のjigインターン2020。ウェルカムスピーチ、自己紹介、ガイダンスの後に、あだなが決まって、まずは軽くゲームから。


自宅から読みの辞書順で、一番早いものを持ってきた人が優勝ゲーム!
勝者は「アース付きコンセント」を持ってきた、ぷりん!Arduino、iPad、ITパスポート、アルゴリズム辞典、赤いバケツなど、いい感じに偏ってます。

少し和んだ後、みなさん期待のweb開発とチーム開発の勉強会!
Deno x Servest x JavaScript ハンズオン、全員web開発者になれました!
意外とシンプルで簡単に始められそうですよね!あとはいろいろやってみるのみ。

さりげなく使った、import(JavaScript関係は、まずは + mdn で検索するのがオススメ!)

console.log("Hi Deno!");

console.log と書くのが面倒な場合、次のプログラムを p.js として保存して

const p = console.log export { p };

hideno.js をこんな風に書きます

import { p } from "./p.js"; p("Hi Deno!"); p("again!");

ブラウザ上やDeno上のJaavaScriptの抽象化、import / export は、URLも使えて便利です。


Proxyを使うと、データ構造とHTMLのタグを対応づけできます。
選択するための select タグを、配列と対応づける proxySelect.js を作って使ってみました。(src on GitHub)

const ar = [1, 2, 3]; const par = proxySelect(sel, ar); par.push(4); par.unshift(0); console.log(par); par.pop(); par.pop(); par.pop(); for (let i = 0; i < 10; i++) { par.push(rnd(100)); } par.sort();

配列操作がそのままselectタグに反映されて便利です。

辞書順ゲームをやってみましょう!

const ar = [ "アルデュイーノ", "アイティーパスポート", "アルバム", "アイスクリーム", "アイス", "アカイバケツ", "アースツキコンセント", ]; const par = proxySelect(sel, ar); await sleep(3000); par.sort();

おや、「アースツキコンセント」が一番になりません。
文字コードの問題のようなので、sort関数を別途用意して、無事優勝!(src on GitHub)

par.sort((a, b) => { const len = Math.max(a.length, b.length); const clong = "ー".charCodeAt(0); for (let i = 0; i < len; i++) { const ca = a.charCodeAt(i); const cb = b.charCodeAt(i); if (ca === cb) { continue; } if (ca === clong) { return -1; } else if (cb === clong) { return 1; } return ca - cb; } return a.length - b.length; });

長音記号があったら前にもってきます。(参考、Array.prototype.sort() - JavaScript | MDN


チーム開発、いちばん大事なのは「ビジョン」。いろいろあるプロクティスですが、シンプルなものから使っていきましょう。


今年のjigインターンメンバー、2週間後の成果発表に向けて、気合十分!


jig.jpオンラインインターン始まります! - jigintern2020’s diary
インターンブログも始まりました!初日は福井高専みゅーすけ!

高専カンファレンス in 明石3」にて「スクラム」を使った楽しいチーム開発を発表。

「みんなで創ろう チーム開発手法、スクラム」 高専カンファレンス in 明石3 バージョン!


短いサイクルで「分析、設計、実装、テスト」を繰り返すのがアジャイル開発
(出展:デジタルビジネスの潮流とアジャイル開発~ビジネスとエンジニアの協働チームづくり~


ウォーターフォール vs アジャイル
時に年単位の開発期間で作られるウォーターフォール開発。後戻りはできないのでどうしても設計が保守的になり、あれもこれもと盛り込み勝ち。できあがった機能のうち7割は使われないとか・・・!?
とにかくまずは動くもの、必要最小限な機能による出荷可能なプロダクトを短いスパンで開発、デプロイし、利用者の意見や、反応を見つつ、どんどん改善していくのがアジャイル開発。
jig.jpのプロダクトはこのアジャイル開発で作られています。短期間でリリースし、最新技術も取り入れつつ、どんどん改善!


スクラムはアジャイル開発の一種、ビジョンをしっかりチームで握ることが超大事!
利用者価値を優先し、変化に柔軟に対応し、短期リリースを目指し、会話によるチームメンバー全員合意と、技術的卓越を原則とする。問題が発生しても個人対個人ではなく、問題対チーム全員という考え方で!
最終決定権を持つプロダクトオーナーを決め、一定期間(jigインターンでは4日間、1週間や2週間が一般的)でやることをプロダクトバックログとして積み、みんなでタスクとして分解するスプリント計画、タスクかんばんやバーンダウンチャートを使って進捗を関係者全員で共有する。


数時間でできる程度に分解したタスクを貼って、TODO、Doing、Doneと移していく。問題が発生したら小さく赤いプロブレム付箋を貼って、チームからの助けを借りるのも手。問題はみんなのもの、ひとりで悩まない。


朝会ではじまる一日の開発、動くものを目指して1スプリント終えたら、ふりかえり。
ふりかえりの手法として、jigインターンではKPT(Keep Problem Try)に加え、Kansya(感謝)を追加!
良かったことや、問題に対するチャレンジ(Try)をいくつか合意して、次のスプリントへ!
リズム良く気分良く、楽しく仲良くチーム開発!


今回のjigインターンでは3スプリント実施して成果発表会を迎えました。


オタクック 「お料理版AtCoder、毎週金曜日はアニメメシで勝負だ、オタクック! by jigインターン2019 とモダンクライアントVue.jsはじめのいっぽ


めしめーと 「Vue.js x Go x MySQL、外食の好みでつながる「めしめーと」 by jigインターン2019 とモダンなRDB環境構築手順


旬レシピ 「ご当地レシピのオープンデータと応用提案、卸売市場と栄養素データをマッシュアップしたお手軽料理ナビ「旬レシピ」 by jigインターン2019


詳しくは、jigインターンブログGitHubにあるリポジトリをどうぞ!
jigインターン、来年もお楽しみに!(興味がある人、@jiginternをフォローしておこう)


THETAで撮った会場の360度写真、ちょっとHTMLをかけば、VRアプリのできあがり!
VR #kosenconf_138akashi 2
PCでもぐりぐり回せるよ。スマホVRでもそこそこいい感じ。Oculusなどで見るとよりきれい!

<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>VR kosenconf_138akashi</title> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> </head><body> <a-scene id="scene"> <a-sky src="kosenconf_138akashi/akashi1.JPG" rotation="0 -120 0"></a-sky> </a-scene> </body></html>

たった8行のHTMLでOK!
Oculus Questなどを持っている人、このリンクをブラウザで見て、右下のメガネ型VRアイコンをクリック!
超お手軽VR開発、ぜひいろいろ挑戦してみてね!(50行マイクラ風など)


高専カンファレンス in 明石3!


会場は明石高専!


続VRのすゝめ by 鈴鹿高専 @MD_a_To_bl_o
VRチャットでの女性比率は何があると上がるのか?


知ってると得する切符の話 by @S0UL_EXPLOSION
往復割引切符は東京からでも買えるとは、知らなかった。


地域住民が行政を動かしたという話。
みんなのまち、学生だって住民、プログラミングでもデザインでも、いろんな力で貢献できる!
Code for KOSEN は、2013年、この階段教室から!(オープン&チャレンジ、殻を破る高専生! - 明石高専訪問


jigインターンでの毎日! by なべ


集合写真 by THETA撮影、切り出し
VR #kosenconf_138akashi 1
VRで見るならこちら。


懇親会スタート!


懇親会でのVR体験会、Oculus Rift S と Oculus Quest、2台体制


未来の食事、完全食COMPグミエディションも活躍。


高専生発の抵抗カラーコードかるた!


せっかく明石なので、明石焼き〆!
jigインターン番外編~幻の21日目~ - jigintern2019のブログ

links
- 高専カンファレンス
- 高専カンファレンス in 明石3 - 高専カンファレンス Wiki
- デジタルビジネスの潮流とアジャイル開発~ビジネスとエンジニアの協働チームづくり~
- スクラム (ソフトウェア開発) - Wikipedia

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