5月分家庭学習アプリのアップデート

皆様お元気でお過ごしでしょうか?
5月分の教材アプリを昨日アップデートさせていただきましたが無事ダウンロードできましたでしょうか?
申し訳ございませんが5月分より無料お試し期間の終了となり、お月謝をご入金(4月25日まで)して頂きました方々向けとさせて頂いています。

「算数パズル」は数字のパズル問題や迷路を導入しています。

「算数クイズ」は算数の文章問題を日本語と英語で表示しています。英語の音声をつけていますので文章を読みながら音声を聞いて頂くとよいかと思います。

「3Dパズル」は3次元の図形問題を出題しています。

「クロスワード」は簡単な英単語を日本語訳をヒントに解いて頂く出題方式です。

「英語で学ぶ英語」については先月の内容へ追加してページ数を増やしています。
簡単な英語を英語で学習していきながら徐々に英語が身につくようにステップアップさせていきます。

「今月の英語クイズ」は英語で学ぶ英語で出題しています英単語と理科で学習する必須英単語を出題し単語の定着を目的としています。

「理科」4年生から学習する理科の内容を日本語と英語で解説しています。

「理科クイズ」は上記で学習した内容の定着を図るためのクイズになっています。

「英単語シューティングゲーム」上部から落ちてくる英単語のスペルをタイプして撃ち落とすゲームです。正確にタイプし撃ち落とすとその単語の音声が出て、リスニング対応もしています。

「英単語スペリングクイズ」は英単語シューティングゲームにて出題しています単語のスペリングの定着を目的としています。

「フラッシュ暗算ゲーム」では桁数の少ない足し算ゲームから桁数の大きい足し算まで挑戦していただけます。こちらを活用し学校で学習する「そろばん」の練習もしてみておいてください。
そろばんでの計算方法が身につくと暗算が簡単にできるようになります。
毎日少しずつで良いので継続して頂くとそろばんが身につきますが、学校では時間の関係上少しの導入部分しか学習しないと思います。それを補う形で活用してください。
将来中学受験を予定しているお子様は特に計算ミスという凡ミスに悩まされる事が軽減されると思います。

全体的に、出てきている初見の英単語で「単語辞書ノート」を作成してください。
①英単語
②読み方(カタカナでも良いですが自分で聞こえたままに書いてください)
③自分で調べた単語の意味

これらをすることで英語力が上がります。

ちなみに教室でこの作業をしていたお子様は低学年生で1年間で英検3級は簡単に取得していました。

それでは学習方法が分からないとき等、ご質問がございましたらメールにてご連絡下さい。

今月も楽しくアプリで学習してください。


***農園情報***


暖かくなり農園では種まきに大忙しです。夏野菜の苗作りの実験も順調に成功しています。
多分日本で他にしている人はいないかも?という方法ですが今後無事苗が成長していきましたら成長動画を作成し皆様と共有させて頂きますね。

先週は畑にきれいなキジも遊びに来ていました。
最寄り駅では、ツバメの巣が沢山あり柱1本に1つの巣が作られている状態です。
東京から電車で1時間ほどで通う事ができる自然豊かな場所です。


周りの方々も、大変だろうと草刈りの大きな農機具を使いきれいに草を刈ってくださったり、耕運機で耕してくださったり、作り立てのフキ料理、掘りたてのタケノコ、のどが渇いだだろうと暖かいコーヒーを入れて畑に持ってきてくださったりと、驚くほどやさしい方々ばかりでです。

時間に追われちょっと疲れている子ども達も、こんな素敵な場所で自然に囲まれ元気パワーをチャージできたらいいですね。





Unity_ログイン画面の作り方

ブログ記事の形式で、Unityでのログイン画面の作り方を紹介します。このチュートリアルでは、UnityのUIシステムを使用して、スマートフォン風のログイン画面を作成する方法を詳しく解説します。このプロジェクトは、初心者から中級者のUnity開発者に適しています。

Unityでのスマートフォン風ログイン画面の作成方法

1. 新しいキャンバスの作成

