「（7/19～7/25）１週間でWebサービスを作るイベント - お題「バケーション」」の投稿 - Crieit

みんなで共有できる条件付きグループ分けツール「グループよしなにくん」

2021-07-28T00:41:10+09:00

みなさん、バケーションといえば、遊びに行ったり開発をしたりするわけですよね！？
数人ならいいですが、人数が多くなると出てくる問題――いい感じの条件でよしなにグループ分けしたい、そう思ったことはありませんか？
そんなときにこれです。

グループよしなにくん

https://groovy-grouping.herokuapp.com/

……すいません、作りたいもの駆動です。
社内の勉強会でグループに分けることがあるのですが、いまひとつササッと決めきれませんでした。

分散させるための条件をつけたい
- いろいろなチームの人が均等になるようにしたい
- 1グループに経験がある人ばかり偏らないようにしたい
そのときどきで参加しない人もいるので、参加する人が自分でエントリーできるようにしたい

調べたところ、「条件付き」と「データを保存してくれる」を両立したサービスがありませんでした。なので作りました。
最低限の機能を実装することを優先したので、UIは非常にscaffoldです。あとで整えたいです。

使い方

トップページからチームを作成

↓
ユーザーを追加

↓
チーム名と同名のイベントが作成されているので、イベントページへGo

↓
条件を追加

↓
参加者を追加

↓
条件・参加者を入力したら、「グループ分けする」をクリック
↓
よしなにグループ分けしてくれます

ある程度データが入っているので、こちらから自由に遊んでください。
https://groovy-grouping.herokuapp.com/teams/jZz9cN6QKi5Q/edit

技術

Ruby 3.0.2
Rails 6.1.4
heroku
- JawsDB

最初はfirebaseを使おうかなと思っていたのですが、考えている間にテーブル構造がどんどん複雑になっていき、RDB以外で考えられなくなりました。そして、思いの外時間がかかりそうだったので、使い慣れたRailsで実装することにしました。
なので、技術的に目新しいことはないです。
MySQLの民なのでDBはJawsDBです。herokuは1時間でデプロイできるからまじで強い。

感想

グループ分けの部分がアルゴリズムな感じで、あまり経験がないので難しかったです。現状かなりゴリ押している気がします。
とはいえ、一応機能としては使えるものになっているのではないかと思います。多分。

現状はいろいろと使い勝手が悪いので、もう使いやすくしたいです。
ロジックを作るとフロントを実装するのが面倒になってしまうんですけど……。

夏休み中の暇つぶしに、Twitterトレンドを4コマで流し読み！「4f」

2021-07-27T21:35:44+09:00

4f - Twitterトレンドを4コマで！ -

https://four-frames.herokuapp.com/

4fとは

Twitterのタイムラインを読むほど時間はないが、世の中の直近で何が起きているかざっと見たいといった自分の欲のために作りました。4fは"4 frames"の略で、日本語では4コマです。あんまり多くのツイートに溺れてしまわないように、Twitterのトレンドを最小限のツイート数で理解しようというものです。トレンドにまつわる4つのツイートを抜粋して表示しています。

これをPC版では右左の矢印キーでトレンドを切り替えていけます。スマホ版では画面中央左右にある切り替えボタンで切り替えていきます（今後スワイプに対応予定）

技術

私自身、プログラミングは大学の授業でしかやったことないので、いろいろと試行錯誤中のため、Twitter/Github等から指摘いただけると喜びます。
・開発環境：VSCode + Docker on Mac
・稼働環境：Heroku
・GitHub：https://github.com/jnakajima1982/4f
・フレームワーク：Laravel
・Asana：やることリスト
・Figma：モックアップ用

・ER図：データベース・モデリング

ToDo

以下が今後やっていこうと思っていることです。
・TailwindCSSへの移行
・スワイプ対応
・ReactでSPA化
・トレンドページ自体を拡散するツイートボタン設置

感想

