「（5/18～5/24）１週間でWebサービスを作るイベント - お題「Like」」の投稿 - Crieit

Cats like the fish♪

2020-09-05T00:29:49+09:00

JavaScriptで作ったゲームですにゃ。マスターマインドと逆シューティング（避けゲー）をくっつけたら、こうなりましたにゃ。実質３日で２つ作ると、この程度のレベルですにゃ。９月のイベントでは、もうちょっとマシなものを作りたいと思いますにゃ。
※ここのルールとか、まだよくわかってませんにゃ。だめっぽい感じだったら、申し訳にゃいんですけど管理人さん消しちゃってくださいにゃ。
（ＩＥ版）（Ｃｈｒｏｍｅ版）

好きな楽曲について語り合うウェブサービス「musico」を作ってみました。

2020-06-01T20:25:30+09:00

はじめまして、promitsuと申します。

前回のweb1weekを横目で羨ましく観ていて、今度は絶対参加してやる！と意気込んでいたのですが、家庭の色々やら体調不良やらで一晩ぐらい開発して、その後全く手を付けられずにいました（汗）

昨日ぐらいから落ち着いたので、ガっと作って、勢いでドメインも取って公開してみました。

お題は「Like」でしたので、好きな楽曲についてあーだこーだ語り合えるサービスを作ってみました。

「musico | find track you like and talk about it」（何故か英語ｗ）
https://musi-co.fun

フリーワードで楽曲を検索して、その楽曲にLikeやコメントをすることができます。

機能

未ログイン時

楽曲を検索、またはコメントがある楽曲リストを閲覧できる
楽曲のコメントページを閲覧できる
楽曲のプレビュー再生ができる（ファイルがあるもののみ）
Spotifyで楽曲を聞くことができる（別タブでウェブ版を表示）

ログイン時

上記に追加して、
- 楽曲にコメントできる
- 楽曲にLikeできる

使い方

操作動画

開発で大変だった点

開発1日目以降、全く作業をすることができず、期間中の公開にも間に合いませんでした（くやしい）

工夫した点

音楽系のサービスなのでカラースキームやデザインをそれっぽく、かっこよくしてみました（自分なりに）
昨日の開発再開から早急に公開したかったので、必要最低限の機能で、一通り遊べるものにしました。
コメントが盛り上がるように、トップページに最新のコメントの投稿された楽曲のリストを表示するようにしました。

今後のアップデート

楽曲のSNSシェア（+個別ページとOGP）
コメントのSNSシェア（+個別ページとOGP）
Twitter認証以外のログインメソッドの実装
直近のコメント・多数コメントがある楽曲リストページ
諸々の細部調整・セキュリティ対応

web1weekに参加してみて

参加を楽しみにしていたにもかかわらず、期間中に公開することができずにとても詳しい思いでいます。が、作ることの大きなモチベーションをもらい、遅くなってしまいましたがとりあえず作り終えて公開することができたので良かったかなと思っています。
次はちゃんと期間内に公開できるように頑張りたいです。

『食べ合わせシミュレーター』を作りました初めまして、ないくと申します。サービス開発初心者です。...

2020-05-31T21:52:17+09:00

『食べ合わせシミュレーター』を作りました

初めまして、ないくと申します。サービス開発初心者です。
web1week初参加でした！
1週間遅れで、未実装の機能も多いですが、何とかお見せできる状態まで作れました。

今回のお題は「like」
自分は健康関連の情報を漁るのが好きなんですが、サプリメントを飲むときに飲み合わせ（食べ合わせ）を調べることが多いので、
食べ合わせをシミュレートできるサービスをつくってみました。

単品料理を食べるとき~~や、サプリメントを飲む時~~などに使ってみてください！
（食材選択にサプリメントの項目を入れ忘れていたので近いうちにすぐアップデートします笑）

シミュレート結果には主に栄養素の相性（吸収効率）のことが書かれています。
今後のアップデートで健康面での相性（有害物質を排出する、病気予防になる等）も追加していきたいです。

https://food-synergy-simulator.netlify.app/

使い方

1.食材を２つ選択
2.食べ合わせをチェック！ボタンをクリック
3.食べ合わせ相性タブをクリック
4.結果表示！

何か相性があれば表示されているはずです。
因みに相性結果は現時点で100種類以上あって、今後も増えていく予定です。

開発で大変だった点

食べ合わせの情報収集

実はweb1week前からこのサービスを作ろうと思っていて、食べ合わせの情報を集めていたのですが、情報収集だけで20時間以上はかかってると思います。
web1week後もアップデートしていく予定ですが、、、正直もう調べたくない...（泣）

相性の解説はなるべく詳しく書いているつもりなのでよかったら色々と組み合わせて見ていただけると嬉しいです。

工夫した点

相性結果をポケモン図鑑風にした

これ名案だと思うんですよ！（自画自賛）
最初のデザインよりは良くなったと思います。

以下はカードデザインの成長過程です。
途中おふざけが入っています。

今後のアップデート