まず、Unityエディタで新しいキャンバスを作成します。これが、ログイン画面の基盤となります。

  • UI > Canvas を右クリックし、名前を「PhoneCanvas」と設定します。
  • Canvasの設定:
  • Render Mode: Screen Space – Overlay
  • UI Scale Mode: Scale with screen size
    • Reference Resolution: 1920×1080
    • Screen Match Mode: Match Width Or Height
    • Match: 0.5
    • Reference Pixels Per Unit: 100

2. PhoneShellの追加

  • PhoneCanvasの子オブジェクトとしてImageを追加し、名前を「PhoneShell」と設定します。このImageには、スマートフォンの画面をイメージしたスプライトを設定します。サイズは500×1000にします。

3. PhoneLoginPanelの追加

  • PhoneCanvasにUIパネルを追加し、名前を「PhoneLoginPanel」とします。サイズはPhoneShellの画像に合わせます。このパネルからImageコンポーネントを削除します。

4. 背景マスクとスプライトの追加

  • PhoneLoginPanelの子としてImageを追加し、名前を「BGMask」とします。Maskコンポーネントを追加し、このBGMaskの子として別のImageを追加し、名前を「BGSprite」とします。

5. ログイン画面の主要なUI要素の追加

  • MainTextAreaLockIconTextMeshPro (パスコード入力指示用)、Button (緊急用)、KeyInputField (パスコード入力フィールド)、KeyContainer (数字キーパッドコンテナ) をPhoneLoginPanelの子として追加します。

6. キーパッドの設定

  • KeyContainerGrid Layout Groupコンポーネントを追加し、Key1ボタンを作成して12個複製します。各キーに適切な名前と数字を設定し、キャンセルと確認キーを特別に設定します。

7. PhoneLoginManagerの設定

  • 空のGameObjectを作成し、名前を「PhoneLoginManager」とし、カスタムスクリプト「PhoneLockManager」をアタッチします。必要なUI要素をドラッグ&ドロップで紐付け、パスコードの検証や画面遷移のロジックを設定します。

8. ボタンの動作設定

  • 各キーに対して、適切なアクションをOn Clickイベントに設定します。これにより、ユーザーがキーパッドを使用してパスコードを入力したり、キャンセル、確認操作を行えるようになります。

まとめ

このチュートリアルでは、Unityを使用してスマートフォン風のログイン画面を作成する基本的な手順を説明しました。UI要素の配置、イベントの設定、

スクリプトによる動作の制御など、UnityでインタラクティブなUIを作成する際の基礎知識を提供します。このプロジェクトを通じて、UnityでのUI開発スキルを向上させることができるでしょう。

ヒエラルギーはこんな感じです↓

Unityに新しいフォントを追加して、TextMeshProのフォントアセットとして使用する方法をご紹介します。

日本語のフォントや自分の好みのフォントを使いたい時にお勧め!

1. フォントファイルの用意

まず、使用したいフォントのファイル(通常は .ttf.otf 形式)を用意します。

2. プロジェクトにフォントを追加

  1. Unityエディタを開き、プロジェクトをロードします。
  2. Assets フォルダ内に新しいフォルダを作成し、その中にフォントファイルをドラッグ&ドロップします。
  3. フォントファイルがプロジェクトのアセットとして追加されます。

3. TextMeshProのフォントアセットを作成

  1. メニューバーから Window > TextMeshPro > Font Asset Creator を選択します。
  2. Font Asset Creator ウィンドウが開きますので、Font Source に新しく追加したフォントを選びます。
  3. Generate Font Atlas ボタンをクリックして、フォントアセットを作成します。
  4. ファイル保存ダイアログが表示されますので、適当な場所にフォントアセットを保存します。

これで、Unityに新しいフォントが追加され、TextMeshProのフォントアセットとして使用できるようになります。

学習アプリ えいごの学習ノート『BE動詞編』

英語の基本を楽しく学ぶアプリ!

発売開始2023年10月25日

こんにちは!今日は、小学生以上のお子様が初めて英語の「be動詞」を学習する際にとても役立つアプリ、「えいごの学習ノート『be動詞編』」をご紹介します。

このアプリは、be動詞の基本を丁寧に音声でガイドしてくれるだけでなく、英語の正確な発音も聞く事ができるので、リスニングのスキルアップにも最適です。

さらに、楽しいゲームを通じて学んだ知識をしっかりと定着させることができるのもポイント。

そして、教材として利用する場合、PDF版を無料で使用することができます。拡大表示や書き込み機能も搭載されているので、学習のサポートとして大変便利です。

