「（2/22～2/28）１週間でWebサービスを作るイベント - お題「増やす」」の投稿 - Crieit

web２week　＋2day　かかってしまった。作りたかったもの権力を振りかざして人々からの愛...

2021-03-09T17:31:14+09:00

web２week　＋2day　かかってしまった。

作りたかったもの

権力を振りかざして人々からの愛を貪る（増やす）デスゲーム
選択式コマンド
リアルタイム連動

など、ゲームとしての面白さを追求したかった。

愛のある日々を

まぁ、時間かかった割にはクォリティーが伴ってません。

Rails 使って　バグの多い書き方＆時間がかかるやり方しているのでまだまだ勉強が必要だなと実感しました。

次回は１ページ完結のアニメーションを使った制作物を作ろうと思います。

日々、勉強だぁ！
今回も良いモチベーションアップになりました。

陣地を｢増やす｣ブラウザゲームを作ってみた【GDevelop5】

2021-03-09T04:45:15+09:00

web1week遅刻勢です！

作ったもの

陣取り合戦ロッカッケー
https://rokkakkee.netlify.app

Webブラウザ上で遊べる、ボードゲームのようなルールの自作ゲームです。
コンピュータと対戦する「CPU戦」と、スマホを縦に持ち向かい合って遊べる「対人戦」があります。

遊び方

基本的なルールを説明します。

【移動】
プレイヤーは自分の隣のマスに移動または攻撃を行い、交互に自分の色の陣地を増やしていきます。
移動するときは、矢印のマスをタップしてください。

【勝敗】
CPU : 2とかYou : 1とか書いてあるのは自陣のマスの個数です。
最後までマスが埋まったとき、どちらか多いほうが勝利となります。
Splatoonみたいですね！

【攻撃・防御】
白いマスには移動できますが、相手のマスには移動できません。
代わりに、相手のマスをタップするとそのマスを攻撃します。
マスに書かれた数字は防御の厚さを表していて、攻撃を受けて防御力が下がり0になってしまうと白いマスに戻ります。
逆に、自陣の上を何度も通っていると、防御が厚くなっていきます。

【弱点】
防御があるから大丈夫…なわけではありません。
弱点として、本体を直接攻撃されると、防御力に関係なくマスを奪われる上に、キャラクターがスタート地点に戻されてしまいます。

↓ Youに襲われたCPUがスタート地点に戻されています

ただし、相手のスタート地点の隣で攻撃すると、こんな風に逆襲されてしまうことも…。

↓ CPUがスタート地点の隣にいたYouを攻撃し、Youは戻されてしまいました

相手が最後のマスを塗ったため、この時点で面積の多い私が勝ちました。
相手の立場であれば、ここで塗らずにこちらの陣地を攻撃していれば勝てる可能性はありましたね。

正直CPU戦のCPUさんは非常に弱いのですが、ルールを把握して頂くには十分かと思います。

対人戦

オンラインではありません。対面です。

【先攻】
先攻はランダムに決まります。ちなみに、これはCPU戦でも同じです。

防御力の数字の向きは紫側から見ると逆さまになります。申し訳ないです。

勝敗画面はこんな感じです。

開発に使ったソフト

web1weekにゲームエンジン持ち込むのは反則だろうというような気はしないでもないですが、まあWebなら何でもいいだろうということで、国内ではあまり認知度が高くない「GDevelop」というゲームエンジンを使用しました。

なぜGDevelopにしたのか

元々このゲームの構想自体はずっと温めていて、今回web1weekに便乗して実装することにしたわけですが、1週間で作るとなるとJavaScriptのコードを直接書いてゲームを1から作っていくのはなかなか骨が折れそうだと思いました。

そこでWebに出力できるゲームエンジンを探したのですが、意外とこれが少ないのです。
UnityにもWeb出力機能はありますが、機能制限が色々ある予感がしたのと流石にUnityでweb1weekに参加するのはお門違いだろうという思いがありまして、結局たまたま検索で見かけたGDevelopを採用しました。

GDevelopとは

GoogleのソフトウェアエンジニアであるFlorian Rival氏が手掛けている、様々なプラットフォーム上で動作するゲームが作れるゲームエンジンです。
2008年から続いているプロジェクトのようですが、未だに高頻度にリリースが続いており、しっかりメンテナンスされている印象を受けます。

