マック屋

趣味のプログラム開発日記。HTML, CSS, JavaScript, PHP, Sw…

マック屋

趣味のプログラム開発日記。HTML, CSS, JavaScript, PHP, SwiftUI 🔰ブログ https://taiyosite.com/ 💻作ったアプリ https://taiyo8911.cloudfree.jp/

  • Bangle.js2

    自作プログラムを動かせるスマートウォッチ「Bangle.js2」の話。

  • ウェブのしくみと作り方

    ウェブサイトのしくみと作り方

  • ブロックチェーンアプリ制作

    ブロックチェーンアプリの作り方、DApps

  • 家事の工夫

    料理、掃除、洗濯など家事に関するライフハックについて。

  • 【JavaScript】ポケモンWeb図鑑を作ってみた

    JavaScriptで作る「ポケモンWeb図鑑アプリ」の開発記録。

すべてのマガジンを表示

【アプリ開発】Bangle.jsでカウンターアプリ

Bangle.js用のカウントアッププログラムを作りました。 画面タップでインクリメント。 ボタン押下でリセット。 シンプルなカウンターアプリです。 // カウントを保持する変数var count = 0;// 画面の表示設定を行う関数function setupDisplay() { g.clear(); // 画面をクリア g.setFontAlign(0, 30); // 文字位置の設定 g.setFont("6x8", 5); // フォントの設定 g.se

