Yoshitaka

Yoshitaka

  • 固定された記事

駐夫からiOSエンジニアになれた件

この記事はエンジニアと人生コミュニティのアドベントカレンダー#2 の12日目の記事となります。 11日目はHidemune TakahashiさんのiOSアプリできちんと設計をするようになったら変わったことでした。 私もこんな技術記事いつか書いてみたい！ 本記事は、技術要素ゼロの人生振り返り記事となります。 昨年の９月にこれからnoteで日記でも書いていくぞ！と決めてから今回で3記事目。 全く継続はできておりませんが、今回記事を書くきっかけを与えて頂き感謝です。 さて、

Yoshitaka

    • パデルに出会ってからの5年間の振り返り

      初めてスペインでパデルを体験してから約5年が経ち、節目を感じたので簡単に振り返りを書きたいと思いました。 スペインで偶然パデルを知り、パデルにどハマりし、帰国してパデルコーチにチャレンジするまでを写真多めでざっくりまとめてみます。 パデルとの出会い（2018年末〜） パデルを知ったのは、2018年末にスペイン移住したことがきっかけでした。（スペインでは0歳児の息子の育児を専業でやっていました） 住むことになったマンションの住人用の設備としてパデルコートがありました。

      Yoshitaka

      • Human Interface Guidelinesを読んでみる〜コンポーネント/コンテンツ〜

        こちらの続きです コンポーネントを読んでいきます コンポーネント日々の業務ではコンポーネント化がうまくできずに困っているのでここはしっかり理解したいところです。 コンテンツ レイアウトと編成 メニューとアクション ナビゲーションと検索 表示 選択と入力 コンポーネントの内容は6つに分かれていましたが、それぞれさらに子テーマに分かれているので、まずはコンテンツから見ていきます。 コンテンツグラフ イメージビュー テキストビュー Webビュー 現在業務で開発しているア

        Yoshitaka

        • Human Interface Guidelinesを読んでみる〜基本要素〜

          何を読むのかhttps://developer.apple.com/jp/design/human-interface-guidelines こちらの日本語訳されたHuman Interface Guidelinesを読みます。 （日本語訳が登場したのは最近らしいです） なぜ読むのか日頃iOSエンジニアとして仕事をしていますが、デザイナーの方々とミーティングをする上で最低限のデザイン知識は必要だと感じることがありました。 Human Interface Guidelines

          Yoshitaka
        • 固定された記事

        駐夫からiOSエンジニアになれた件

        Yoshitaka

          AWSざっくり理解しました

          ヒストリーAmazon社内のインフラ構築で都度構築だと無駄が多くなってきた->一括構築＆分割利用というスタイルを取ってできたのがAWSで、もともとは社内のツールだったそう インフラ構築の課題 -> 解決したことをサービスとして提供 AWSの90%以上のサービスは顧客の要求から生まれたものらしい サービスは200を超える Infrastracture24のリージョン、84アベーラビリティーゾーンがある 日本は東京リージョン・大阪リージョン リージョンは複数のアベイラ

          Yoshitaka

          AWSざっくり理解しました

          Yoshitaka

          .bubbleでGoogleログインを使う

          .bubbleでは標準でユーザ管理機能が作られておりますが、この機能（新規登録・ログイン）画面にGoogleログインの機能を足すことも簡単にできます。 PluginsにGoogleを追加してApp SecretとApp ID/API Keyを保存することで簡単に実装できますが、この2つのパラメータを取得するためにGoogle Cloud Platformに登録＆設定する必要があります まずはアカウントを作成し 新しいプロジェクトを作っていきます プロジェクトの作成が完

          Yoshitaka

          .bubbleでGoogleログインを使う

          Yoshitaka

          .bubble 無料プランでできること

          .bubbleの標準機能アプリケーションの公開(テスト版として) .bubbleのロゴがついてしまいます 公開するURLは、https://●●●. bubble .io / version-test/ のようなものになる データベースが使える 合計のレコード数に制限があり、無料プランでは200レコードまでつくれる 200レコードに達するとアプリ上でエラーになる 使用量は設定の(currently using ___ out of 200)の部分で確認できます Fig

          Yoshitaka

          .bubble 無料プランでできること

          Yoshitaka

          .bubbleでHTMLのvalueを取得する方法

          やりたいこと HTMLで作ったアイテムから値を取得する さっそくやっていきます🙌 まずはHTMLエレメントを配置します 目的のパーツをHTML書いておきます 今回はTimePickerにしました idに適当な値を入れます（あとで使います ①） 次にPluginを入れていきます JavaScriptを使うには『Toolbox』というプラグインをいれていきます Javascript to Bubbleというエレメントが使えるようになるので適当な位置に配置していきます

          Yoshitaka

          .bubbleでHTMLのvalueを取得する方法

          Yoshitaka

          .bubbleってどうなの(stateを理解する)

          👇のつづき bubbleではページやグループに状態を持たせることができますstateについてみていきます まずは左側の項目よりElements treeの最上位エレメントを選択します 最上位＝ページの編集画面が表示されます 編集画面の 「i」ボタンをクリックすると Element inspectorが表示され一番上にCustom statesの欄があります ここのAdd a new custom stateを選択します ここからstateを新規作成できます 名前とタイ

          Yoshitaka

          .bubbleってどうなの(stateを理解する)

          Yoshitaka

          .bubbleってどうなの(Workflowを使ってみる)

          👇のつづき 今回はワークフローをつかってみますまずはボタンをタップしたときの処理をワークフローで追加していきます 左側のタブからWorkflowを選択しても良いですが ここではボタンの編集画面よりStart/Edit workflowを選択していきます そうすると自動でWorkflowタブへ遷移するのでこちらより処理を追加していきます add an actionから希望の処理を選択していきます 選択画面はこんな感じでたくさんあります Accountではログイン処理など

          Yoshitaka

          .bubbleってどうなの(Workflowを使ってみる)

          Yoshitaka

          .bubbleってどうなの(Dataの管理と表示)

          👇のつづき bubbleのデータ管理についてみていきます左側のタブからDataを選択します デフォルトでUserというテーブルが存在しますが、bubbleではテーブルをData typeといいます Table = Data type Column = Field Row = Thing テーブルを追加する場合は、New typeにテーブル名を入れて新規作成します テーブルを新規追加すると、必ず4つのデフォルトカラムが含まれます 上部のタブからApp dataを選

          Yoshitaka

          .bubbleってどうなの(Dataの管理と表示)

          Yoshitaka

          .bubbleってどうなの(Groupの仕組み)

          👇のつづき 今回はbubbleのグループの仕組みをみていきますDesiginのUI Builderの一番上にElement treeというものがあり ここを開きます Only show hideableのチェックを外し表示します ＋マークを選択していくとエレメントの階層が確認できます この中ではたくさんのGroupが使われています GroupはUI Builderから追加できます 追加するとこんな感じ 編集画面はこれです 編集したい場合はremove style

          Yoshitaka

          .bubbleってどうなの(Groupの仕組み)

          Yoshitaka

          .bubbleってどうなの(Dynamic Dataとは)

          👇のつづき 今回はダイナミックデータの使い方をみていきます例えばTextの編集画面では、入力欄の横に青枠でInsert dynamic dataという表示がでています これを選択すると外部のデータを入れ込むことができるというものです 例えば、現在時刻を常に表示するTextをつくる場合、Current date/timeを設定することで実現できます デフォルト設定のままだとこのように表示されます すこし応用します InputとTextを追加します（Input の名前

          Yoshitaka

          .bubbleってどうなの(Dynamic Dataとは)

          Yoshitaka

          .bubbleってどうなの(アイコン・画像などの追加)

          👇のつづき DesingのUI Builderにて気になるパーツを追加していきますまずは、Iconを追加してみます 編集画面はこんな感じ たくさんのアイコンからお気に入りのものが選べます つぎに、Imageを追加してみます 編集画面はこんな感じ Static Image項目からUploadをすると .bubbleに保存されDynamic imageにURLが表示されます ちなみに保存されたデータはData のFile Managerタブから確認できます 続いて

          Yoshitaka

          .bubbleってどうなの(アイコン・画像などの追加)

          Yoshitaka

          .bubbleってどうなの(テキスト・ボタンの挿入)

          👇のつづき テキストの挿入やっていきます まずはDesignタブからTextを選んでキャンバスに挿入 Textを選択状態で編集モーダルが表示されるので操作していきます Appearanceから見ていく まずはテキスト文の入力 まずはテキスト文の入力、…edit me….というところで編集可能 また、「Rich text editor」を選択すると別モーダル画面で文字編集できる👇 あとは、 BBコードを適用しない🟦 リンクやメールを認識する🟦 要素の高さが十分

          Yoshitaka

          .bubbleってどうなの(テキスト・ボタンの挿入)

          Yoshitaka

          .bubbleってどうなの(エディター画面を見ていく)

          👇のつづき エディター画面をみていきますまずは、初期表示となっているDesignタブ Designの中にも2つのタブがあり 「UI Builder」がアプリのフロントを作る部分となる 「Responsive」はWEB、タブレット、モバイルの各表示パターンで画面表示の確認可能 次にWorkflow これはボタンタップ後の処理などを定義する部分 Stylesでは一度作ったデザインをスタイルとして保存しておけば別画面で必要となった場合に簡単に再利用できるようになる Plu

          Yoshitaka

          .bubbleってどうなの(エディター画面を見ていく)

          Yoshitaka