信頼はずっと、挑戦はもっと。

お問い合わせ
TEL:03-3496-3888

BLOG コアテックの社員ブログ (毎週月曜~金曜更新中)

LIST OF ARTICLES

記事一覧

  • 画像:ブログサムネイル

    テクログ

    Flutterはじめました(2)

    お久しぶりです。のりさんです。梅雨も明けてかなり暑くなってきましたね。 みなさんいかがお過ごしでしょうか。 今回は前回書いた「Flutter(フラッター)」の続きでFlutterデモアプリのソースコードをみていきたいと思います。プロジェクトのフォルダをみていくとlibフォルダがあります。libフォルダはソースコードを入れておくフォルダでデモアプリのソースコードは「main.dart」という名前で保存されています。(FlutterはDart言語のため、dartという拡張子になっているようです)それでは「lib/main.dart」ファイルの中身を上からみていきたいと思います。①インポート定義 importすることで他のdartファイルの内容を利用できるようにしているようです。 上記の場合はマテリアルデザインを使うためのdartファイルをimportしているようですね。②main関数 アプリ起動時に最初に呼び出されるのがこのmain関数のようです。 その中でrunApp関数を呼び出してプログラムを実行しています。 ・runApp関数とは  引数に渡されたWidget(ウィジェット)から画面を描画をしてくれる関数のようです。  参考:https://api.flutter.dev/flutter/widgets/runApp.html ・Widget(ウィジェット)とは  FlutterアプリのUIを構成する部品らしいです。  イメージとしては以下の感じでしょうか。  ・アプリケーション全体(MyAppのMaterialApp)  ・画面全体(MyHomePageのScaffold)  ・画面パーツ(ScaffoldのText)  ・画面レイアウト(ScaffoldのCenterやColumn)  小さいものから大きく纏まっているものまであるということですね。 デモアプリの場合は、「MyApp()」という部分でWidgetのインスタンスを生成しています。 (Dartではnewを書かなくてもクラスのインスタンス生成が可能だったりします)③MyApp(Widget) MyAppはrunApp関数に渡されていたので、アプリ全体のWidgetという感じでしょうか。 StatelessWidgetという状態を持たないWidgetをベースに作られていて buildメソッドでは、画面全体をマテリアルデザインにするために MaterialAppというWidgetを作って返しているようです。 (見た目をiOSっぽくしたい場合は、CupertinoAppを使うようです) 次にMaterialAppのコンストラクタをみてみます。 title、theme、homeと名前付き引数で値が渡されていて homeでは、さらにMyHomePageというWidgetを作って渡しています。 このような感じでFlutterではWidgetの中でさらにWidgetを作っていき buildメソッドが連鎖して実行され、UIを構築していく仕組みになっているようですね。④MyHomePage(Widget) MyAppにあるMaterialAppのhomeで渡されていたWidgetです。 こちらはStatefulWidgetという状態を持っているWidgetをベースに作られているようです。 状態を持たせるためにcreateStateメソッドでStateを作っているようですね。 (デモの場合は_MyHomePageStateというStateを作っています)⑤_MyHomePageState(State) こちらはMyHomePage(Widget)用のState(状態)クラスです。   ソースをみてみるとStateの方にbuildメソッドがありますね。 StatelessWidgetでは、Widgetにbuildメソッドがでてきましたが StatefulWidgetではStateの方に存在しているようです。  もう少し細かくみていきます。 buildメソッド  Scaffold(スキャフォールド)というWidgetを作って返しています。  これはマテリアルデザイン用の画面全体を作るための部品のようですね。  (見た目をiOSっぽくしたい場合は、CupertinoPageScaffoldを利用するようです) Scaffold (Widget)  コンストラクタの引数をみてみるとWidgetを渡してレイアウトを作っているようですね。  引数は    appBar:画面上部に表示するアプリバーの部分です。           AppBar(Widget)のtitleにText(Widget)でタイトルを設定しています。    body:メインコンテンツ部分        Center<中央揃え>やColumn<縦配置>、TextのWidgetを作っています。        テキストにはカウンタ用の_counter変数を利用して表示しているようです。    floatingActionButton:右下に表示される丸いボタン               デモではFloatingActionButtonとボタン押下時等の設定                                                              状態が変わったことを伝えるsetState関数を使うことで               再度buildメソッドが呼ばれて画面が更新されます。  という感じになっているようです。  Scaffoldについて画面に枠をつけるとしたらのこんなイメージでしょうか。   今回はデモのソースからFlutterアプリが、どういった動きをしているか書いてみました。 まだまだ知識不足なので簡単なアプリから作っていきたいと思います。

  • 画像:ブログサムネイル

    テクログ

    Flutterはじめました

    お久しぶりです。 のりさんです。  最近暑くなってきましたね。 みなさんいかがお過ごしでしょうか。  今回は最近気になっている「Flutter(フラッター)」について書きたいと思います。  みなさん「Flutter」について、どこかで聞いたことがあるでしょうか。 私も最近興味を持ち始めたので、あまり聞きなれない人もいるかもしれません。   ● Flutterとは  ・Googleが開発したクロスプラットフォームフレームワーク ・Dart(ダート)という言語で開発を行い、AndroidやiOS等のアプリとしてビルドできる というものらしいです。  AndroidやiOSアプリの開発を同時に開発出来て工数削減とか期待できそうですね。   2021年3月にFlutterのバージョンが「2」になったようです。 Flutter2ではAndroidやiOSアプリに加えて以下について対応が増えたとのこと。  ・Windows  ・macOS  ・Linux  ・Webブラウザ   Flutterの古いバージョンで開発したアプリを新バージョンに更新して 少し手を加えるだけで他のOSでも動作するようになるのはよさそうですね。  (6月現在では「2.2.2」となっており、機能がどんどん追加されていきそうな印象です)   以上のようなところからクロスプラットフォーム開発に興味を持ったのですが  Flutterを知るには実際に触ってみるのがよさそうなので 環境構築からやっていきたいと思います。 ● Flutterの環境構築 実際に環境構築してFlutterのデモアプリが動作するところまで書きたいと思います。  PCについてWindows10(Pro)利用のため、こちらで進めていきます。   ■ Flutter SDK   1. 以下のFlutter公式サイトにアクセスしSDKをダウンロードします。  https://flutter.dev/docs/get-started/install/windows  ⇒今回は「Flutter_windows_2.2.2-stable.zip」で進めていきます。    2. SDKファイルのダウンロードが終わったらzipファイルを解凍します。   3. 環境変数の「Path」設定します。  ⇒コントロールパネル>システムとセキュリティ>システム>システムの詳細設定>環境変数   変数名Pathを編集し【2.解凍ディレクトリ\flutter\bin】を追加します。   4. PowerShell等で以下のコマンドを入力し、バージョン情報が表示されれば完了です。  >flutter --version                                        Flutter 2.2.2 • channel stable                     ■ Android Studio   1. ソフトウェア(開発環境)のインストール  以下よりダウンロードしてインストールしました。  https://developer.android.com/studio?hl=ja     2. Andorid Studioを日本語化  以下のサイトよりpleiades-win.zipをダウンロードしてzipを解凍しました。  https://mergedoc.osdn.jp/#pleiades.html#PLUGIN   解凍したフォルダにあるsetup.exeを実行していきます。  日本語化の画面が表示されたら「日本語化するアプリケーション」を選択しファイルパスを設定しました(例:C:\Program Files\Android\Android Studio\bin\studio64.exe )日本語化するボタンをクリックで日本語化は完了です。    3. Android SDKのライセンス条項への承諾  PowerShell等で以下のコマンドを実行し「y」を入力して進みました。 >flutter doctor --android-licenses     4. Flutterプラグインのインストール  Android Studioを起動します(日本語化されていました)  起動画面>構成>プラグインから「Flutter」プラグイン※をインストールします。  ※flutter.devのダウンロード数が9M以上になっているもの   5. FlutterのAndroid Studio認識設定  PowerShell等で以下のコマンドを実行します  >flutter config --android-studio-dir="【インストールパス※】"  ※例:C:\Program Files\Android\Android Studio    6. Android仮想デバイスの作成  AndroidStudioからAVD Managerをクリックし仮想デバイスを追加します。  ⇒今回「Pixel 3 XL API 30(Android 11)」を作成してみました。   ■ Flutter デモアプリ  1. 新規Flutterプロジェクトの作成  Android Studioのメニュー>ファイル>新規 Flutter プロジェクトをクリックします。  Flutter Appを選択し、Flutter SDKパスに【SDK解凍パス】を設定し 次へをクリックして進みます。 次の画面はデモの動作確認なので、そのまま完了をクリックします。   2. Flutterデモアプリを実行してみます  Androidエミュレータを起動します。 起動したら右側にある実行ボタンをクリックします。おお、Androidでデモアプリが起動しました! +ボタンをタップ(クリック)すると数字が増えていきます 先ほどのデバイス選択にてEdgeも選択できるようなのでこちらも試してみたいと思います。Edgeを選択して実行ボタンをクリックしてみます。 こちらもEdgeブラウザで動作していますね。同じく+ボタンで数字が増えていきます。1つのソースでどちらも動作するっていいですね!今回はAndroidとブラウザで同じデモプログラムが動作するところまで書いてみました。 これからデモのソースコードを参考にしつつDart言語について理解を深めたいと思います。

  • 健康

    夏までに

    お久しぶりです。のりさんです。皆さんいかがお過ごしでしょうか。最近ジムには行っていないのですが自重トレーニングの方もあまりやっていないため、体脂肪に変化が・・・ということでそろそろ夏も近いので引き締めていきたいところです。家でやるにしてもトレーニングは楽しくやりたいものですよね。普通に腕立てなどの自重トレーニングをやるではなく、ゲームを使うという方法もあります。そこで「リングフィットアドベンチャー」!発売してから一時期入手困難だったNintendo Switchのゲームソフトですね。ジムに通っていたころはゲームで筋トレ?とあまり興味なかったですが実際に購入してやってみた感想としてはゲームを使った筋トレ「あり」だと思いました!・強度調整できる・トレーニングメニューも多いので幅広く部位が鍛えられそう・経験値を稼いでLV上げていくと筋トレメニューが増えていく・スムージー(回復アイテム)も作れて、ゲームも進めやすい夏までには体脂肪減らしたいのでリングフィットアドベンチャーも使いつつ筋トレしていきたいと思います!

  • 健康

    ジムに行きたくなります

    お久しぶりです。のりさんです。皆さんいかがお過ごしでしょうか。自分については、昨年の12月頃からジムに行けてない日々が続いてます。ただ昨年11月頃に久々にジムに行ってきたので、今回その話をしようと思います。久々のジムトレなのでテンション高い状態でジムへ到着しました。アルコール消毒して中へ、入り口の状況からも人が今までより少なめの印象でした。ロッカールームで着替えを終え、マスクをしてトレーニング開始です!周りを見渡すと、ベンチプレス台やパワーラックが空いています!!いつもはホワイトボードに記入して少し待つんですが、待たずに利用できそうです。ここからも、やはり人が減っている印象。さっそくウェイトトレーニングに入ります。まずはベンチプレスを40Kgからスタートしました。1回目:40Kg 10回2回目:50Kg 8回3回目:60Kg 6回マスクしているから力がでなかったと思いたいくらいですが結構、筋力が落ちているようです。次はデッドリフト1回目:40Kg 20回2回目:60Kg 15回3回目:80Kg 10回こちらもやはり落ちてました。マシン利用後にアルコール除菌シートで拭いてトレーニング完了です。久々のジムトレに楽しさを感じましたが、無言でトレーニングしている人が多く今までのジムと景色が違いました。また感染症が落ち着いた頃に再開したいと思います!

  • 健康

    そうだ!筋トレしよう

    お久しぶりです。のりさんです。皆さんいかがお過ごしでしょうか。自分はしばらくジムに行っていないのですが、そろそろ筋トレしたい!ということでぶら下がり健康器というものを買っちゃいました。ぶら下がり健康器を検索すると沢山でてくるようですが懸垂とディップスができるタイプが気に入り通販でポチッとしました。後日到着し、組み立て作業へ組み立て式とわかっていましたが想定よりも簡単に短時間で組み立てられて強度もよさそうです。では筋トレを開始してみます!おっ懸垂、ディップスの回数があまりできない・・以前ジムに通っていた時は軽かった感覚がありましたが確実に筋力おちてますね。インターバルを置きながらトレーニングを終えました。もちろん終了後はプロテインを忘れずに飲みます!という感じでで久々にやってみた感想としては強度もよくてジムの懸垂・ディップスに近い感じでトレーニングできました。家だとマシンの空きを気にしなくていいので待たずにできますね。ただそれなりに場所とるので部屋の広さによりますが設置先には注意です。マッスルメモリーを期待して頑張ってみようと思います。

  • 雑記

    レトロゲームのススメ

    お久しぶりです。のりさんです。自粛もあったりと大変な時期ですが皆さんどのようにお過ごしでしょうか??自分に関してはジムに行けておらずマッチョからプッチョになりそうな今日この頃。最近家でできるものとしてファミコンミニを購入しました。自分がはまったものをいくつかご紹介します。①ゼルダの伝説爆弾などでお宝探しも面白くダンジョン攻略もやりごたえがありました。一番のおすすめかもしれません。②パックマンモンスターを避けて食べまくるゲームクリアするごとにパックマンも敵も速くなり難しくなりますが何度もやりたくなります。③ドクターマリオパズルゲームですが、ぷよぷよやテトリスとは違った感じで面白いです。上記以外のゲームも面白いのでぜひ。レトロゲームもやってみると面白いのでおすすめです!