マック屋

    • Bangle.js【ボタン押下イベント】

      Bnagle.jsでボタンが押された時の処理方法です。 setWatch(function() { // ここにコードを記入}, BTN, { edge: "rising", debounce: 50, repeat: true }); オプションについて① edge: "rising" いつ実行するか（ボタンが押された瞬間） ② debounce: 50 ボタン押下後の待機時間（50ミリ秒間は新たなボタンの押下を無視する） ③ repeat: true イベ

      マック屋

      • Bangle.js【画面タップイベント】

        タップイベントの設定Bangle.jsで画面をタップした時に処理を行うコードです。 Bangle.on('touch', 関数名); サンプルアプリ画面がタップされた時にカウントアップするカウンターアプリのコードです。 // カウントを保持する変数var count = 0;// 画面の表示設定を行う関数function setupDisplay() { g.clear(); // 画面をクリア g.setFontAlign(0, 30); // 文字位置の設定

        マック屋

        • Bangle.JS【システム設定編 】

          Bangle.jsで設定できる項目をあげていきます。システム設定編です。 theme（テーマ）ライトモード、ダークモードの切り替え オリジナルにカスタマイズも可能 LCD（ディスプレイ）Calibrate（タッチパネルの調整） タッチ位置の補正 LCDBrightness 画面の明るさ LCD Timeout バックライト消灯までの時間 Rotate（表示の向き） No Rotate CW 横 Left Handed 左利き設定 Rotate CCW

          マック屋

        【アプリ開発】Bangle.jsでカウンターアプリ

        マック屋

        マガジン

        • Bangle.js2
          10本
        • ウェブのしくみと作り方
          7本
        • ブロックチェーンアプリ制作
          2本
        • 家事の工夫
          2本
        • 【JavaScript】ポケモンWeb図鑑を作ってみた
          2本
        • HTML,CSSの基礎
          11本

        記事

          Bangle.js2でHello World!!

          スクリーンショット サンプルコードvar ms = "Hello World!!";// まずは画面のクリアg.clear();// 背景を塗りつぶすg.setColor(0, 1, 0);// (xの始点, yの始点, xの終点, yの終点)g.fillRect(0, 0, g.getWidth(), g.getHeight());// 文字位置の指定g.setFontAlign(0,0);// フォントの指定（bitmapで2倍）g.setFont("6x8",2);/

          マック屋

          Bangle.js2でHello World!!

          マック屋

          画面背景の塗りつぶし

          スクリーンショットのサンプル プログラムの全体像画面を塗りつぶすプログラムは、大きく3つの文で実現できます。 ①まずは画面のクリアBangle.jsでは、何をするにしても「まず画面をクリア」することが必要です。 ②色を指定つぎに、setColor(r, g, b)で塗りつぶしの色を指定します。 ③四角形を描画する最後に、g.fillRectで四角形を描画します。 g.fillRect(xの始点, yの始点, xの終点, yの終点) 「どこからどこまで塗りつぶすか」

          マック屋

          画面背景の塗りつぶし

          マック屋

          【Bangle.js2】文字色の指定

          Bangle.js2で文字の色を変える方法です。 文字色を指定する方法は2つ。 どちらもrgb値を指定する。 やり方Aは、数値0〜1の間で指定する。 やり方Bは、カラーコードで指定する。 やり方A（0〜1で指定する）g.setColor(1, 0, 0); // 赤g.setColor(0, 1, 0); // 緑g.setColor(0, 0, 1); // 青 やり方B（カラーコードで指定する）最大値は FFFFFF g.setColor("#000000"

          マック屋

          【Bangle.js2】文字色の指定

          マック屋

          Bangle.js2で作ってみたいアプリ

          Bangle.js2の公式サイトにはプログラムのサンプルが並んでいる。 その中からいくつか作ってみたいアプリがあったのでリストアップしていく。 QRコードを表示するアプリ(ウェブサイトへのリンク) 音声アラートアプリ カウンターアプリ 文字をする表示するアプリ

          マック屋

          Bangle.js2で作ってみたいアプリ

          マック屋

          Bangle.js2とは

          スマートウォッチ「Bangle.js2」とはウェブから新しいアプリを簡単にインストールしたり、JavaScriptを使って独自のアプリを開発したりできます。必要なのはウェブブラウザ（Chrome、Edge、Opera）だけで、アプリをアップロードしたり、コードを書いてワイヤレスに時計上で実行できる。防水、AI対応、Bluetooth Low Energy、GPS、心拍計、加速度計などを搭載している。 Espruinoという実行環境でJavaScriptが動く 作成したプロ

          マック屋

          Bangle.js2とは

          マック屋

          自作プログラムを動かせるスマートウォッチを探す

          「自分で作ったプログラムをスマートウォッチで動かしたい。」 と思ったのでGoogleで色々調べると、3件ヒットしました。 自作プログラムが動かせるスマートウォッチ3選①watchX ②Bangle.js 2 公式サイトで購入できます。イギリスから発送されるようです。 Amazonでは売っていません。 ③LILYGO TTGO T-Watch-2020 これはAmazonで売っています。 感想You Tubeで調べてみると、Bangle.js2の情報が一番出てくる

          マック屋

          自作プログラムを動かせるスマートウォッチを探す

          マック屋

          Webマイ禁煙カレンダーを作った

          すごく個人的な話ですが、禁煙の成果を「目に見える形にしたい」と思い立ったのでウェブアプリを作ってみました。 禁煙の経過日数、禁煙本数、節約できたお金を計算して表示するウェブページです。 毎日このページを開くことで、禁煙を継続するモチベーションにつなげます。 欲しい方がいらっしゃいましたら、お気軽にメッセージをください。

          マック屋

          Webマイ禁煙カレンダーを作った

          マック屋

          【書評】ひろゆきの「プログラマーは世界をどう見ているのか」

          ひろゆき（西村博之）さんの「プログラマーは世界をどう見ているのか」を読みました。 この本は、プログラミング初心者の入門にピッタリな内容です。プログラミングを学ぶメリットを実例を交えて解説したり、実際に自分で書いて動かしてみる体験を通してプログラミングの基礎を楽しく学べます。 この記事では、印象に残った話をご紹介したいと思います。 印象に残った話読んだ中で印象に残ったところを挙げます。 ①ボトルネックを見つける ボトルネックとは、生産性の低下を招いている箇所です。これ

          マック屋

          【書評】ひろゆきの「プログラマーは世界をどう見ているのか」

          マック屋

          web3の所感

          2022年web3が流行している。 web3とは？社会（経済）が大きく変わるかもしれないムーブメント。デジタル技術の進化によりブロックチェーンやVRが浸透してきている。資産をデジタルで所有し、メタバースやVR空間での経済活動を総称してweb3と言う。webの技術としてのweb3.0とは別物の話。 なぜweb3に変わるのか？web1.0 情報は世界中のサーバーコンピュータに保管され、誰でもインターネットを安く利用できた。ネット上にあるデータは人類が共有する資産だった。

          マック屋

          web3の所感

          マック屋

          パソコンやスマホにWebサイトが表示されるしくみ

          24時間365日、いつでもどこでも、知りたい情報を閲覧できる時代です。 そんな便利なWebサイトは、なぜパソコンやスマホの画面に表示できるのか。 ウェブの仕組みについてのお話です。 パソコンやスマホの画面にWebサイトが表示される仕組みその答えは、ブラウザが頑張っているからです。 インターネットで検索する時に何気なく使っているソフト「ブラウザ」です。 では、ブラウザはどのような仕事をしているのか？ ブラウザとはブラウザは、ユーザーの依頼を受けると、サーバーと呼ばれ

          マック屋

          パソコンやスマホにWebサイトが表示されるしくみ

          マック屋

          ウェブサイトとは何か？

          「Webサイトとは何か」か考えていきましょう。 WebサイトとはWebサイトとは、文字や画像などを使って、何かを宣伝したり、お知らせするためのコンテンツです。ホームページと言われたりもします。 この目的は「情報を伝えること」です。 情報とは、データと言い換えてもいいと思います。 Webサイトに表示できるものWebサイトには、以下のような情報を表示することができます。 文字 画像 音楽 動画 どんなサイトも、基本的には4つの要素から作られています。 あとは、

          マック屋

          ウェブサイトとは何か？

          マック屋

          Google Apps Scriptで雨予報通知システムを作る

          Google Apps Script（以下GAS）を使って「雨予報通知システム」を作りました。 「雨予報の時だけGmailでメールを送るシステム」です。 開発の経緯このアプリを作ったきっかけは「天気アプリを毎日チェックするのって面倒だな。」と思ったことです。 雨予報の時だけ、通知が来たら便利だと思ったからです。 GASについてこのアプリはGASを使って作りました。 GASを使った理由は3つあります。 スクレイピングが簡単 Gmailの送信が簡単 定期実行も簡単

          100
          マック屋

          Google Apps Scriptで雨予報通知システムを作る

          マック屋