「えいごの学習ノート『be動詞編』」は、タップ操作だけで発音や説明を聞くことができ、わかりやすい説明で文法の知識を深めることができます。

豊富なミニゲームも用意されているので、遊びながら学習内容を定着させることができるでしょう。

英語のbe動詞の基本を楽しみながら学ぶことができる「えいごの学習ノート『be動詞編』」。

音声機能やゲームを通じて、子供たちに新しい英語学習の体験を提供します。

このアプリを使って、お子様の英語学習をぜひサポートしてあげてください!

詳しくはこちらから

BlenderからUnityへのFBXエクスポート方法

10月のゲームアプリ「あるごの森2」にて1週目キューブのお題は3D画像で表示しています。

3D画像はBlenderにて作成し、画像は下記方法にてUnityにインポートしました。

ご興味のある方はお試しください。

Blenderで作成した3DモデルをUnityで利用する際、FBX形式でのエクスポートが一般的です。今回は、その手順を簡単に解説します。

1. Blenderでの作業:

  1. モデルの準備: まず、エクスポートしたい3DモデルをBlenderで開きます。
  2. モデルの選択: 3Dビューポート上で、エクスポート対象となるモデルやオブジェクトを選択します。
  3. FBXエクスポートオプションの選択: メニューから「ファイル(File)」→「エクスポート(Export)」→「FBX(.fbx)」をクリックします。
  4. エクスポート設定:
    • 「Selected Objects」: これをチェックすると選択したオブジェクトだけがエクスポートされます。
    • 「Apply Scalings」: Unityとのスケールの互換性を保つため「FBX Units Scale」を選択。
    • 「Forward」: 一般的に「-Z Forward」を選択。
    • 「Up」: 一般的に「Y Up」を選択。
    • もしモデルにアニメーションや形状キーが含まれている場合、適切なオプションをチェック。
  5. エクスポートの実行: 保存先のフォルダとファイル名を指定したら、「エクスポートFBX(Export FBX)」ボタンをクリックします。

2. Unityでのインポート:

  1. Unityプロジェクトの開始: 新規または既存のUnityプロジェクトを開きます。
  2. FBXのインポート: エクスポートしたFBXファイルをUnityのプロジェクトフォルダ内にドラッグ&ドロップします。Unityは自動的にファイルを認識し、インポートを開始します。

以上で、BlenderからUnityへのFBXエクスポートの手順は完了です。特定のプロジェクト要件に応じて、エクスポート設定の細部を調整することができるので、適宜カスタマイズしてください。

UnityのTextMeshProで文字のぼやけを解消する方法


UnityのTextMeshProは、高品質なテキストレンダリングを実現するためのツールなですが今回

「文字周りにぼやけた枠が表示される問題」

に直面し、修正方法がわからず苦労しましたのでどなたか必要な方がおいでかも?と思い、

私が使用した解決方法を紹介します。

問題の状況

TextMeshProでテキストを表示する際、文字の周りに四角くぼやけた枠が表示される現象が発生。

解決方法

この問題の原因として、フォントアセットの「Sampling Point Size」が考えられました。

「Sampling Point Size」は、フォントアセットを生成する際のフォントのサイズを指定する設定です。

  1. まず、UnityエディタのメニューバーからWindow > TextMeshPro > Font Asset Creatorを選択して、「Font Asset Creator」ウィンドウを開きます。
  2. 使用するフォントファイルを「Source Font File」セクションにドラッグ&ドロップします。
  3. 「Sampling Settings」セクションに移動し、「Point Size」のオプションを「Custom Size」に変更します。
  4. 「Sampling Point Size」を、ゲームやアプリケーション内で最も大きく表示される予定のテキストサイズ(このケースでは200)に設定します。
  5. 「Generate Font Atlas」ボタンをクリックして、フォントアセットを再生成します。

この手順により、指定した「Sampling Point Size」に最適化されたフォントアセットが生成され、文字のぼやけ問題が解消されました。

ぼやけ問題のあるテキスト
修正後のテキスト

Unityの使い方 – シリーズ4

タイピングゲームの作り方

Unityを使ったタイピングゲームの作り方を紹介します。このチュートリアルを通じて、Unityの基本的な操作方法やコンポーネントの活用方法を学んでいきましょう。

