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 Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

  5. Noodl?
    ヌ ー ド ル

    View Slide

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

    View Slide

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

    View Slide

  8. Noodl とは?
    ヌ ー ド ル

    View Slide

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

    View Slide

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

    View Slide

  11. View Slide

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

    View Slide

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

    View Slide

  14. 思考し、実行する。

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. Noodlについて詳しく

    View Slide

  21. Node
    ノ ー ド

    View Slide

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

    View Slide

  23. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  32. お知らせ

    View Slide

  33. View Slide

  34. Twitter

    View Slide

  35. Noodl 2.1 情報

    View Slide

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

    View Slide

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

    View Slide

  38. Thank you!

    View Slide