操作はGUIで完結していて、コードを書く必要はありません。（これがあまり嬉しくないわけですが）

また、日本語訳が充実しており、ドキュメントも完全に日本語で利用することができます。
原文より日本語訳のほうがまともなんじゃ…と思う瞬間すらあります。
どうやら、株式会社マイティークラフトという会社が日本語訳を担当しているようです。ありがたいことです。

簡単にゲームアプリを作れるゲームアプリ制作ツール「GDevelop」の日本語化とサポートを開始 - 株式会社マイティークラフト

日本語版のドキュメントはこちらです。

GDevelop 5 ドキュメント

GDevelop5を試してみたい方は、このページの「はじめに」、「ゲーム作りの基本コンセプト」、そして「チュートリアル」を見ておくことをおすすめします。
非常にクセがあるので未読で触るとヤケドするかもしれないです…。

GDevelop5のここがつらいよ

正直実装がここまで苦労するとは思っていませんでした。
まだ理解が不十分なところはあるかもしれませんが、仕様レベルでしんどいと感じた点をいくつか挙げてみます。

1. インスタンスの扱いがつらい

まず、GDevelop5で言うインスタンスとは何かを説明しますね。
GDev5にはオブジェクトというものがあります。

オブジェクトは「スプライト」「テキスト」など様々な種類があります。
オブジェクト自体にはどのような画像を使うかなどを設定します。

オブジェクトの設定ができたら、オブジェクトを画面上にドラッグアンドドロップすることでインスタンスが画面上に作成され、利用できるようになります。

オブジェクトが利用可能な形になったものが「インスタンス」、と捉えれば一般的な認識の通りでしょう。

画面構成を終えたら、それぞれのオブジェクトがどのように挙動するのか、「イベント」設定画面で設定する必要があります。

つらいのはここからです。
イベントは、「○○だったら△△する」という形式、つまり「条件」と「アクション」がセットになったものを大量に並べることで構成されていきます。

ここで例えば「衝突」などの条件を設定することができるのですが、このとき対象として設定できるのは「オブジェクトの名前」になります。
「インスタンス」ではありません。
これが非常に大きな罠として待ち構えています。

インスタンスの罠

どういうことでしょうか？
例えば、マリオのようなゲームを考えてみましょう。
これは公式チュートリアルに書かれている「プラットフォームゲーム」を実装したものです。

空中にコインが３枚ありますね。
これはCoinというオブジェクトのインスタンスが3つ並んだものです。
このコインを取ったときに、コインが消えるイベントは以下のようになっています。

条件は「PlayerはCoinと衝突している」、アクションは「Coinを削除する」。
ここで違和感を感じると思うのです。
Coinって、どのコインのこと？

このときの挙動がこちらになります。

（↓GIFが動いていない場合クリックすると動くかもしれません）

ちゃんと取ったコインだけが消えていますね。
では次に、条件を「PlayerはCloudと衝突している」に変えてみます。
Cloudとは、飾りとして置いている雲のオブジェクトのことです。

（↓GIFが動いていない場合クリックすると動くかもしれません）

全部のコインが消えましたね。
ここから分かることは、オブジェクト名を指定しつつ、その参照先インスタンスは文脈によって変化しているということです。

前者のイベントでのCoinは、「Playerと衝突したインスタンス」でした。
一方、後者のイベントでのCoinは「全てのインスタンス」になっています。

つまり、オブジェクトを指定したように見せかけていますが、その実態は複雑なインスタンス指定を隠蔽したものだったわけです。
見かけは簡単になっていますが、私はこの挙動が非常に気持ち悪いと感じています。

これに拍車をかけてつらいのが、「インスタンスを個別に指定して参照できない」ということです。えっ…なんで？
普通ゲーム作るときってインスタンスの参照できるように配列にインスタンス突っ込んだりしますよね？

えー配列はまだ扱えません。
というか配列が使えるようになったところでインスタンスの参照は代入できないのでね。えー…。

例えば今回のロッカッケーでは六角形のタイルの表示にBaseTileというオブジェクトを使用しています。
見た目が変わったり矢印を出したりかなり複雑な挙動をするのですが、イベントの中でどのタイルが参照されているのか全くわかりません。勘ですかね？

基本的に条件があればその条件で使われたインスタンスが、親イベントがあれば親イベントで参照されているインスタンスが使われる気がしますが、正直わからないです。地獄。