これだけやるのも時間がかかってしまいましたが、実践することで身についたことも多かったです。逆にこれをやりながら、Asanaなどの進捗管理ツールを外部公開できたら、このサービスを使っている人が今後のロードマップがわかるのになと思ったので、そういったサービスを作ってみようかと思っています。

スイカ割りゲームを作りました

2021-07-27T04:55:00+09:00

スイカ割りゲームを作りました

「バケーション」といえば「夏休み」、「夏休み」といえば「スイカ割り」、ということで、スイカ割りを楽しめるゲームを作りました。

大勢で集まることのできないこのご時世、ステイホームでスイカ割りを楽しめます。

ゲームはこちらから遊べます
→ https://okmr-d.github.io/suikawari/

ゲームの様子

ルールは簡単、動くスイカをタップ(またはクリック)して割るゲームです。

え？想像してたスイカ割りと違うって？ドンマイです。

簡単すぎると感じた方は、目隠しをしてお楽しみください。激ムズすぎる上、音が出ないので割れたかどうかわからないと思います。ドンマイです。

技術解説

スイカ(divタグ)をtransformで移動&回転させて壁に当たったら反射させてるだけです。特に canvas 等も使ってません。解説することがなかった。

ソースコードはこちら
→ https://github.com/okmr-d/suikawari

感想

本当はVRみたいに振ってスイカ割りしたかったんですけどね。。気付いたらスイカがブロック崩しみたいな動きしてました。音とかも付けたかったですが、今回はここまで！

友達や家族と簡単に日程調整ができるアプリ「ヒマしTell!」を開発しました！

2021-07-26T02:56:49+09:00

発想

友達と手軽に日程調整ができるアプリケーションを作成しました．

お題は「バケーション」ということで，「休暇　→ 友達と遊びに行く　→ 日程調整」と言うふうに連想し，アプリの作成を決定しました．

開発したWebアプリ「ヒマしTell!」

こちらが制作したアプリになります．スマホオンリー対応なのでPCで見る人はご了承ください．

ヒマしTell!

日程調整したい期間を入力すると下のようなチェックボックスカレンダーが生成できるので，そこにぽちぽち入力していくことで全員が暇な日が一目でわかります！！

サンプルのカレンダーを以下に貼っておきます．

サンプルで作成したヒマな日カレンダー

工夫点

工夫点は4つあります．

認証が必要ないため手軽
コピーボタンでURLをクリップボードにコピー可能
レインボーテーブルにすることで視覚的にチェックボックスがどの日に対応しているのか理解するのが容易
リアルタイムで他人の更新内容を反映
利用者ユーザに合わせたテーブルの表示

気になるのはおおよそ1，4，ぐらいだと思うのでそれについて書きます．

認証が必要ないため手軽

まず，やはり目に止まると思われるのは認証が必要ないというところだと思います．
「セキュリティガバガバやん」と思ったそこのあなた，その通りでございます．

触ってみるとわかるのですが，日程調整カレンダーを生成した時点で毎回使用者が誰かをアプリが聞いてきます．このタイミングでなりすましが簡単にできてしまいますね．

しかし，気心の知れたユーザの間でその心配は不要なのではないでしょうか？
本アプリでは，なりすましのリスクを取って手軽さを取ってみることにしました．

リアルタイムで他人の変更内容を反映

通常だと，ページをリロードしないと他の人の変更が見えないという問題があります．その時々で認識しているヒマな日が一致しないのは結構辛いものがあるだろうということで，リアルタイム同期機能をつけてみました．

このアプリはFirestoreを使っているんですが，onSnapshotというメソッドを使うととても簡単に実装できます．

やれることの凄さに加えて簡単だったのでびっくりしました．

感想

簡単に信頼のおける人と日程調整ができるアプリを作成しました．割といいものができたのではと思っているので，完成度を高めていきたいですね．

活動する時間を計測していたんですが，どうやらこの記事を書くのも含めて23時間ほどかかっているようです．orn...

短い時間でクオリティを出してくる人たちはやっぱりすごいなぁ，と思いました．