・相性図鑑・栄養図鑑の作成
せっかく情報を集めたのに相性図鑑や栄養図鑑の一覧が見れないのは勿体ないので見れるようにしたいです。

・食材の各栄養素の表示
時間が足りず未実装なのでこれも今後実装します。
栄養の体内での働きやどの病気に効果的かなども解説に書きたいですね。

・栄養成分の追加
クエン酸や有害物質、アルコールなども栄養成分に含めて、この組み合わせは美容にいいです、有害物質の排出を促します、アルコールの分解を助けます、みたいな相性結果を追加したいです。

・各病気に有効な栄養素と食べ合わせの検索
各病気の予防・改善に有効な食べ合わせや栄養素を検索できたらこのサービスの使い道が増えそう。

web1weekに参加してみて

今回が初参加でしたが、参加してみて１週間がとても短く感じました。webサービス作るのって結構大変ですね...

大変だった分、ほぼ未経験だったVueとSCSSの知識がかなり増えて、良い経験が積めました。

こういった期間が決まったイベントは、普段の開発と違ってモチベーションが高くなるのでとてもいいイベントだと思いました！

また次回の開催があれば是非参加したいです！
次はちゃんと１週間以内に完成させます！...笑

【WebGL】3D空間でみんなで動画を見れるウェブサービスを作りたかったけれど惜しいところまで行ったので公開します。

2020-05-26T20:28:05+09:00

（はが）@mxcn3 です。 #web1weekに乗じて作りたいと思ってたサービスの開発を進めて見ました。

今回のテーマは好きということですね！インターネットの人とと繋がれる感じが大好きです！初めてインターネットに触れたあの感覚！そこで今回作ったものはこちらです！

スマホ・PC両対応です！
スマホの場合は２本指を器用に使うと動けます！！
Onfes
https://onfes.com

※ まだできてません！マジで不具合バグだらけです

サービスについて

Onfes（オンフェス）です。
このサービスのコンセプトの大まかな方針は、自由でわちゃわちゃできる夢のような空間を目指しています。

経緯

数週間前、3D空間で飲み会のツールを作りたいと考えていて、3D空間を作っていました。

作りたかったもの・構想

※ こちらは構想です
ウェブ上で誰もが自由で、わちゃわちゃできるもの

ライブ配信をするアプリからライブ配信者が配信ボタンを押すとWeb上で入れる空間が共有される

1vs1での音声、チャットによるコミュニケーション
商品の売買

この３つの機能を含んだウェブサービスでした。

実際一週間でできたもの

作ったものでも、不具合だらけのウェブサービスですがこちらの概要に勇気をもらったので公開したいと思います。
動きはするのでぜひ遊んでみてください。

Webサービスを1週間で作るイベント開催の概要

1週間しかありませんので、練習程度に作ったちょっとした1機能のものでも、不具合だらけでほとんど動かないようなものでも大丈夫です。逆に余裕があれば大作を作っていただいても大丈夫です。他の人とネタがかぶっちゃっても全然だいじょうぶです。また、1週間かける必要があるわけではないので1日だけ作ってみる感じでもOKです。

サービス

Onfes

できること

3D空間で動画を見ること
複数人で入って動くこと

今の所この２点だけです！！！

進捗具合としてはほぼかなり納得入っていませんが公開をするための練習として公開をさせていただきます！

作れなかったもの

UI/UX全般 (すみません >
魅力的な体験 ( いちばん大切な部分をまだ作れていないので、これから全力を出します）

技術

使用した技術については
3D部分
- PlayCanvas
マルチプレイ部分
- Photon JavaScript SDK
ホスティング先
- Firebase

で開発しています。

何に時間がかかってしまったか

ミドルウェアやライブラリを使っているのになぜ3D空間の中を動かすだけで時間がかかったのか？と思うのですが1番作成に時間がかかったのはここです。

ここの問題

ここはm3u8の動画を再生しているのですが、こちらを実装する際にいくつか実装に手間取りました。

Safari再生できない問題

Safariで再生できない問題があったのでその問題と解決策を共有します。

1. HLS.jsいらなかった問題

hls.jsというライブラリを使ってm3u8形式の動画を再生するためのライブラリをしようして動画の再生を行いました。

hls.jsを使用するためのコードはこんな形です。

  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
      video.loop = true;
      video.muted = true;
      video.autoplay = false;
      video.setAttribute("playsinline", "");
    });
  }

解決方法

  if (Hls.isSupported()) {}

スマートフォンの時にはcanplayのイベントが呼ばれなかったのですが、原因はSafariではHls.jsには対応していないけれど、そもそもvideoタグでそのままm3u8形式の動画が再生できるということでした。

2. テクスチャ表示されない問題

3D空間内の動画の再生方法は、PlayCanvasの公式チュートリアルを参考にしてたのですが。

動画テクスチャ
https://developer.playcanvas.com/ja/tutorials/video-textures/

これが、Safariだと、真っ黒になってしまい再生されませんでした。