インスタンス毎にidが振られて参照できたりするようになればだいぶマシになると思います。改善希望です。(2021/3/8時点)

ちなみにそれまではインスタンス変数にidっぽいものを入れて「インスタンス毎に繰り返し」を使ってインスタンス変数をチェックしていく方法が疑似的に使えると思います。
なんで使いたいたびに繰り返さないといけないんだ…。

2. 時間管理がつらい

コードからゲームを作ったことがある人は分かってもらえると思うのですが、コードから作ると毎フレーム1つの関数の中に書いた処理が全部実行されますよね。
GDevelop5もあのような仕組みで、「イベント」に書かれた内容が毎フレーム実行されます。

これはScratchのようなビジュアルプログラミング言語に親しんでいた人たちにとっては中々慣れないのではないでしょうか。
Scratchの優秀なところは、非同期に書かれたプログラムを逐次実行してくれるところです。
右に行って、1秒待って、左に戻る、なんてScratchなら3行で書けるでしょうが、GDevelop5では地獄のようなものを組まないといけないわけです。
右にアニメーションして移動するなんていうのはTweenビヘイビアというのを使えばまだマシになるのですが、何秒待つというのは本当に面倒です。
待機させる仕組みが無いのです。なんで…？？
調べた感じ変数にフレーム数を入れるだとか、シーンタイマーを使うだとか、Tweenで疑似的に待たせるだとか、色々試されているようですが、正直どれもしっくりこないし、しんどいです。
全部つらい。Scratchのほうがずっと簡単で高度なものを作れた気がするよ…。

他にもいろいろ細かい不満がないわけではないですが、仕様レベルでつらいのは大きくこの2つだと思います。
まだ積極的にアップデートが続いているようなので、GDevelop6でも来たらまた触ってみようと思います。

ロッカッケーのこれから

オンライン対戦ができるようにしたいです。
WebSocketの使い方とかも少しずつ覚えてきたので、PixiJSとかと併せて使ったら実装できそうです。
あと今回GDevelopの仕様につまづいて燃焼不良となっている部分が多いので、挑戦も兼ねてUnityとかでも改めて実装してみたいです。

とにかく今回、頭の中で考えて面白いか不安だったものを他の人に面白いと言ってもらえて嬉しかったです。
新しい技術に触れる良いチャンスでもありますね。ありがとうございました。

オンラインスナック街「星くずアーケード」をつくったよ！

2021-03-09T01:13:55+09:00

「星くずアーケード」というサイトを作りました。いろんなお店が並ぶアーケード街のイメージです。
https://stardust-arcade.com/

現在、私がZOOMでやっているオンラインの昭和カルチャースナック（Twitterで集客、Paypalで清算）が、ぼちぼちうまくいっているので、同じモデルで気軽にイベントやスナックを興せる人が増えたらいいなと思って、サイトだけ作ってみました。

大きなプロジェクトに入ったり、プラットフォームに依存したりせずとも、自分のスキルやコミュニケーションでお金がもらえる、というのを体験する人が増えたらいいなと思っています。

諸々つくるのも初めてだったのですが、よきメンターのおかげで形にできました。本当に、本当にありがとうございます～！！そして今日はもうweb１weekの締め切りから1週間以上たってますね…。Helloworldレベルでいいって…書いてあったから…。真に受けちゃいましたよ…。無課金ユーザー、初期アバター、無装備状態ですが…。お手柔らかに…。

必要最低限の情報しか載せられていませんが、実際に友人のお店を起こすお手伝いをして、役目を果たせればいいな。自分のお店もがんばりま～す。
お店立ててくれる方はこれまでご縁あった方々で、目星ついているのですが、現在は仮店舗状態なので、詳細早く載せたいです！サイトももっとつよつよにしたいです！

MarkdownファイルをブラウザでLive Reloadしながら編集する（Nodemon + BrowserSync）

2021-03-08T21:12:09+09:00

完全に遅刻投稿ですがこっそり投稿します…

会議の議事録、タスク管理、仕様の細かい備考など、メモというものは仕事に欠かせないものです。