まず、ゲームのオブジェクト構造を確認します。ヒエラルキービューの中で以下のように各オブジェクトを配置します。

  • Game Manager(Game Managerにはスクリプトをアタッチします)
  • Canvas
    • Panel Question
      • Question Image
    • Panel Answer
      • Answer Text
      • Correct Text(ここではチェックを外します)
      • Wrong Text(ここではチェックを外します)
    • Button Parent(空のオブジェクト。ここにはGrid Layout Groupをアドコンポーネントとして追加します)
      • Button (a) (On Click()イベントに対して、Game ManagerにアタッチしたTypingGame.OnKeyPressを設定します。また、このボタンに対応するアルファベットを設定します)
      • … 同様にButton (b) から Button (z)までを作成します。

次に、Game ManagerオブジェクトのInspectorビューを使って、必要な設定を行います。

  • Question Image: Question Imageオブジェクトを指定します。
  • Input Text: Answer Textオブジェクトを指定します。
  • Correct Text: Correct Textオブジェクトを指定します(ここではチェックを外します)。
  • Wrong Text: Wrong Textオブジェクトを指定します(ここではチェックを外します)。
  • Next Scene Name: 次に移動するシーンの名前を設定します。

さらに、”Questions”項目に問題を追加していきます。”Element()”の項目で必要な数だけ問題を追加し、各々の項目に以下の情報を入力します。

  • Question: 問題となるスプライトを設定します。
  • Answer: 正解となるアルファベットを入力します。

以上がUnityを使ってタイピングゲームを作る際の基本的な設定方法です。

Unityで実現!音声付きドラッグ&ドロップ機能の実装

こんにちは、Unityの使い方シリーズ第3弾です。

今回は、「ドラッグ&ドロップ」機能の作り方をご紹介します。ここでは、画像をクリックすると音声が流れ、画像をドラッグできる機能と、所定の場所に画像をドロップすると音声が流れる機能を組み合わせたインタラクティブなシステムを構築します。

まずは、ヒエラルギーの構成を理解しましょう。

ヒエラルギー

  • Canvas
  • Slot Parent(UIイメージで作成)
    • Puzzle Slot_finish(ドロップインする場所)
    • Puzzle Slot_end
  • finish(ドラッグするイメージ)
  • end
  • Spawn1
  • Spawn2

___ここまで全てCanvasの子オブジェクト___

  • Object Generator(スクリプト添付)
  • GameControllerGPT4(スクリプト添付)

ここで注意が必要なのは、すべてのこれらの要素がCanvasの子オブジェクトであることです。

次に、各オブジェクトに付け加えるべきコンポーネントとその設定を説明します。

Slot Parent(UIイメージで作成)

アドコンポーネント:Grid Layout Group(Constraint…Fixed Column Count)

Puzzle Slot_finish, end,…