結果的にこれはテクスチャのフォーマットをpc.PIXELFORMAT_R5_G6_B5 → pc.PIXELFORMAT_R8_G8_B8に変更することで動作しました。

本当に作りたいもの

Onfesは今の所、簡単な操作、動画視聴機能しかありませんが今後のアップデートで、SHOWROOMのようなイケてる空間VRChatのような機能を実装して、メタバースなVRでARでフィンテックな空間を実装してオンラインでフェスを行うならオンフェスとなるようなサービスを作ります。

今後もちょくちょくアップデートをしていきますのでよろしければこちらのツイッターのフォローしていただけると嬉しいです！

感想とか、活用方法があるよーとかあれば教えて下さい〜

はが - Twitter

感想

5/18 土曜日着手
5/23 土曜日配信者側のコードを書く
5/24 日曜日視聴者側のことを忘れてて急いで書き始める
5/25 月曜日勢いで公開しちゃってもいいかと思う
5/26 火曜日急いで記事を書く　←　今ここ

考えてたら時間が立ってた

3D空間の画面に表示されている綺麗な動画について

これは、Bick Buck Bunnyというクリエイティブ・コモンズの動画を使用していたのですが、これがあることでデバッグがめちゃくちゃ捗りました。

【webサービス】大学1年生、プログラミング歴2ヶ月、初めてのサービス開発【web1week】

2020-05-25T23:24:50+09:00

記事の閲覧ありがとうございます！デザインエンジニアを目指して勉強中の大学1年生のらいかです。

今回は1週間で"LIKE"をテーマにしたサービスを作る"web1week"というイベントに知り合いの大学1年生のエンジニアと参加したので、反省も込めて簡易的なレポートを書いていきたいと思います。

サービスの概要

今回のテーマである"LIKE"を聞いて、連想したのは最近の暗いSNSの雰囲気でした。自粛続きで、ストレスが溜まったSNSユーザーが好き勝手にあちこちでターゲットを見つけては発散している...

私はそんなSNSの雰囲気を少しでも明るくするようなアプリを作りたいなと思いました。そこで考えたのが、"あなたのスキの言語化をサポートする"サービスです！

機能としては
"友人、推し、家族、憧れ"としての4種類のスキ別にメッセージカードを用意し、名前とメッセージを入力して各種SNSにシェア出来るような物です。
(実際には画像を保存してSNSにシェアする機構がサーバーがないと実現出来なかったので、今回は断念しました)

実際に公開したサービスです。
リンク*スマホ推奨

感想

今回はペアでの開発だったのですが、僕もチームメンバーも個人での開発は初心者です。ましてや僕はプログラミングすら初心者(本格的に始めて2ヶ月程度)だったので、最初はとても不安でした。

しかし、僕→フロントエンド、メンバー→バックエンドと明確な役割分けが出来ていたので、開発は予想以上にスムーズでした。

ただやはり慣れていない点が多く、
・gitでのコンフリクトが多発する
・開発最終日でサービスのメインの機能が技術的に実装不可能となり、仕様変更を余儀なくされる
・途中で自分たちのサービスが何をしたいかわからなくなる
などの様々な問題が続出しました。特にコンフリクトがひどく、メンバーは最終日に3時間近くコンフリクトの解消に取られていました。(ありがとう！ごめんね！)

また、実際に使われるwebサービスということで、デザインも普段やる練習と異なり、ページ遷移や機能に合わせなければいけなく、そこも貴重な経験になりました。

まとめ

ノリでこのイベントに参加したのですが、オンラインで行うハッカソン的な感覚で非常に楽しめました！
簡単なwebサービスなら時間・金銭的にもほとんどコストがかからないので、みんなも一緒にやろう！
サービス開発たのしい！！！(^p^)

好きなものについて自由に語れるサービスTalkLikeをリリースしました

2020-05-25T18:02:05+09:00

好きなものについて自由に語れるサービスTalkLikeをリリースしました

開催期間から1日遅れてしまいましたが、Likeをテーマにしたサービスを公開しました！

https://talk-like.com/

機能はいたってシンプル。好きな作品のジャンルと名前、そしてどこか好きかを語って投稿するだけです。

投稿後はページが作られるのですが、そのURLには動的にOGPが設定されるのでいい感じにTwitter映えした投稿ができます。

どうして作ったのか

自分の好きなものについて語りたくても、SNSでは文字数制限があったり、ファンの人ばかりとは限らないわけです。

なので、好きなものについて自由に語れるマイクロブログのようなものを作ってみたいと思いました。

URLをTweetするだけなので、興味のない人は見なければいいし、OGPがあるので、興味がある人は惹かれてクリックして中身を見るはず。

目指している世界観

これを続けていくと、たとえば、「鬼滅の刃を好きな人はどんな点が好きなのか」を一覧で見れるようになると思っています。それってデータとして結構面白いなと。

分野も、ファーストリリースでは作品系だけにしますが、今後、Web技術とかもやってみたいなと思います。みんなが好きなプログラミング言語とその理由とか一覧で見たくないですか？