メモの取り方は人それぞれですが、私は好んでMarkdown形式でメモを取ります。
Marddown形式であれば、Vimでシンタックスハイライトが効きますし、後々何かしらのブログサービスに記事として残す場合にそのまま貼り付ければ大概フォーマットに沿った形式となります。もしくはMarkdownはプレーンなテキストであり、それを何らかの形式に変換することが可能な場合があります。何らか、というのは全く想定していないのですが、何らかの形に変換したいときが来たときにスムーズに対応できる、という理由からとても心が安らぎます。話は逸れますが、同様に音楽ファイルなんかも可逆圧縮形式が好きです。今のところ実際に「何らかの形」に変換したことはないんですが。

しかし、Markdownテキストは通常のエディタで見ると、一定のフォーマットに則ったただのテキストです。

# 見出し1
## 2021/3/7
本文

↑こんな感じです

ある程度の俯瞰しやすさはありますが、更にもう少し、分かりやすく見たいというときがあるのです。つまり、MarkdownテキストをHTMLで展開し閲覧したい。そんなときのために、MarkdownファイルをWebブラウザで確認しながら編集できる環境を作りました。

できあがったもの

機能構造

仕組みとしては、

任意のHTMLファイルをローカルサーバーで監視し、Webブラウザで閲覧する
任意のMarkdownファイルが保存 / 編集されると、それをもとにしたHTMLファイルを生成する
HTMLが生成されたことを検知し、ブラウザをリロードさせる

という単純な構造です。

Express（Node.jsのフレームワーク）を使えばその機能だけで作れてしまうらしいのですが、それだと利用するライブラリに無駄が多く勉強にもならないため、少し細かいスコープで機能を実装しました。といっても全てライブラリの機能で実現してしまったので勉強も何もないのですが。

以下、各種機能の実装方法です。

1. 任意のHTMLファイルをローカルサーバーで監視し、Webブラウザで閲覧する

これはBrowserSyncというライブラリで実現しました。

Node単体でも実現できるのですが、BrowserSyncは任意のファイルをserveし、ファイルの変更を検知するとブラウザをLive Reload（自動更新）することができます。

ちなみに私はブラウザの自動更新をHot Reloadと呼んでいたのですが、Hot ReloadはLive Reloadとは異なり、アプリケーションのstateを失わずに自動更新する機能のことのようです。

https://github.com/BrowserSync/browser-sync
https://stackoverflow.com/questions/41428954/what-is-the-difference-between-hot-reloading-and-live-reloading-in-react-native

2. 任意のMarkdownファイルが保存 / 編集されると、それをもとにしたHTMLファイルを生成する

これはNodemonとmarkedというライブラリで実現しています。

Nodemonは任意のJSファイルを立ち上げ、任意のファイルの変更を検知するとJSファイルを再実行するライブラリです。

Nodemonで実行するJSファイルでは任意のMarkdownファイルを読み取ってHTMLファイルを生成する、という処理を行い、Markdownファイル編集されるたびにNodemonでJSファイルを再実行され、最新のMarkdownファイルからHTMLが再生成されるという流れになります。

（初めはこのNodemonでLive Reloadができるかと勘違いしており、無駄に時間を取ってしまいました）

markedはmarkdownテキストをHTMLに変換します。

markedはサニタイズをしないとXSSの脆弱性を持つためリポジトリ上でオススメされているDOMPurify（もしくは他のライブラリ）でサニタイズを行う必要があります。

（今回のように自分で作ったファイルを自分で開く分には気にしなくて良いと思います）

https://github.com/remy/nodemon
https://github.com/markedjs/marked

3. HTMLが生成されたことを検知し、ブラウザをリロードさせる

これも先に述べたBrowserSyncというライブラリの機能を使います。

どのファイルを検知するかは予め設定ファイルを書いておく必要があります（もしくはCLIでの実行時に引数で指定する必要があります）。

以下セクションにて、ファイル全体の細かいコードを書いていきます。

ファイルの全体像

- dist/
- node_modules/
- public/
  - index.html
  - index.css
- app.mjs 
- bs-config.js // BrowserSyncの設定ファイル
- nodemon.json // Nodemonの設定ファイル
- package.json
- yarn.lock

.mjs という、人によっては奇妙な拡張子がありますが、今回利用したのはこれを使うことでどういう考慮をする必要があるか（もしくは考慮をする必要がなくなるか）を確認するためです。様々なデメリットを考慮すると .js の方が良いと結論づけます。以下に .mjs にまつわる背景が記述されていますが、正直今の私にとっては「そうですか」という感想しか湧きませんでした。つまるところ、よく分からなかったです、すみません。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules

app.mjs

import marked from 'marked';
import fs from 'fs';

const headHTML = `
  
  
  
    
    
    Markdown Browser
    
  
  
`

const footHTML = `
  
  
`

// 再実行されるたびにファイル作成処理が走るので、差分がない場合は無視したい
fs.readFile('public/index.md', 'utf-8', (errRead, data) => {
  if (errRead) { throw errRead; }
  const bodyHTML = marked(data);
  const allHTML = headHTML + bodyHTML + footHTML

  fs.writeFile('dist/index.html', allHTML, function (errWrite) {
    if (errWrite) { throw errWrite; }
    console.log('build dist/index.html from markdown');
  });
});

// アクセスするたびにファイル作成処理が走るので、差分がない場合は無視したい
fs.copyFile('public/index.css','dist/index.css', (err) => {
  if (err) { throw err; }
  console.log('copy public/index.css to dist/index.css');
});

やっていることは単純で、実行された際に、public/index.mdを読み込み、それをもとにdist/index.htmlを生成します。

ついでにpublic/index.cssファイルもdist/index.cssとしてcopyしています。

nodemon.json

{
  "ignore": [
    ".git",
    "node_modules/**/node_modules"
  ],
  "watch": [
    "public/index.md",
    "public/index.css"
  ]
}

Nodemonの設定ファイルです。

これも非常に単純で必要ないファイルを無視し、public/index.mdもしくはpublic/index.cssに変更があった場合にapp.mjsを再実行する仕組みとしています。

bs-config.js

module.exports = {
    "watch": ["dist/index.html"],
    "server": {
        baseDir: "dist",
        index: "index.html",
    },
    port: 5000,
};

BrowserSyncの設定ファイルです。

これも単（以下略）

package.json

{
  ...
  "scripts": {
    "start": "concurrently 'yarn:start-*'",
    "start-nodemon": "yarn nodemon app.mjs",
    "start-sync": "yarn browser-sync start --config bs-config.js"
  },
  ...
}

npm-scriptsでNodemon用のサーバーとBrowserSync用のサーバーを並行で起動させています。

concurrentlyはnpm-scriptを簡単に記述するためのライブラリで上記のように start-* と書くことでprefixが start- のコマンドを簡単に指定することができます。

（おそらくもっとトリッキーな使い方ができそうです）

https://github.com/kimmobrunfeldt/concurrently

この状態で

$ yarn start

とすると、自動的にブラウザのページが開きます。

index.cssはお好みで設定してください。

表示の見た目が自分好みになれば、メモがもっと楽しくなるはずです。

多分ね。

振り返り

BrowserSyncのProxyモードで簡単にできるかと思ったのですが、ProxyモードだとProxyしている場合Live Reloadはされないようでした。こちらの設定ミスかも？また、BrowserSyncではきちんとしたHTMLではないとLive Reloadされず、index.htmlにプレーンなテキストを書いても上手く反映されなかったためそこでかなり時間を取られました。本当はLive Reloadを自分で実装したかったのですが、力量が足りず断念。単純に基礎知識が足りないのでnpmパッケージのコードリーディングが全くできませんでした。WebSocketを使えば可能だとは思うので、まずはWebSocketの基本から学ぶことにします。拡張子ごとのシンタックスハイライトも入れたいですが、さすがにライブラリで良いかな……。メモの作成や一覧表示なんかもCLI上でできるようにしたいので、そこができればツールとして公開したいですね。みなさんもオレオレメモ環境を作ってどんどんメモ & 知見を増やしていきましょう。

備考

書いて気づいたんですが、これ提供してないのでサービスでもなんでもないですね。さらにいうとWebという点でも怪しいですが、もう少し最低限の機能追加をしたらパッケージとして公開します！という意気込みを以てご容赦ください。

クッキークリッカーメーカー

2021-03-08T01:01:23+09:00

増やすの代名詞でもある(?) クッキークリッカーゲームを増やせたら嬉しいな、と思って作成しました。

サービスはこちら → https://cookie.dayo.app/

説明

右上の「投稿」ボタンからクッキークリッカーもどきのゲームを投稿できます。ゲームが投稿されると、トップページのカウントが一つ増えます。

できたこと

ゲームの投稿
「もっと見る」ボタンによる無限スクロール
リアルタイムに増減するゲーム総数カウント