良ければいいねなどしていただけると嬉しいです．

Splay - Spotify のお気に入り音楽を Youtube プレイリストでシェアしよう

2021-07-26T01:41:06+09:00

今回の Web1Week でつくった Web サービスの画面

はじめに

転職前の有休中に web1week の期間が重なっていたので、バケーション中の身だから参加を決意しました。 なおテーマ的にはまったくバケーション関係ないウェブサービスを作って参加してみました (えっ

ちなみに知識不足で知らなかったのですが、GCP 使ったアプリを公開する場合は申請作業を行って承認してもらえないとテストユーザーしか利用できない状況になるようでした。

ということで未だ申請作業できていないので、現在製作者本人しか利用できないウェブサービスとなっています。。 🙃💥

いちおう Web サービスのデプロイ先は ↓ になります。
https://splay.nikaera.com/

GCP アプリの公開作業は空いた時間で挑戦してみる予定です💪
あとソースコードは適当なリポジトリにアップする予定です🛠️

上記については進展あり次第 Twitter でシェアりたいと思うのでご興味ある方は時々このアカ覗きに来てもらえたらと思います🛰️

つくったもの

私には普段 Spotify で音楽を聞いていて、気に入った音楽を Youtube で検索してその URL を Tumblr でシェアするという、気乗りしたときにだけやる趣味があります。

シェアするときはまとめて 10曲程度を選曲していたのですが、毎度 Spotify のお気に入りリストを漁って Youtube で検索して URL を Tumblr に貼り付けるという作業は割と面倒でした。

更に 1曲シェアる毎に Spotify と Youtube と Tumblr の画面を行き来するのも面倒だったので、まとめて Youtube のプレイリストで公開できたら良いなと考えました。

そのため、兼ねてから学びを深めたかった Go 言語の学習がてら、上記の個人的なニーズが満たせそうな Splay というサービスを作ってみました。

Splay の機能リストはざっくり ↓ の感じになっております🙋

Youtube のプレイリストの新規作成および編集ができる
Spotify のお気に入りリストの特定曲から Youtube の動画を検索できる
Spotify の楽曲検索機能を利用して Youtube の動画を検索できる
Spotify の楽曲は即時 Youtube 動画としてプレビュー可能で、気に入ればそのまま即プレイリストに登録できる

最後に挙げた機能が自分でサービスを利用してみて一番気に入った機能なのですが、現時点 (2020/07/26) では Splay の利用は製作者本人にしかできないため、利用時の様子を Youtube 動画としてアップしておきました🎥👀

https://youtu.be/tKX_Xrc1yUE

Spotify のお気に入りリストを目視で確認しながら、曲名とアーティスト名を Youtube の検索欄に入力して、該当動画の URL を手動でシェアするという手間が、Splay 使うとサクサクこなせそうなことイメージいただけたと思います多分... 🏃💨

おわりに

学習に割とフォーカスを絞って作ったので、ウェブサービス自体の機能は少なめに終わりましたが、不完全燃焼感があるのでもうちょい開発継続していきたいと考えています💭

あと本記事内では割と絵文字を多用しましたが、自作した Chrome プラグイン使ってました🙋

最後にこのような機会を用意してくれただらさんにちゃんと感謝して終わりたいと思います🙏✨

大切な休日の過ごし方は適当に決めよう！ガチャバケーションを作ってみたよ

2021-07-26T01:34:15+09:00

ガチャバケーション

「今日何しよ〜。」からのスマホをいじいじしていたら午前中がほぼ終わり、二度寝して起きたらもうすぐ本日終了で結局夜も眠れなくて無を過ごしたな〜って感じで休日を過ごしたことのある諸君に吉報です。

なんと、ソシャゲでガチャする代わりにバケーションガチャを回すことでなんかいい感じの朝昼晩の予定がランダムで出てきます。

普段なら絶対することのないことをやれるチャンスっっっっ！！

ガチャバケーションを今すぐ回そう！回すのです、さらば救われん。

@akifumiyoshimuより

バケーションしたいので部下に仕事全振りしたいと思います。

2021-07-25T21:44:17+09:00

はじめまして、しろです。
web1week初参加です( *´艸｀)

気軽につくるつもりが、
妄想ばかりが膨らみ過ぎて
連休全部注ぎ込んでしまいました！！！
jQueryとJavaScriptが言うこと聞いてくれなくて…

Webクリックゲーを作りました。

「バケーションしたいので部下に仕事全振りしたいと思います。」

https://games.nyaooon.com/vacation/

【ゲーム概要】

営業から渡される無理難題なお仕事を
すべて部下に丸投げ！！
寝ている人は起こして仕事をどんどん渡し、
１週間以内に完了してバケーションを楽しもう！！

部下の性能はガチャ？(★５とか)で決まります
バケーションを楽しめるかは、
あなたの指示と、部下ガチャの結果次第！？

【操作方法】

【あとがき】

はじめて作ったので、
ゲームバランスとか仕様とか無茶苦茶かもしれません。

Twitterもやっているので、
質問とか…バグ報告とか…お褒めの言葉とか！！
何でも気軽にお声がけくださーい！！！！

セミの音をミックスしてセミDJになるサイトを作りましたこんにちは。皆さん、夏休みはいかがお過ご...

2021-07-25T20:55:48+09:00

セミの音をミックスしてセミDJになるサイトを作りました

こんにちは。

皆さん、夏休みはいかがお過ごしでしょうか。

私は特にやることもないので家でダラダラと過ごしています。

クーラーをつけっぱなしで窓も締め切っているため、セミの声もほとんど聞こえてきません。

私にとって夏といえば常にセミの声が共にあったものですが、セミの声が聞こえない夏というのもなんとも虚しいものです。

外に出ればセミの声が聞こえてきますが、暑い中わざわざ外に出たくないですよね？

そこでみなさんが抱いている「家にいながらセミの声を聞きたい」という願望を叶えつつ、セミの音を組み合わせて自分の好みのセミサウンドを作り出すサイトを作りました。

https://sounds-of-japanese-summer-drbpwuc61-defunty.vercel.app/

タイトルに「DJ」という言葉を使ってしまいましたが、セミの声を逆再生したり再生速度を買えたりする機能も欲しかったのですが、時間の関係で作り上げられませんでした。

また、逆再生したとしても「ミン」が「ンミ」になるだけなので応用が効かないだろうと勝手にたかをくくりましたが、もしどうしてもンミンミ言わせたい方がいればぜひご一報ください。

話は変わりますが、オリンピックも始まったので、ぜひ海外在住の方にも日本の夏を感じながら中継を観戦していただければと思っています。

ただネットで調べてみたところ「日本のセミうるさくね？」という感想が多いように感じました。

非常に残念ではありますが、実際にアプリ上で全セミサウンドをミックスしたところかなりうるさかったです。

情緒もバランスですね。

また、セミ以外にも虫の声が色々入ってます、なんなら鳥の声も入ってます。

なので広義的には「生き物DJ」が適切なのですが、「セミDJ」の方が語感が良くて好きです。

かの有名な映画「えびボクサー」にもあやかっており、同じようにヒットしますようにと語感を揃えました。

ヒット作は語感で決まる、というのは誰かが言ったかもしれないし誰も言ってないかもしれないですが、アプリ名に意味を注ぎすぎないというのもたまには良いなぁとなんとなく思った夏休みでした。

趣味をシェア

2021-07-25T20:33:38+09:00

このプロジェクトはyCromaと共同開発しました！

バケーションといえば、趣味を極めるのにもってこいですよね！
でもみんなどんな趣味を持っているの…？
ということで、趣味を共有できるアプリを作成しました！

とにかく最小最速を心がけた結果、簡易的な掲示板のような機能にすることにしました。
会員登録なんてものはありません笑
みんなで趣味を共有して、自分の趣味を増やしましよう！！

inYourFreeTime~趣味の共有~

Twitterシェアされると喜びます！ぜひお願いします！:)