アドコンポーネント:

  • Tag(finish):イメージの名前と同じに設定
  • Rect Transform
  • Canvas Renderer
  • Image
  • Audio Source
  • スクリプト(PuzzleSlot

die,…

アドコンポーネント:

  • Tag(finish):イメージの名前と同じに設定
  • Rect Transform
  • Canvas Renderer
  • Image
  • Audio Source
  • Canvas Group
  • スクリプト(DragDrop

Spawn1,…

アドコンポーネント:特になし

Object Generator

アドコンポーネント:スクリプト(ObjectGenerator

GameControllerGPT4

アドコンポーネント:

  • スクリプト(GameContoroller
  • Particle Prefabs(2つ作成)
  • Particle Spawn Positions(発生スタートさせる場所)

Red

アドコンポーネント:

  • Particle System
  • Audio Source(AudioClip(hooray), Loop)
  • Material(Red, Shader: Unity/Transparent)

これらの構成と設定を組み合わせることで、Unityにおける音声付きのドラッグ&ドロップ機能を実現します。今回ご紹介した内容を基に、自分だけのインタラ

アクティブなアプリケーションやゲームを作ってみてください。この仕組みは、教育ソフトウェア、パズルゲーム、ユーザーインターフェースなど、多くのシチュエーションで使用できます。

ただし、この基本的な設定だけではまだ完成していません。各スクリプト内で具体的に何を行うかを設定する必要があります。それぞれのスクリプト(PuzzleSlot、DragDrop、ObjectGenerator、GameContoroller)には独自のロジックが必要です。この例では、PuzzleSlotはドロップ先を、DragDropはドラッグされるオブジェクトの動きを、ObjectGeneratorはオブジェクトの生成を、GameContorollerはゲーム全体のフローとパーティクルの管理を制御します。

音声は、それぞれのAudio Sourceコンポーネントに関連付けられたAudioClipから流れます。音声は、ドラッグまたはドロップ操作の開始と終了時にトリガーされます。具体的には、ドラッグ操作が開始されると、”finish”オブジェクトのAudio Sourceから音声が流れ、ドロップ操作が完了すると、”Puzzle Slot”オブジェクトのAudio Sourceから音声が流れます。

Unityのドラッグ&ドロップ機能は、ユーザーインタラクションを豊かにし、よりダイナミックなエクスペリエンスを提供します。今回の記事を参考に、ぜひ自身のプロジェクトに応用してみてください。次回もUnityの使い方シリーズを通じて、さらに有用なテクニックをご紹介していきますので、お楽しみに!

それでは、Happy coding!

Unityの使い方シリーズ 2

【お絵描きアプリの作り方】

使用エンジン:Unity

皆さん、こんにちは!今日はお絵描きアプリの作り方についてお伝えします。現在開発中のアプリには、お絵描きツールが装備されています。では、作り方の手順を見ていきましょう。

まず、Hierarcheにあるオブジェクトを配置します。Canvsを2つ作成します。

  1. 1つ目のキャンバス(Canvas_Image)
  • キャンバスの順番 Order in Layerを「0」と設定します。
  • このキャンバスには、スプライトを付けます。
  1. 2つ目のキャンバス(Canvas_Button)
  • キャンバスの順番 Order in Layerを「2」と設定します。
  • このキャンバスには、色ペンなどのUIを付けたボタンを配置します。
    ボタンはParentを作り、Grid Layout Groupをアドコンポーネントし、その子としてボタンを付けています。それぞれのボタンはOn Click()でスクリプトで書いた色や消しゴムを設定する。

次に、スクリプトを使ってお絵描き機能を追加します。

  1. DrawingTool
  • このオブジェクトにスクリプトを追加します。
  • スクリプトには、お絵描きの機能を実装します。

また、お絵描きツールにはLineRendererを使用します。LineRendererには以下の設定を行います。

  1. Materials
  • LineMaterialという名前で作成したマテリアルを選択します(Assets内に作成します)。
  1. LineMaterialの設定
  • MaterialsタブでLineMaterialを選択します。
  • マテリアルの設定として、「Mobile/Particles/Alpha Blended」を選択します。

以上がお絵描きアプリの作り方の手順です。ぜひ、これを参考にして素晴らしいお絵描きアプリを開発してください!

Unityの使い方シリーズ 1

タイトル:Unityの操作手順

現在進行中のアプリ開発プロジェクトについて、作成過程をブログで少しずつ紹介していきたいと思います。

本日は、Unityの「Canvas」設定について説明します。

2Dバージョンのアプリを開発していますが、色々なディバイスで使用するされる事を考慮し、Canvasの設定を少し変更する必要があります。
これをしていないと、UIデザインがぐちゃぐちゃになってしまいます。

  1. Render Modeの設定
    開始するには、CanvasのRender Modeを「Screen Space-Camera」に設定します。
  2. Canvas Scalerの設定
    次に、Canvas Scalerを「Scale With Screen Size」に設定します。この設定は、異なるデバイスや画面サイズでの表示を最適化します。
  3. Reference Resolutionの設定
    Reference Resolutionを「1536×2048」に設定します。これは、デザインの基準となる解像度を指定します。
  4. Screen Match Modeの設定
    そして、Screen Match Modeを「Match Width Or Height」に設定します。この設定は、画面の幅と高さのどちらに対してUIがスケーリングされるかを決定します。
  5. Matchの設定
    最後に、Matchを「1」に設定します。これは、Screen Match Modeが「Match Width Or Height」に設定されている場合に、幅と高さのどちらによりスケーリングされるかを決定する値です。

以上がUnityのCanvasの基本設定となります。