できていないこと

各ゲームの背景色を反映させる
クリック数をローカルストレージに保存する
シェア機能
たくさん

使ったもの

Firebase
Next.js
Vercel
tailwindcss
Twemoji
Emoji Mart

感想

web1weekに参加すると、作ったサービスが増える。(嬉しい)

みんなのメッセージを集めて増やして元気玉を膨らませ…たかった

2021-03-06T18:02:25+09:00

https://script.google.com/macros/s/AKfycbwPkXzLjAd6xyda1oG7cOJ_HWXAdFwDa_wiq2EPip_m6w7hDIoBXI7ZzAS9kv1PgLBc/exec

「ユーザーが送った送信したメッセージで元気玉を膨らませたら面白そう」というアイディアからつくったアプリです。Google Apps Script(GAS)で作りました。元気玉知らない人はググってください。

応援メッセージを入力して送信したらメッセージがサーバー側で保存されて、みんなが送ったメッセージがブラウザ上に表示されます。本当は送信したらすぐにブラウザの表示に反映させたかったのですが、うまくいかなかったので送信後に「更新してメッセージを確認する」ボタンを押してブラウザを更新してください。

本当はメッセージが増えるにつれて元気玉を膨らませたかったのですが、メッセージの送信と表示の処理をつくって力尽きました。メッセージは上限5個しか表示されません。

※ブラウザでGoogleのアカウントにログインしていると、うまく動かない場合があるようです。お手数ですがログアウトしてもらうか、Chromeだったらシークレットモードで開くなどしてください。

GASつかってLINEボット作った軌跡とかをブログで書いたりしてます。

映画と旅行とエンジニア

お時間あったら覗いてみてください。

PUIPUIモールス信号 feat. iPad ~脱無機質なモールス音~

2021-03-03T01:12:26+09:00

https://csb-wplrk-5g16c5s30-yoshisansan.vercel.app

文字をあのPUIPUIで人気急上昇中のモルモットの鳴き声でモールス信号に変換するサービスを作りました。（フリーで良い音あった）

バックサウンドとしてPUIPUIモルカ○ーを流し聴きしていたところ鳴き声に癒し効果を覚えたため世界にPUIPUI音を布教（増やす）することを決意。

パソコンが壊れていて修理に出しているのでiPad無印を使ってReactで頑張って作りました。

インプットに問題がありしんどくて途中で投げ出しそうになったのですがCodeSandBoxからVercel使ったら楽にデプロイできることを知り形だけでも残そうと思い諦めませんでした。
そして深夜にモルカー並にさまざまなツッコミを残した状態でローンチするに至ります。

画像から塗り絵を作れるサービス「塗り絵ツクール」をリリースしました！

2021-03-02T23:03:36+09:00

「増やす」ということで、塗り絵を「増やせる」と無理やりな解釈をしたサービスをリリースしました。

塗り絵ツクール
https://nurie-maker.com/

使い方

画像をアップすることで塗り絵を作成するサービスです。

画像を選択して....

塗り絵にするor 塗り絵に変換して公開する
を選びます。

作った画像はシェアしたり保存できます。

ちなみに塗り絵に変換して公開する、を押したとしてもその画像が18禁に抵触するものである場合は自動で弾かれるので公開されません。笑
（個人保存やシェアは可能）

皆が作った公開画像を見て楽しんだりもできます。

実装方法＆期間

openCVを使って画像処理
それをAWSを使ってAPI化
ついでに18禁フィルターをAmazon Rekognition Imageを使って入れました
フロントはNuxt.jsとtailwind cssで組んだので楽ちん
ホスティングはVercel
2/27から作り始めて3/2に完成でした。web1week間に合わんかった..

ちなみにAPI化とかわからなさすぎて同居人がほとんど組んでくれたので、私は実質フロントとデザインぐらいしかしてないです。笑

同居人がそのへんのロジックまとめて書いてくれたんで、ロジック気になる方はこちらをどうぞ。

動的OGPで少しハマったんですが、松田さんをはじめ様々な人に助けてもらってなんとかできました。

また、デフォルトのトップページのOGP画像に関しては個人開発仲間のmikkameさんが作られたサービスを利用させてもらいました！

感想

web1weekの締切には間に合わなかったんですが、参加できて楽しかったです。
また参加しようと思います！

その他見つけた情報