使用技術

GitHubのリポジトリのWikiに詳しく書きました！
バグや欲しい機能などがあれば、issueをいただければと思います！

frontend

Vue.js, Vuetify

backend

Express

感想

参加してみての感想です

t-sakurai816

はじめは僕はあまり時間がとれないので、「アイデアだしと、インフラの相談くらいしかコミットできないよ」という話だったのですが、このweb1weekが楽しすぎて、かなりの時間コミットしてしまいました笑
もともとAWSは利用していたので、AWSでサーバーレス構成を組んでみました。
ServerlessExpressを利用することでバックエンドのAPIを簡単に立てることができました！
Vueはほとんど触ったことなかったのですが、yCroma くんのフロントエンド実装を手伝う形でかなりVueについての理解が深まったと思います。
GitHubActionsも本格的に使ったのは初めてだったのですが、CI/CDツールの便利さを実感したプロダクトでした！

一週間でサービスを作るという体験がかなり良い経験になりました！また参加できたら嬉しいです +1

yCroma

サクッと作れるだろうと余裕かましていたら、実装は詰まるわ、ワクチンの副反応でうごけなくなるわで色んなことが起こったアプリ開発でした。今までは自由気ままに自分が作りたいものだけを作ってきたので、お題を元に何かを作るということは新鮮で楽しかったです。
1週間という短い時間の中で完成させなければならなかったので、利用するフレームワークは二人ともが利用したことがある「Vue.js」を採用。
半分以上はt-sakurai816に助けてもらっちゃいました（圧倒的感謝）。
お互いがお互いのためにアプリケーションの足回りを整備しあっていたのが、一番良かったところでした。