どう作ったのか

Firebaseの匿名認証で投稿可能にしていて、投稿後のページはSSRでFirestoreからデータを抜いて表示しています。GAEにデプロイしています。

https://qiita.com/mejileben/items/eaa125c18fd80e15f2db

悪用されるなどしたらログイン必須にしようと思いますがいったんこれでやってみます。SSRも、お金がかかったらやめるかもしれませんが、アフィリエイトリンクと相性がいい気もするので、もしワークしたらちょっとしたマネタイズも考えたいです。

いいねがもらえる画像生成器「水溜りの鏡」

2020-05-25T15:39:47+09:00

はじめまして個人開発をしていますさとといいます。
いつも参加させてもらっているハッカソン#web1weekのお題がLikeだったので、
いいねがもらえる画像生成器を作りました！

道路に水溜りが作れるアプリ
水溜りの鏡

自分のネタ帳から１週間で作れそうなものを選んで作ったつもりだったのですが、結局１週間で完成せず…
工数とか見積もるのってほんと難しい…😭

使い方

1. 写真を選ぶ

道路が写った写真をスマホのライブラリから選んでください
傾いた画像はうまく行かないことが多くって…
なるべく真っ直ぐな画像推奨です！

2. 水たまり画像ができるので

画像を保存したい場合は、スマホの方は長押し、パソコンの方は右クリックから画像を保存

3. 比較画像を共有

共有用の画像も作られるのでシェアしてみんなで楽しんでいただけると嬉しいです！

使っている技術

Firebase でホスティングとデータ保存
Firebase Dinamic Links
短縮URLの生成と同時に各種SNS用のOGPも生成してくれるのでとっても便利！
Cloud EndpointsでAPIの制限と認証
Cloud Run でバックエンドのAPIサーバー

感想

１週間しかなかったから、だいぶあらが目立つのですが、無事公開できてホッとしています！
最近新しいもの全然作れてなかったからとっても楽しかったです！
いっつも素敵なイベント開催していただいて、だらさんありがとうございます☺️

よかったら遊んでみてくださいね！

水溜り写真生成サービス
水溜りの鏡

無限にいいね出来るChrome拡張

2020-05-25T13:18:56+09:00

たった１度のいいねじゃ足りない

もっといいのに。
いいねボタンを10万回押しても、100万回押しても、表示されるのは「未いいね」
この世界は間違っている。

そんな貴方に捧げるChrome拡張「Infinity like」を作りました。
https://github.com/kin-mi/infinity-like

これで無限に愛を伝えられます。やったね！
※ この拡張はジョークアプリです。伝わりません。

きっかけ

nabettuさんの記事を見て、Chrome拡張開発用のテンプレートがあると知り、前々からチャレンジしてみたかったのでweb2daysで作ってみました。

やりたかった実装

最初は「いいね済」の要素を「未いいね」の要素に変えて、いいね数をカウントアップすれば出来るんじゃないかと考えましたが甘かったです。
というか、SPAなので簡単に書き換え可能だったらガチで無限いいねの送信出来ちゃうんですよね。そんな脆弱性は無かったです。
いいね数のみ監視して、変更前後で下がったらカウントアップする、みたいな実装にしています。
実際には、いいねボタンを連打しているのと変わらない為、問題無いはず。

ハマりポイント