2021-03-02T21:22:26+09:00

投稿はされていませんがTwitter等でハッシュタグを使って開発されている方を見かけたので観測範囲でリストアップしておきます。

#web1week最低限だけど出来ましたー- 画像は投稿できない- まだ退会機能作ってないので利用する人は注意して下さいhttps://t.co/hrAuXuL9Dz pic.twitter.com/ZTNxj4nBF2
— せせり（大岡まひろ）@個人開発 (@sesere115) February 27, 2021

今日はAmong Usの参加者を選び、選ばれた人に通知するBotを作りました#web1week pic.twitter.com/QjiWKrxzl8
— Terai Shogo (@krpk1900_dev) February 28, 2021

世界にPUIPUIを増やすべくPUIPUIモールス信号のサイトを作りました🐹🚗文字を入力するとPUIPUIモールス信号に変換してくれますhttps://t.co/coJnDAs7Si #PUIPUIモールス信号 #モルカー #web1week @dala00 pic.twitter.com/DFdboAVlWJ
— よしむ🇹🇭チェンライでミュート生活 (@akifumiyoshimu) February 28, 2021

コントリビュータが「増える」enjoyoss.com を作りました

2021-03-02T20:07:34+09:00

https://enjoyoss.com/

PRに対しては
こんな感じの表彰状を。

Issueに対しては

こんな感じの#bosyuっぽいやつ画像を生成してツイートできるツールです。

技術的には拙作のhttps://ogp-builder.com/ を使用しています。

LP、UI、ドメインは金で買って解決しました。収益せいがないサービースなので完全な赤字です！助けてください！。寄付はここからできます！

MEASUREEEMEASUREEEエンジニアの評価を相互投票で評価し、数値化するサービスです...

2021-03-02T19:39:14+09:00

MEASUREEE

エンジニアの評価を相互投票で評価し、数値化するサービスです。Hackされにくい設計を目指し、数値の大きさを信用の大きさとなることを目指し、誰の情報発信が正しいのかということを可視化することを目指しています。

絵文字を入力しがいのある『falling emojis genarator』

2021-03-01T00:56:15+09:00

サービスはこちら↓
https://aiandrox.github.io/emoji-typing/

is 何❓

入力した絵文字が落ちてきます。
絵文字は下にどんどん溜まっていきます。
たくさん入力して絵文字の名前を覚え、絵文字に溺れましょう🌊

ちなみに背景はカンペなので、何を入力しよう〜〜って人はこれをとりあえず全部打つといいと思います。

Twitterシェア機能を追加できなかったので、頑張って積んだ方はスクショで見せてください……私が見たい……。

ちなみに、個人的に好きなアイコンの😇は「innocent」🤔は「thinking_face」🥺は「pleading」で出ます。

使用技術💎

ライブラリは偉大だと改めて感じました。巨人の肩には積極的に乗っていきたい所存。

メタタグ作成に便利だった↓
- Emoji Favicon Generator
- Meta Tags — Preview, Edit and Generate

やり残したこと😢

~~空白・アンダースコア、ハイフンを区別しないようにする~~
背景を固定する
~~「pien」で🥺を出す~~

いつかやります。多分。

Twitterフォロワーとお喋り『GoGoHouse』

2021-02-28T23:13:25+09:00

音声SNSが熱いのでTwitterフォロワーと音声トークを楽しめるサービスを作ってみました。

※3/1 API Keyを開発者アカウント登録済みのプロジェクトのものに入れ替えたのでTwiiter連携が復活しました

https://gogo.house/

『フォロワーの声を聞き、会話を楽しみ、親しくなる機会を増やす』

コンセプトなど

疲れないやつ。Twitterのアカウントに紐づけられるのでTwitterの人格で参加できる
1対1では気が引ける人も参加しやすいようにルーム方式
ルームオーナーがルームに入れるメンバーの管理でき、マイクで発言する人を指名できて、聴くだけでもいいようなルールづくり
専用アプリを入れるのも面倒なのでブラウザで動くやつ。できればTwitterアプリ内ブラウザで動くとよい
タイムラインのリンクを踏んで5秒で参加できる（利用規約は読んでください＞＜）
他のユーザーの音声の録音は禁止