今度参加するときは、もっと余裕を持って完成させられるよう強くなっていたいと思います。

Contact us :)

GitHub

t-sakurai816
yCroma

Twitter

t-sakurai816
yCroma

気軽にバーチャル旅行をしよう

2021-07-25T20:33:29+09:00

こんにちは、Yuiです。
今回はバケーションがテーマなんですが、このコロナ禍ではなかなか旅行も行けないですよね。
せめてバーチャルでということで、気軽にバーチャル旅行ができるサービスを作りました。

https://travel-app-three.vercel.app/

ボタンを押すとその国の背景に変わります。

ちなみに背景画像に関しては全て私が過去に撮った画像を使ってます。
あと30ヶ国ぐらい追加できますが、あんまり増やしすぎるのも面倒なので、個人的に好きな16ヶ国にしました。

使用技術は、以下です。
- Next.js
- TypeScript
- TensorFlow.js（bodyPixを利用しました）

今回、作ってて思ったのですが、このアプリでNext.js + TypeScriptは明らかにオーバースペックすぎました。笑
ただ、TensorFlow.jsをNext.jsで使ってる例が調べる限りではなさそうだったので、個人的に良いテンプレができたんじゃないかなと思います。（今後使うかはさておき）

技術的なこと

tensorflow.jsのbodyPixでは背景をぼかしたり、色を塗ったりということは予め用意されている関数を使えばすぐにできます。
以下公式より。

const img = document.getElementById('image');

const net = await bodyPix.load();
const segmentation = await net.segmentPerson(img);

// The mask image is an binary mask image with a 1 where there is a person and
// a 0 where there is not.
const coloredPartImage = bodyPix.toMask(segmentation);
const opacity = 0.7;
const flipHorizontal = false;
const maskBlurAmount = 0;
const canvas = document.getElementById('canvas');
// Draw the mask image on top of the original image onto a canvas.
// The colored part image will be drawn semi-transparent, with an opacity of
// 0.7, allowing for the original image to be visible under.
bodyPix.drawMask(
    canvas, img, coloredPartImage, opacity, maskBlurAmount,
    flipHorizontal);

