Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20201027_FGDC_LowCodeプラットフォームNoodlでブラウザゲーム開発!

pentake
October 27, 2020

 20201027_FGDC_LowCodeプラットフォームNoodlでブラウザゲーム開発!

pentake

October 27, 2020
Tweet

More Decks by pentake

Other Decks in Programming

Transcript

  1. LowCodeプラットフォーム
    でブラウザゲーム開発!

    View full-size slide

  2. 加藤 健大
    Kato Takehiro
    UXデザイナー
    Noodlアドボケイト
    理系大学でデザイン工学
    (デザインとエンジニアリングの融合領域)を学ぶ
    同大学の大学院にてアイデアの発想法を研究
    株式会社テイ・デイ・エスに入社
    Noodl のアドボケイトとして
    ユーザーコミュニティ運営などの活動開始
    UXデザイナーとして
    プロジェクトの上流工程の調査
    /分析に関わる
    アドボケイト:
     自社製品やサービスを社外の開発者に啓蒙する職種。みなさんと同じ目線でみなさんの課題を一緒に解決していく。
     ※エバンジェリストは、人々の前に立って先導、主導をしていく "伝道師"のイメージ。
    (参考:https://codezine.jp/article/detail/11486、中津川篤司氏)
    趣味:今年に入ってからずっと藤井風さんの曲を鬼リピしています

       キングダムハーツが好き
    3やってないからそろそろやらなきゃ
    ...(義務感)
    特徴:デザインを学んでからというものの、物事を突き詰めて考える楽しさを覚え    てしまい
    思考の森に迷い込むこともしばしば
    ...

    View full-size slide

  3. デザインに戦略性を、ロジックに創造性を
    私たちはクリエイティビティあふれる論理と、戦略に基づいたデザインによって、
    人、モノ、社会の間にあるコミュニケーション課題を解決に導くデザインファームです。

    View full-size slide

  4. ツイート大歓迎です!
    #FGDC #Noodl

    View full-size slide

  5. Noodl?
    ヌ ー ド ル

    View full-size slide

  6. 写真:Pixabay、Văn Đặng

    View full-size slide

  7. これは Noodle
    e が付いているのは麺
    ヌ ー ド ル

    View full-size slide

  8. Noodl とは?
    ヌ ー ド ル

    View full-size slide

  9. Noodlとは?
    Webアプリケーション
    を開発するための
    プラットフォーム
    超ざっくり、webアプリケーションとは?
     WEBブラウザ(例:Chrome / Safari)で動くもの
    開発して出来上がるものは?
     webサイト:企業サイト、ブランドサイト
    ...
     webサービス:Twitter、Wikipedia、Amazon…
     ブラウザゲーム:

    View full-size slide

  10. デモ
    ころぴゅーた(ブラウザゲーム)
    https://www.replug.jp/coro-puter/

    View full-size slide

  11. そんなNoodlの背景にある
    思想 とは?

    View full-size slide

  12. 意思決定を
    触れられる形にせよ。
    多くの企業が「デザイン思考」の導入を急ぐが、うまく実現できず苦労している。
    ・意思決定に時間がかかる
    ...
    ・アイデアはある、でもなるべく理想に近い形を実際に触れるものとして作る方法がわからない
    ...
    アイデアが降ってきたら、触れられる形を早く作って、実際に使って、判断できるようにする。
    そんな開発元の考え方が、
    Noodlに反映されています。

    View full-size slide

  13. 思考し、実行する。

    View full-size slide

  14. そんな思想を持つ
    組織 とは?

    View full-size slide

  15. TOPP
    Swedish design & innovation agency
    拠点:
     Malmö(マルメ)
     スウェーデン南部にある第3の都市
    創業:
     2013年
     Black Berry時代からイケてるものを作っていて、
     その開発に関わっていたメンバーで創業
    メンバー:
     ・デザインテクノロジスト
     ・UX デザイナー
     ・ストラテジスト
     ・エンジニア
     ・ビジュアル & モーションデザイナー など

    View full-size slide

  16. Noodl(Company)
    ・TOPPでNoodlの開発をしていたメンバーが独立
    ・現在、Noodlのプロダクト開発に注力している

    View full-size slide

  17. TOPP WAY OF WORKING
    THINK / DO
    思考し、実行する
    MERGE MANY MINDS
    多くの考え方を溶け合わせよ
    EXPERIMENT RAPIDLY
    高速で実験せよ
    MAKE DECISIONS TANGIBLE
    意思決定を触れられる形にせよ
    PROTOTYPE THE STORY
    ストーリーを試作せよ
    FIND INTERESTING TRUTHS
    興味深い真実を発見せよ
    CREATE MOMENTUM
    勢いを創造せよ

    View full-size slide

  18. Client
    2013年の創業以来、TOPPは国境を越え、ユー
    ザー体験を作り出すために、数多くの公私企業の
    クライアントと協働してきました。
    業界範囲:
     ・航空業
     ・自動車
     ・消費者向け電化製品
     ・コネクテッドホーム  など
    クロスプラットフォームサービスの最先端を行く企
    業がTOPPのクライアントです。
    いずれの業界であっても、技術によって何百万も
    のユーザー体験を改善できる可能性を秘めてい
    ます。

    View full-size slide

  19. Noodlについて詳しく

    View full-size slide

  20. Node
    ノ ー ド

    View full-size slide

  21. つなげていく...
    = コーディング

    View full-size slide

  22. Noodl
    ヌ ー ド ル
    論理
    ( if 文 , for 文 … )
    データ
    ( データベース, API, IoT )
    UIデザイン
    機能をつないで、
    1つに。

    View full-size slide

  23. Noodlで作ることができるのは、
    Webアプリケーション
    ・webサイト(PC / スマートフォン)
    ・webサービス(PC / スマートフォン)
    ・IoTデバイスのUI
     → データベースと連携可能( = ID/PWで個人情報の管理可能)
     → APIと連携可能
    ・HTML / CSS / JavaScript
    ・React ベース
    ・ブラウザで動くよ
    ↑ Noodlで作ったアプリケーション例

    View full-size slide

  24. 機能
    Noodl のココが嬉しい ①
    ヌ ー ド ル
    プロトタイピングツール
    Low-code 開発プラットフォーム(絶賛開発中!)
    プロトタイプ
    version 1
    プロトタイプ
    version 2
    プロトタイプ
    version 3
    本番
    アプリケーション
    リリース
    デザイン
    プロトタイプが本番にも使えるものになる!

    View full-size slide

  25. Noodl のココが嬉しい ②
    ヌ ー ド ル
    プロトタイプ
    version 1
    プロトタイプ
    version 2
    プロトタイプ
    version 3
    本番
    アプリケーション
    リリース
    テスト1 テスト2
    UX
    テスト3 利用 / 購入
    UX(ユーザー体験)の向上に大活躍!

    View full-size slide

  26. Noodl
    ヌ ー ド ル
    デザイナー
    エンジニア
    プロジェクト
    関係者
    人をつないで、
    1つに。

    View full-size slide

  27. キーワードは Low-code
    ロ ー コ ー ド

    View full-size slide

  28. No-code と Low-code の違い
    ロ ー コ ー ド
    ・簡単なアプリケーションを作る場合は、コードを書く必要がない
    ・ゼロから自由にデザインを構築可能
    ・今後、デザインツールの Figma や Sketch から UIデータをインポートできるようになっていく
    ・レベルの高いアプリケーションを作りたい場合は、通常よりも少ないコード記述量で開発ができる
    ノ ー コ ー ド
    表:Wikipedia「No-code development platform: No-Code vs. Low-Code」の情報を元に作成

    View full-size slide

  29. お知らせ

    View full-size slide

  30. Noodl 2.1 情報

    View full-size slide

  31. @pentake:
    今回お話しした内容の一部のまとめ
    Qiita 記事
    @macole さん:
    インストール方法や機能のご紹介

    View full-size slide

  32. 11/11 (水) 19:30 - 21:10
    お申込みは connpass から!

    View full-size slide

  33. Thank you!

    View full-size slide