Chrome拡張の開発自体はとてもスムーズに出来ると感じました。
ただテンプレートに含まれているwebpackプラグインのCopyWebpackPluginがアップデートされていて、その対応が含まれていないので初回ビルドで下記のエラーが発生しました。

Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
 - options[0] misses the property 'patterns'. Should be:
   [non-empty string | object { from, to?, context?, globOptions?, toType?, force?, flatten?, transform?, cacheTransform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)
ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.

　
config/webpack.common.js の該当部分を下記の様に書き換えて対応しました。

    // Copy static assets from `public` folder to `build` folder
    new CopyWebpackPlugin({
      patterns: [{ from: '**/*', context: 'public' }],
    }),

言い訳

カウントアップ出来た所で満足して他の所はテンプレートのママです。
アイコンはデフォルトだし、ツールバーをクリックすると謎のカウンターが表示されます。

あと、いいね1万超えのツイートは未対応です。
今後やる気があれば1万1, 1万2 〜となるように対応します。

それからストアに公開するには申請が必要なのでリポジトリで勘弁してください。
https://github.com/kin-mi/infinity-like
READMEも作ってないですが、クローンしてビルドしてchrome://extensions/から追加してあげれば動くはずです。

良き無限いいねライフを

次回こそは間に合わせます・・・

とっさのスピーチ力とか説得力を培うことのできる、A is like Bゲームを作りました

2020-05-25T08:48:52+09:00

https://crieit.net/posts/a-is-like-b

#30DaysSongChallenge に触発されて自由に 30 日間チャレンジカレンダーが作れるサービスを作った

2020-05-25T08:48:31+09:00

https://crieit.net/boards/web1week-202003/30DaysSongChallenge-30

ウェブサービス運営者同士でワイワイするサービス「Admin Guild」を作りました！

2020-05-24T23:59:55+09:00

どうもDiver Down LLC.のen30です。

web1weekで楽しそうにしている人たちを見ていたら気持ちが盛り上がってしまいだーすーと Admin Guildというサービスを作りました。

https://admin-guild.com

どんなサービス？

ウェブサービス運営者同士でGoogle Analyticsのデータを見てワイワイできる（予定）のサービスです！
お気に入りした(Like)サービスをウォッチしたりもできます。

いまのところ運営者ギルドのSlackメンバー限定で登録出来るようになっています。

まだ機能としては
- Slackログイン
- Google Analytics連携でサービス登録
- バックグラウンドでリアルタイムユーザ数を取得してランキング

程度しかなく、なんとかインターネット上にURLを公開するところまでやって終了時間まで滑り込んだ、という感じですがこれから諸々実装していきます。

どんなものを使ったか

僕は普段は主にRailsで開発しています。web1weekでは短期間で小さなサービスを作ることになるので、技術検証も兼ねて個人的にはかなり攻め気味の技術を選んでみました。（その結果まるで間に合いませんでしたが！）
なぜ選んだのかは書いていたら長くなってしまったので記事最後のおまけに回しました。

TypeScript
Next.js
React Native for Web（Expo）
Firebase
- Authentication
- Functions
- Firestore
Google App Engine

ハマったところ

`@expo/next-adapter` だとサーバサイドでも環境変数が使えない

Next.jsとExpoの連携には
Using Next.js with Expo for Web - Expo Documentation
を参考に @expo/next-adapter を利用しました。

@expo/next-adapter を使うと process.env が書き換えられてしまい、 getServersideProps 内などサーバサイドでも環境変数を自由に使うことができません。

Expoは基本クライアントのためのビルドをするものだと思うので、わからないでもないですがNext.jsと組み合わせて使う上ではちょっとつらいです。

とりあえずIssueをたてておきました
- With @expo/next-adapter, process.env is not available even on server side. · Issue #2156 · expo/expo-cli

いまのところ、サーバサイドで外部から何かを渡したいなら環境変数ではない方法で渡す必要があります。
今回はApp Engineに置いてGCPのSecret Managerを利用しました。

Firebase Authenticationではrefresh_tokenがとれない

サービスの性質上、ユーザがサービス上にいなくても定期的にGoogle Analytics APIで情報を取得したいです。ですがFirebase Authenticationだと refresh_token が取ません。

なので
- Google Sign-In for Websites で refresh_token も取得
- Firebaes Authentication の firebase.auth().linkWithCredential()

と組み合わせることで対応しました。

参考

感想

最近あまり新しいサービスを出せていなかったし、締め切りありの短期間でウォー！！！！と開発するのが楽しかったです。

楽しい企画をありがとうございました。

おまけ

技術検証の意図

Railsは少人数で最速でウェブサービスを立ち上げるには本当に良いフレームワークだと思っています。マシュマロではTurbolinks + StimulusというRails wayど真ん中の選定をしました。開発速度という意味ではいい選択だっと思っています。

とはいえ、触れる情報、環境の変化で
『Railsは次に作るサービスでも良い選択肢だろうか』
というのに少し迷いがでてきました。

マネージドサービスを組み合わせて作るサービス

いままで主にVPSを使ってましたが、最近はGCPにも結構触っています。
少人数（いまのところ一人）で開発していく上では、運用に時間的コストを払っていると全然回らないなという課題があります。
マネージドサービスの

自分での運用が必要な部分を減らしていける
スケーラビリティのことをあまり気にしなくて良い
セキュリティ周りのアップデートもサービス側がやってくれる部分が結構ある

というのは大きな魅力です。

Railsを使っているからスケールしないというようなことは、とんでもない規模になってもなかなか無いと思います。ただ、今Sidekiqを使っている場面でCloud Tasks, PubSub + Cloud Functionsを選んだり、サービスをうまく組み合わせて作ることで、もっと運用で考えることを減らせるのでは？という選択肢が見えてきました。

もちろんRailsとそういうサービスを組み合わせていくことも出来るわけですが、どう組み合わせていくかを考えていく必要があります。もしそちらの方向に舵を切っていくならRailsである意味があまり無くなってしまうかもれしれないと感じてきました。

React周辺の進歩へのキャッチアップ

Railsの中心にはHTMLがあります。一方JavaScript中心の世界もあり、進歩が目覚ましいです。目覚ましすぎてどうにも隣の芝が青く見えてきました。

以前アプリ☆メーカーを書き換えるのにReactを使いました。それなりに早い段階での採用だったので自分で考えなければいけない部分があまりにも多くなってしまいました。webpackのconfigは？ルーティングは？状態管理どうする？SSRは？等。その結果、一人で開発するのでは全然開発速度がでない、品質も低い、変化も早くメンテナンスコストも高い、という失敗をしてしまいました。その失敗から、インタラクティブであることに高い価値があるサービスだったり、開発チームが大きいのでなければ全然コスパが良くないなという印象でした。

なので、しばらくは距離を起きつつ横目にちらちらと進歩を見ていたのですが、最近の動きを見ていて、ここらでもう一度手を動かして触ってみたいなと思ってきました。

ネイティブアプリへの展開

これから作るサービスで、ネイティブアプリ展開もあるかもしれないなと考えているものがあります。

RailsをAPIサーバにして、WebのフロントにReactやVueを使うという選択肢はありますが僕はそういう使い方はHTML中心であるRailsの良さの半分を捨てることになるので、微妙かなと考えています。それならNext.jsの方がきれいに見えます。

Web寄りの自分を含む少人数で、Webもネイティブアプリもカバーしたいと考えたとき、React Nativeが魅力的に見えます。React Nativは軽く触った印象、style周りも標準のコンポーネントも結構いい感じだなと思っているので、React Native for WebでのWeb開発はどんな感じなのか、というのを試してみたいと思ってきました。

使ってみての雑感

まだ開発が進んでいなさすぎてなんとも言い難いですが、それぞれの印象。

TypeScript
- Stimulusと組み合わせても普段から一応使っているので、特に新たに受けた印象はありませんが、静的型付け言語は楽だなと思う場面は多いです。今回使ったものはどれも型定義が簡単に使えるようになっていたので、メリットは大きかったと思います。
Next.js
- きれいにデザインされていて好きです
  - ビルド, SSG, SSR等の設定を自分でしないで使える
    - get*Props でうまいことやってくれるのも
  - ファイルの構造 = ルーティングの構造というのもReact Routerみたいなものより好き
- Slackのcallback等、サーバサイドの処理をどこに書くべきか迷う部分がありました。 /api か getServersideProps か、今回はCloud Functionsもあり。
- Next.js アプリ自体をどこに置くかも少し迷いました。Cloud Functions自体に入れてしまうという選択肢もあったり。とりあえず考える時間もなかったのでGAEに置きました。
React Native for Web（Expo）
- 大体React Native通りに使えるのだなというのがわかり好印象です
- 今回使えたのはWebのみだったので、クロスプラットフォームで使おうと思ったときに出てくるつらみがあるのかどうかが気になります
- 普通のWeb開発に比べると、UI用のライブラリの選択肢が少なく楽をしづらい部分はあると思います
  - 今回はUI Kittenというライブラリを使いました。見た目はきれいだしコンポーネントも豊富、ドキュメントも結構整備されてます。ただ、ReactっぽくないAPIで微妙に人には勧めづらい印象でした。
Firebase
- 元々たまに触ったりしていて好きですが、より便利になっていっていますね。Local Emulator便利。

どれも使ってみて結構良いものだなと思いましたが、やはりRailsと比べると重要でない決断をかなり多くの場面でしないといけないようには感じます。学びながらなので比較しづらいですが、WebだけであればRailsの方が結構開発速度がでそうかなという印象です。

これから

ネイティブアプリへの展開までRails（Basecamp） wayに乗っかるのなら、HTMLを中心に起きつつもネイティブアプリもつくる
turbolinks/turbolinks-iosみたいな方向もあります。こちらでどの程度のものが作れるのかが気になってきました。

特に開発中のHeyは最初からネイティブアプリありでスタートするとのことなので、その方向でDHH, Basecampが何か新しい道を示してくれたりするのだろうかと少し期待しています。

また、Railsを使っていると最高に便利なのはActiveRecordで、他の選択肢でも同じような生産性が出せるのかというのは結構大きな懸念点です。Prismaや、Hasuraあたりも試してみたいところでしたが開発時間的に全然そこまでいけませんでした。

ひとまずは好印象なのでもう少し開発を進めつつ、RDB周りはどうかというのも探っていきたいと思います。

ウェブレター / あつ森の手紙ライクなもの書いて Twitter などでシェアするサービス

2020-05-24T23:54:50+09:00

『どう〇つの森』の手紙ライクなものを書いて Twitter などでシェアできるサービスを作りました🎉ぜひ遊んでみてくださいね～#web1week (とりあえず)完成！↓文章を入力して Twitter でシェアするとこんな感じになります！ https://t.co/SKgzwXcQsu #WebLetter
— hikaru🔥#100DaysOfCode! (@hikaru_firecamp) May 24, 2020

(1) 作ったもの

ウェブレター
https://web-letter.westa.io/

ウェブレターというサービスを作りました～
『どう〇つの森』の手紙ライクなもの書いて Twitter などでシェアするサービスです。

(2) Like 要素

あつ森の手紙ライク(Like)なサービス🎉
好き(Like)なメッセージを手紙に綴ろう💌

(3) web1week を終えて

(やばいwwまじでギリギリだ)

web1week を終えて、とにかく楽しかったです。皆さんの作品もまだ半分くらいしか見れていないのでこれからすべて巡回しに行きます (笑

ウェブレターもぜひ遊んでみてくださいね

ウェブレター
https://web-letter.westa.io/

(4) ソースコード公開 (追記:2020-05-26)

『ウェブレター』のソースコードを公開しましたー😎
ざっくり以下の要素技術を利用してまーす

TypeScript
NuxtJS (SSRモード)
i18n
Konva
CloudRun
Firebase/storage

GitHub
https://github.com/alclimb/web-letter

好きな場所を投稿する『ご近所LIKEマップ』を作りました！

2020-05-24T23:54:11+09:00

一週間で何かしらWebサービスを作るイベント、前回に続き参加させていただきました！

今回作ったもの

◼️ご近所LIKEマップ
https://local-likemap.site/localmap/

今回のテーマが「LIKE」ということで、Google mapのAPIを使って、好きな場所を登録し共有できるサービスです。
地図上をクリック（タップ）すると位置情報が取得できるので、
文章と任意で名前やURLを追記し投稿すると、そのマーカーが地図上に組み込まれます。
ユーザー登録も不要です。

※削除機能はありませんが、自由な掲示板みたく気軽に投稿してもらえればと思います！
※投稿の際にはタイトルも不要です、「なんか猫がいっぱいいる場所」とか、名前のない場所もいっぱいあるので。

散歩中にいい場所を見つけたら、現在位置を取得して、
目の前のいい場所を投稿できる感じです。

作った経緯

1weekイベントが開催されることを知り、何となくgoogle map api の情報を調べてたところ、結構簡単にいろいろできそうだなっと思い「地図を使ってなんかしよう」とは思っておりました。

コロナ自粛生活の中で多くの人が近所を散歩することが増えていると思うんですが、その中でうっすらと「テイクアウトやってるお店の情報がわかりづらいなあ」と思ってたり、
今まで知らなかった近所の美味しいお店とか、のんびりできる感じの場所を見つけることが増えたりもしました。

そういう、「近所の人に知って欲しい情報」を緩めにコメントと位置情報でシェアできるといいなと思って作りました。
もちろん、お店の中の人もPRに使ってもらえると嬉しいです。

技術的なお話

言語はPHPとJquery、Javascript、MYSQL
CSSはSASSでコンパイルしてます。

今回初めて使ったものとして、
・Animate.css
・Google Maps API
があります。
Animate.css はめっちゃ便利！このツイートで知りました！
ほとんどのアニメーションなら今後これでまかなえちゃいそう

Maps APIは登録自体は過去にしたことがありますが、カスタマイズを実際にしたのは初めてです。

Map APIはここがすごくわかりやすかったです！

詰まったところ

Google APIキーはURLで制限させているんですが、なぜかローカルではうまく表示されるのに本番ではされず。
URL指定ももれなくやっているのですが、、もう一つとってみるとうまくいけました。謎。

DBやテーブル作るのも、生のPHPで接続するのもちょっと久々なのでそれぞれ調べ思い出しつつで時間かかりました。

今後やるかもしれないこと

・投稿情報ごとにタイトル、名前をツイッターでシェアできるようにしたい
・やっぱり投稿によっては削除をしたいかもなのでユーザー登録をさせるかも
・URLにシンボリックリンクがうまく貼れず、変な感じになってるのでなおすかも
・既存のマーカーをカテゴリーやら住所とかから検索する
・画像投稿（重くなりそうなのでしなさそう）

気が向いたらやるかもしれないです。

感想

1週間でどんだけできるかってとこで没頭できてよかったです。
前回に引き続き、一斉にいろんな人がサービス作ってるのも刺激になりました。

是非とも使っていただけると幸いです。

カップ麺大好きタイマー

2020-05-24T23:43:07+09:00

カップ麺が大好きな人のためのタイマー

I like cup noodlesという人達のためにつくったカップ麺タイマーです。お湯を注いだら即座にスタートボタンを押してください。3分後にpush通知してくれます。

↓リンクはこちら
https://nifty-booth-fec24d.netlify.app/

※最初にPUSH通知を許可するか確認されます。一度許可すれば、2回目からはpush通知してくれます。

※スマートフォンだとpush通知はうまく動いていません…

使った技術

Vue.jsでつくって NetlifyでDeployしてます。この程度のアプリならフレームワーク使う必要もない気がするけど勉強のために使ってみました。プッシュ機能はPush.jsというライブラリを使っています。

つくった人

Wakkyという名前でUnityでゲームつくったりブログ書いたりしてます。Webアプリはほぼ初心者ですが、これから勉強して色々と役に立つアプリをつくっていきたいです。

普段の仕事は電気系のハードウェア設計で、回路図書いたり基板設計したりしてます。

技術記事から映画・本のレビュー、旅行記など書き殴っているカオスブログ↓
映画と旅行とエンジニア

参考にさせて頂いたサイト

タイマーの部分は、ほぼこちらと同じ内容を使わせて頂いてますm(_ _)m
Vue.js でタイマーのコンポーネントをつくる

Push.jsの使い方はこちらを参考にさせて頂きました。
手軽にPush通知を実装できるPush.jsをVue.jsで使ってみた

アプリ紹介画像をつくれる「アプリ画メーカー」をつくりました

2020-05-24T23:40:05+09:00

アプリ紹介画像をつくれる「アプリ画メーカー」をつくりました！
https://appgamaker.web.app

この記事のトップ画像のようなアプリ紹介画像をつくるWebサービスです。
会員登録不要で、サーバー側に画像含めデータは送られないので、気軽に使ってみてほしいです！

PCで開くとこんな感じです。 (モバイル対応もしていますので、是非サイトのほうにもアクセスしてください！)

お題(Like)との関連

個人でつくったWebサービスやアプリをリリースする際にTwitterに投稿する人が多いかと思いますが、そんな時できればたくさんリツイートやいいね(Like)が欲しいかと思います。僕はそうです。
やはり拡散されてユーザーが増えたり、自分のモチベーションアップにも繋がりますからね。

ということで、いい感じのデザインのアプリ紹介画像を手軽に作れれば、リツイートやいいねが貰いやすくなるかなと思い、このサービスをつくりました。

使い方

簡単な3STEPで画像の作成・保存ができます。

アプリのスクリーンショットとメッセージを入力します
好みの配置や色にカスタマイズします。様々な文字フォントが使えます！
作成した画像を保存します

作り方

今回バックエンド(API呼び出しやストレージへの保存など)はなしで、フロントエンドだけで動くものになります。

ホスティングにはFirebaseを使い、画面の実装はIonic(Angular), Konvaを使い、後はゴリゴリ書く感じです。

やりたかったこと

時間的な都合でできませんでしたが、以下のような機能もつくりたかったです。

背景色の表現をもっと豊かにしたかった
- グラデーションだったり、複数色だったり。
複数のスクリーンショットを登録したかった
- 一枚の画像に複数のスクリーンショットを載せたほうが情報量が多く、閲覧者にサービスの意図がより伝わる場合があるため
画像のぼかしをいれたかった

おわりに

ということで投稿時刻を見ていただいたら分かる通り、今回もギリギリ間に合いました。
あんまり技術的な冒険をしなかったので、次は冒険したいなーと思ってます。

「（5/18～5/24）１週間でWebサービスを作るイベント - お題「Like」」の投稿 - Crieit

Cats like the fish♪

好きな楽曲について語り合うウェブサービス「musico」を作ってみました。

機能

未ログイン時

ログイン時

使い方

開発で大変だった点

工夫した点

今後のアップデート

web1weekに参加してみて

『食べ合わせシミュレーター』を作りました初めまして、ないくと申します。サービス開発初心者です。...

『食べ合わせシミュレーター』を作りました

使い方

開発で大変だった点

食べ合わせの情報収集

工夫した点

相性結果をポケモン図鑑風にした

今後のアップデート

web1weekに参加してみて

【WebGL】3D空間でみんなで動画を見れるウェブサービスを作りたかったけれど惜しいところまで行ったので公開します。

※ まだできてません！マジで不具合バグだらけです

サービスについて

経緯

作りたかったもの・構想

実際一週間でできたもの

サービス

できること

作れなかったもの

技術

何に時間がかかってしまったか

ここの問題

Safari再生できない問題

1. HLS.jsいらなかった問題

解決方法

2. テクスチャ表示されない問題

本当に作りたいもの

感想

3D空間の画面に表示されている綺麗な動画について

【webサービス】大学1年生、プログラミング歴2ヶ月、初めてのサービス開発【web1week】

サービスの概要

感想

まとめ

好きなものについて自由に語れるサービスTalkLikeをリリースしました

好きなものについて自由に語れるサービスTalkLikeをリリースしました

どうして作ったのか

目指している世界観

どう作ったのか

いいねがもらえる画像生成器「水溜りの鏡」

使い方

1. 写真を選ぶ

2. 水たまり画像ができるので

3. 比較画像を共有

使っている技術

感想

よかったら遊んでみてくださいね！

無限にいいね出来るChrome拡張

たった１度のいいねじゃ足りない

きっかけ

やりたかった実装

ハマりポイント

言い訳

良き無限いいねライフを

とっさのスピーチ力とか説得力を培うことのできる、A is like Bゲームを作りました

#30DaysSongChallenge に触発されて自由に 30 日間チャレンジカレンダーが作れるサービスを作った

ウェブサービス運営者同士でワイワイするサービス「Admin Guild」を作りました！

どんなサービス？

どんなものを使ったか

ハマったところ

@expo/next-adapter だとサーバサイドでも環境変数が使えない

Firebase Authenticationではrefresh_tokenがとれない

参考

感想

おまけ

技術検証の意図

マネージドサービスを組み合わせて作るサービス

React周辺の進歩へのキャッチアップ

ネイティブアプリへの展開

使ってみての雑感

これから

`@expo/next-adapter` だとサーバサイドでも環境変数が使えない