ただ、背景をくり抜く部分はなかなかに苦戦して、結構時間がかかりました。
最終的に、描画部分のcanvasの他にもう一つcanvas要素を用意してcanvasのdestination-outを利用したらなんとかなりました。

以下みたいな感じです。

  const drawimage = async (
    webcam: HTMLVideoElement,
    context: CanvasRenderingContext2D,
    canvas: HTMLCanvasElement
  ) => {
    webcam.width = canvas.width = webcam.videoWidth;
    webcam.height = canvas.height = webcam.videoHeight;
    const tempCanvas = document.createElement("canvas");
    tempCanvas.width = webcam.videoWidth;
    tempCanvas.height = webcam.videoHeight;
    const tempCtx = tempCanvas.getContext("2d");
    (async function drawMask() {
      requestAnimationFrame(drawMask);
      const segmentation = await bodypixnet.segmentPerson(webcam);
      const mask = bodyPix.toMask(segmentation);
      tempCtx.putImageData(mask, 0, 0);
      context.drawImage(webcam, 0, 0, canvas.width, canvas.height);
      context.save();
      context.globalCompositeOperation = "destination-out";
      context.drawImage(tempCanvas, 0, 0, canvas.width, canvas.height);
      context.restore();
    })();
  };

こちら詳細はqiitaに書いてるので、よければご確認下さい。
https://qiita.com/yuikoito/items/bb9c40bbb673e4f71abe

あとがき

TensorFlow.jsを使ったアプリ開発は顔にマスクをかけるアプリに引き続き２つ目でした！
機械学習など全くわからん私でも公式を読みながら実装できたので、非常にありがたいライブラリだなと思います。

ただ、どうしても人物の輪郭ぴったりにくり抜いて、とまではできなかったので、google meetの実装方法が気になる今日このごろです。

それでは、最後までお読みいただきありがとうございました！良いバケーションを！

おやすみの計画はフローチャートで作る。そんな時代。

2021-07-25T19:35:56+09:00

何を作ったか

簡単に簡単なフローチャートを作れる簡単なWebアプリケーションです。
https://mystifying-thompson-b2b252.netlify.app/

上のヘッダー部分にある[ADD BOX]からボックスを追加して、線を繋いでいくだけでフローチャートが作れます。

フローチャートの保存[SAVE]と読み込み[LOAD]にも対応してますが、バックエンドがないのでjson形式でガッツリダウンロードされます。

大してテストしてないので意図しないタイミングでエラーが出るかも知れません。すみません。

開発内容

期間

web1weekに参加すると決めた後、ビックリするぐらい堕落してたので、最終日の昼12時ぐらいから作り始めました。

技術

なんとなく、「フローチャートって作るの大変そう」ってイメージがありますが、一番大変な描画部分はReact Flowというライブラリがあるので、基本的にはこれに乗ってしまっています。

あとはノードやエッジをカスタマイズして、編集機能や保存機能、読み込み機能を作っていっただけです。

なので、今回のはReact Flowの技術調査という感じでサンプルアプリを作った、というのがイメージに近いかもしれません。

UIはMaterial-UIです。（いつも同じの使ってるので代わり映えしませんが……）

終わったらNetlifyに突っ込みました。

作り終わって

さすがにもう「ごめんなさい」しようと思ったのですが、なんとかやっつけられて良かったです……。

まだ全然web1weekの作品を追えていないので、
これから回っていこうと思います。

毎回主催していただいている @dala さんありがとうございました！

ロンバケのキムタクに挑戦！

2021-07-25T17:26:06+09:00

お題は『バケーション』さあどうする？

今回が２回目の参加です。
よろしくお願いします( ｀・∀・´)ﾉﾖﾛｼｸ

バケーションと聞いてみなさん何を連想します？
私は最初『バケーション・・・夏休み・・・うーん、ＢＢＱの飯テロ画像でも返えすサイトでも作ろうかな』くらいに感じたのですが、それと同時にあるテーマソングが流れました・・・

『まわれーまーわれーめりーごらん♪』