たまたまwebRTCという、ブラウザで動いて端末同士が直接つながって音声や動画を低遅延でやりとりできる技術があり、サーバー代もかからないので今回それを利用しました。ちなみにエンジン部分は自作で商用ライブラリ不使用。中国のサーバーを経由したりすることはありません。通信は暗号化されています。

スクリーンショット

画面は開発中のものです

ルーム内

ルーム管理画面

ドア（入口）

詳しくはサイトのヘルプ https://gogo.house/help をご覧ください。

名前の由来

Clubhouse、Discohouseときて次は何だ？ゴーゴーだ！
https://ja.wikipedia.org/wiki/ゴーゴー喫茶

知らない人はお父さんやお母さんに聞いてみてね

技術

NuxtとFirebaseとwebRTC。今回新しく挑戦したのはTypeScript。
余力があればTURNサーバーも立てたいです。

サイト

~~web1weekの期限にあわせて、オープンβテストを開催していますが、Twitter連携ができなくなっていてご迷惑をおかけします。~~
3/1 復旧しました

https://gogo.house/

『ふやすを増やすゲーム』https://gamingchahan.com/fuyasu「ふ」や...

2021-02-28T21:54:27+09:00

『ふやすを増やすゲーム』

https://gamingchahan.com/fuyasu
「ふ」や「す」を増やすゲームを作りました。「ふ」と「す」の合計が100匹を超えるとクリアです。

【素敵な出会いを増やす！90%の確率で運命の相手（相性の良い人）を選ぶ方法を教えるアプリ】

2021-02-28T21:14:17+09:00

できたー！！！

【素敵な出会いを増やす！90%の確率で運命の相手（相性の良い人）を選ぶ方法を教えるアプリ】

数学者による計算（最適停止理論）を用いて、出会った人の中から、運命の相手を選ぶ最適な方法がわかります。

■運命の相手を見つける。
https://love-web-app.herokuapp.com/

「（2/22～2/28）１週間でWebサービスを作るイベント - お題「増やす」」の投稿 - Crieit

web２week ＋2day かかってしまった。作りたかったもの権力を振りかざして人々からの愛...

作りたかったもの

陣地を｢増やす｣ブラウザゲームを作ってみた【GDevelop5】

作ったもの

遊び方

対人戦

開発に使ったソフト

なぜGDevelopにしたのか

GDevelopとは

GDevelop5のここがつらいよ

1. インスタンスの扱いがつらい

インスタンスの罠

2. 時間管理がつらい

ロッカッケーのこれから

オンラインスナック街「星くずアーケード」をつくったよ！

MarkdownファイルをブラウザでLive Reloadしながら編集する（Nodemon + BrowserSync）

できあがったもの

機能構造

1. 任意のHTMLファイルをローカルサーバーで監視し、Webブラウザで閲覧する

2. 任意のMarkdownファイルが保存 / 編集されると、それをもとにしたHTMLファイルを生成する

3. HTMLが生成されたことを検知し、ブラウザをリロードさせる

ファイルの全体像

app.mjs

nodemon.json

bs-config.js

package.json

振り返り

備考

クッキークリッカーメーカー

説明

できたこと

できていないこと

使ったもの

感想

みんなのメッセージを集めて増やして元気玉を膨らませ…たかった

PUIPUIモールス信号 feat. iPad ~脱無機質なモールス音~

画像から塗り絵を作れるサービス「塗り絵ツクール」をリリースしました！

使い方

実装方法＆期間

感想

その他見つけた情報

コントリビュータが「増える」enjoyoss.com を作りました

MEASUREEEMEASUREEEエンジニアの評価を相互投票で評価し、数値化するサービスです...

MEASUREEE

絵文字を入力しがいのある『falling emojis genarator』

is 何❓

使用技術💎

やり残したこと😢

Twitterフォロワーとお喋り『GoGoHouse』

音声SNSが熱いのでTwitterフォロワーと音声トークを楽しめるサービスを作ってみました。

『フォロワーの声を聞き、会話を楽しみ、親しくなる機会を増やす』

コンセプトなど

スクリーンショット

名前の由来

技術

サイト

『ふやすを増やすゲーム』https://gamingchahan.com/fuyasu「ふ」や...

『ふやすを増やすゲーム』

【素敵な出会いを増やす！90%の確率で運命の相手（相性の良い人）を選ぶ方法を教えるアプリ】

web２week　＋2day　かかってしまった。作りたかったもの権力を振りかざして人々からの愛...