ええ、ロングバケーションのメインテーマソングである、久保田利伸の『LA・LA・LA LOVE SONG』が脳内に再生されたんです。

（一応知らない人のために記載しておくと、96年にキムタクと山口智子が共演したドラマですｗ）

その事をプログラミングコミュニティ『にゅ～ぶる会』のSlackで呟いたら・・・

素麺会長から『スーパーボール投げまくれるやつ、作って』と。

実は歌は流れたものの、ドラマの内容はイマイチ知らない私ｗ

そう言われてググりました。

そしたら、第一話でキムタクと山口智子がマンションの３階からスーパーボールを投げてキャッチするシーンがあるんですね～👀

youtubeで見つけたのでリンク置いておきます

これを作れと？

いや、否定から入ってはいけませんねｗ

作ってと言われたら、作って見せるのが男というものでしょう！

という事で、今回作くるものが決まりました(●´ω｀●)

今回のWebサービスは『キムタクに挑戦！スーパーボールを投げまくれるWebサービス』です

元々今回はVue.jsを使ってみたいと思っていたので、Vueを使ってスーパーボールをマンションの３階から投げてキャッチするというゲームを作る事にしました。

で、キムタクになりきるため（笑）視点は一人称・・・つまりFPS視点で制作する事としました。

私自身はほとんどVueを触った事がない（というより、チュートリアルしかやってない）状態だったんで、要所要所で手間取りながらの製作となりましたが、なんとかコミュニティメンバーの力を借りつつ形にはなりました・・・。

出来上がったものはコチラ

（html、CSS、Vue,js）

余談ですが、背景画像は私の住むマンションだったりします。
本心は作中の投げているシーンから背景画像を拝借したかったんですが、それをすると著作権とか肖像権とか関わってきますからね・・・私自身が３階に住んでいるという事もあり、弊マンションの画像を使うという事にしました・・・(笑)

時間がもう少しあれば、投げる力の強弱を表現したり、ボールの跳ね返り方にランダム性も持たせたり、細かい機能を追加したかったんですがね、さすがに１週間で・・・それもロクに触った事がないVueで作る事は難しかったですね。

しかし今回の制作でVueとはお友達になれた気がするので、今後はぜひ活用したいFWであります。

以上、最後までご覧いただきありがとうございました。

みんなのバケーション、略してみんバケ！

2021-07-25T17:14:00+09:00

待ちに待った休日。
さあ、思いっきり楽しむぞと意気込むも、何をしたらいいかわからず惰性で過ごしてしまう...

せっかくのバケーションがもったいない。

貴重なバケーションを無駄にしないために、あなたのバケーションアイデアをシェアして、みんなのバケーションを充実させましょう！

やりたいことや、やってみたら楽しかったことなどを投稿してください。

ログインすれば、自分だけのマイバケーションが作れますよー

みんバケ！

The World Tour

2021-07-25T14:48:35+09:00

コロナ渦でバケーションといっても
旅行などなかなかいけない状況が続いていますよね
そんな中でアメリカのディズニーワールドをwebで歩くことができ
また、施設などのレビューも一緒に楽しめたらなと思い作成しました！
事業を手伝ってくださる友人との共同制作です
友人には施設情報の取得やストリートビューから下の部分を担当していただきました
Twitter:@yuyuyu_popo
Twitter投稿主:@UNICO_PROj
是非夢の国の旅をお楽しみください!
入り口はこちら

旅行の予定をたてよう

2021-07-25T14:21:58+09:00

旅行の予定をたてよう

初めてweb1weekに参加させていただきます。
PHPを使用して、旅行の予定をたてるwebアプリの作成に挑戦しました。

webアプリはこちらです

使い方

ページごとに選択肢が現れるので、好きなものを選び、「たびのしおり」を作成してください。

内容の確定後、「復活の呪文」が発行されます。これをトップページのフォームに入力することで、ページを閉じた後でも「たびのしおり」を見直すことができます。

それではみなさん良い旅を～