- 1. Monacaを使ったアプリ制作の授業でのサンプル
- 2. 【Publisher】Let’s create a hybrid report
- 3. 各言語のplaygroundまとめ
- 4. Windowsのデスクトップに表示するデジタル時計をHTAでささっと作る
- 5. GPTsでドキュメント生成ツールを作成しました。
- 6. 【パブリッシャー】ハイブリッドレポートを作成してみる
- 7. [JavaScript]今日と一致する日付かどうかを判定する方法
- 8. [React] なるべく状態を少なくしたい
- 9. 【JavaScript】ローカルストレージの使用方法
- 10. Default Export vs Named Export
- 11. ReactのJSZipでzipファイルを開くまでのあれこれについてまとめてみた
- 12. JavaScript, Reactで作る自前のビデオプレイヤー
- 13. Object.entries()を使用したオブジェクトの配列化
- 14. ついに JavaScript に groupBy が実装されたぞ！！！
- 15. グーグルマップの競合店を目立たせたくない！ Webデザイナーの為のHERE Mapガイド
- 16. アマゾンの激安品を随時お知らせするウェブアプリ作った【個人開発】
- 17. Pleasanter Tips: データの編集権限を付与する
- 18. [JavaScript] 複数の非同期処理の完了後に何かしたい場合
- 19. Cheerp 3.0： Web用の最も先進的な C++ コンパイラ、 ライセンス提供開始
- 20. ムジュラの仮面のようなお面をつくりたい【前編】
Monacaを使ったアプリ制作の授業でのサンプル
The data filtered through the prompts will be displayed, creating an interactive web report where users can take actions on the displayed data. In this example, two buttons, `Approve` and `Re
各言語のplaygroundまとめ
直近、golangの現場で2年近くやらせていただいてるのですが、Go Playgroundめっちゃ便利ですよね！
バージョンも選べて、なおかつコードもシェアできて、ちょっと書いて実行して確認して、結果や内容を共有できるの最高ですいくら実行環境を簡単に用意できるような時代になったとはいえ、「ちょっと試したい」みたいなときってあるじゃないですか。
ということで、今回はいろんな言語のPlayground事情の調査も込めて、まとめていこうと思います# go
https://go.dev/play/# javascript
vueやreactまで？！これはすごい！！https://playcode.io/
# node.js
https://stackblitz.com/edit/node
Windowsのデスクトップに表示するデジタル時計をHTAでささっと作る
# はじめに
今の職場には時計がない。仕事に没頭すると会議に遅刻しそうになったりする。視線移動が少なくて済むよう Windows のデスクトップ上で適切な（それなりに目立つけど邪魔にならない）大きさで表示する時計を自作することにした。ということで，お手軽にユーザーインターフェースを作れる HTA（HTML Application）で作成することにする。
# 描画エンジンの変更
HTML5 の canvas を使って時刻を描画するのが楽なのだが，デフォルト（IE6）では対応していないため，IE9 に切り替える必要がある。“`html
“`# ウィンドウのリサイズ
一応 HTML 部分で `canvas` のサイズを指定しているが，ここでは無効であり，実際には JavaScript 部分の `setAttribute()` で決定している。初期化時にウィンドウサイズを計測し，`canvas` の大きさを超過する分だけウィンドウを小さくしている。つまり，ウィンドウを `
GPTsでドキュメント生成ツールを作成しました。
# GPTsでドキュメント生成ツールの作成
GPTsでプロンプトにコードを貼り付けるだけで関数のドキュメントや1行1行に処理の説明を入れてくれる「**Coding Documentation GPT**」を作成しました。使ってみてください。
使用した後に意見をいただけると幸いです。https://chat.openai.com/g/g-6V7SNo6F2-coding-documentation-gpt
—
## 使い方
ドキュメントや生成したいコードを貼り付けるだけです。
下記みたいに雑にプロンプト投げてもらって大丈夫です笑プロンプト例
“`text
User
import os
import tweepydef tweet(consumer_key, consumer_secret, access_token, access_secret):
#オブジェクト作成
client = tweepy.Client(
consumer_key = CONSUMER_KEY,
consumer_secret = CONSUMER_
【パブリッシャー】ハイブリッドレポートを作成してみる
# はじめに #
今回はWEBレポートの応用編を紹介します。
プロンプトとテーブル部分はSharperlight標準のものを使用し、それにカスタムした部分を追加します。
プロンプトで絞り込んだデータが表示され、そのデータに対してユーザーがなんらかのアクションを起こせるような対話型のWebレポートとなります。
この例では、`Approve`と`Reject`という二つのボタンを用意し、それぞれのボタンが押されればそれに対応した処理を行われるようにJavaScriptで処理を記述します。
# WEBレポートの作成 #
Sharperlightアプリケーションメニューより**パブリッシャー**を起動します。
; // 現在の日付と時刻を生成
const targetDate = new Date(2023, 10, 30); // 2023年11月30日0時0分を生成
“`
前提として、**判定したいのは「日付」のみ**であり、経過時刻は加味しないこととします。## 方法①：`.toDateString()`を使う 🌟おすすめ🌟
“`js
console.log(date.toDateString());
// => “Thu Nov 30 2023”
console.log(targetDate.toDateString());
// => “Thu Nov 30 2023”console.log(date.toDateString() === ta
[React] なるべく状態を少なくしたい
## たとえば、在庫数カウントと表示の分岐をひとつにまとめる
商品のJSONを**items**、売り切れのプロパティを**soldout**としている。
propsで親から渡ってきているとして、“`js
function itemStockLength() {
return items.value.filter(item => item.soldout === false).length
}
“`この関数で売り切れでない＝在庫のある商品の総数が出す。
総数が0以下の場合は、そのカテゴリ自体を表示しない。
“`jsx
// propsでカテゴリの商品がitemsとして渡ってきているとしてfunction itemStockLength() {
return items.value.filter(item => item.soldout === false).length
}return (
<>
{itemStockLength() > 0 ? (
【JavaScript】ローカルストレージの使用方法
## 保存
“`js
localStorage.setItem(‘key’, ‘value’)
“`## 取得
“`js
localStorage.getItem(‘key’)
“`## 削除
“`js
localStorage.removeItem(‘key’)
“`全て削除
“`js
localStorage.clear()
“`## keyが存在するか
“`js
localStorage.hasOwnProperty(“key”)
“`
Default Export vs Named Export
## Default Export
– 単一性：1つのファイルにつき、1つの Default Export が可能です。
– 名前の不要性：エクスポートする際、特定の名前を指定する必要はありません。
– インポートの柔軟性：インポートする際には任意の名前を付けることができます。“`ts
// SomeModule.ts
export default class SomeClass {
…
}
“`
“`ts
import SomeClass from ‘./SomeModule’;
“`## Named Export
– 複数可能性：1つのファイルから複数のエンティティ（関数、クラス、オブジェクトなど）をエクスポートできます。
– 名前の必要性：エクスポートする際には、それぞれに固有の名前を付ける必要があります。
– インポート時の名前一致：エクスポートした際の名前をそのまま使ってインポートします。“`ts
// SomeModule.ts
export class SomeClass {
…
}export function someFu
ReactのJSZipでzipファイルを開くまでのあれこれについてまとめてみた
フロントエンド上で、zipファイルを展開したいというのは一度は考えたことあるはずです。
自分も、コーディングテスト機能を作るときに、バックエンド（Laravel）からAPI経由で降ってくるzipファイルをReact上で展開しようとしました。その時のノウハウをここに書いていきます。
# 前提知識
– ### JSZipについて
JSZipとはJavaScriptのライブラリの一つで、zipファイルを解答・圧縮するライブラリです。
今回はこのJSZipを用いた場合の展開のやり方を紹介します。– ### Blob型について
BLOB（Binary Large OBject）とは、データベースで用いられるデータ型の一つであり、ビデオや音声、圧縮ファイル、実行ファイルなどの非構造化データ、プレーンテキスト（平文の文字数字）以外のバイナリデータを格納する際に用いられます。
要は、文字以外のデータです。
MySQLにバイナリデータというのは入れることは出来るのですが、そのときに用いられる型です。
このBlob型の知識がないと、今回のようなバイナリデータをブラウザ上で展開するといったこ
JavaScript, Reactで作る自前のビデオプレイヤー
# はじめに
この記事は、個人開発の際に得た知識を、いつでも見返せるように保存する目的で使用しているため、言葉足らずかつ不適切である箇所が多々あるかと思います。気付いた箇所がありましたら、ご一報いただけると幸いです。Webアプリケーションにビデオプレイヤーを内包する場合、既存の素晴らしいモジュールの使用をファーストオプションとして考えるかと思います。ですが、今回は学習も兼ねて、敢えて自前で拵えたいと思います。
# 前提
– Node.jsのインストールが済んでいる
– [Material UI](https://mui.com/material-ui/getting-started/installation/)のインストールが済んでいるMaterial UIは必須ではないのですが、動画再生ボタンやシークバーなどに使用します。それら自体も自作することはもちろん可能ですが、本筋から逸れる恐れがあるので既存のパッケージを利用させていただきます。
適当なディレクトリを用意し、その中で開発を進めていきます。ディレクトリ名は任意です。`create-react-app`を使用するのもよ
Object.entries()を使用したオブジェクトの配列化
**あくまで初学者が学習した内容をまとめておくノートのようなものなので間違っている点がある可能性は高いです。**
## Object.entries()とは
`Object.entries()`は、連想配列（JSでは**オブジェクト**と呼ばれることが多い）を配列化するために使用されるメソッド
**＊[ 連想配列 → 通常配列 ]の変換を行う装置のようなもの＊**
## Object.entries()の使い所
`foreach`で要素を使用した処理を行う時などに使用する。（この場合）`forEach`を連想配列に対して直接使うことはできない。
そこで`Object.entries()`を使用し、連想配列を配列に変換することで`forEach`で連想配列内の要素を扱えるようにする。## Object.entries()の使用例
“`js
{
// 連想配列
const price = {
apple: 200,
orange: 300,
};// 連想配列を通常配列に変換
ついに JavaScript に groupBy が実装されたぞ！！！
JavaScript標準でgroupBy関数が実装されています。2023年11月現在Safari以外の主要なブラウザで実装済みで、SafariもTechnology Previewのようです。
（現在MDNの日本語の記事は古い情報のままになっており、現行と異なるので注意！）Proposal の Stage はすでに 4 / Finished なので規格として確定済みです。
https://caniuse.com/mdn-javascript_builtins_object_groupby
https://caniuse.com/mdn-javascript_builtins_map_groupby
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/groupBy
#
グーグルマップの競合店を目立たせたくない！ Webデザイナーの為のHERE Mapガイド
## 地図表示で、こんな悩みありませんか？
Webページで、店舗までのアクセスや地図を表示するためにグーグルマップを使うと、、、・思わぬ競合店と一緒に表示されてしまう。
・情報が多すぎて、分かりにくい
・ユーザーレビューや広告がビジネスに悪影響を与えてしまう。そんな悩みを抱えるあなた、安心してください！
新しい地図サービスHERE Mapが、これらの問題を解決してくれるんです。詳しくみていきましょう。## こんな方におすすめ
・ホームページに地図を埋め込みたい人
・グーグルマップを使うと競合店が表示されて困っている人
・グーグルマップ以外のマップを使いたい人
・Webデザイナー（自社サイト、クライアントサイトを担当）
・マーケティング担当者## グーグルマップとHERE Mapを比較表示してみた
結論から先に。
この記事を読むと下記のように、紹介したお店をHERE Mapに表示してWebページに埋め込めるようになります。(例)たまプラーザのラーメン屋(赤坂一点張)を地図に表示
」は、お得・激安・特価情報を効率的に発信することを目的としています。本アプリでは、最新の開発技術とテックスタックが活用されています。Next.js、MongoDB、WebSocket、Nginx、Dockerなどの技術を駆使し、使いやすく迅速な情報提供を可能にしています。
# 項目
サンプルでは下記の項目を追加しました。
|項目|タイトル|設定|
|—–|—–|—–|
|分類B|ユーザーアクセス|[[Users]]複数選択可能|
|分類C|グループアクセス|
[JavaScript] 複数の非同期処理の完了後に何かしたい場合
## どちらが先に終わるかわからない。
同時に始めた非同期通信はどちらかが先に終わるかわからない。
たとえば同じ関数内で非同期通信を同時に始めて、両方のレスポンスが終わったら何かしたい、というケースはよくあると思う。その場合、自分は下記のように、responseがOKでなかったらreturnする処理をそれぞれの通信に書いていた。
“`js
if (!response.ok) {
console.error(“エラー:”, response);
return;
}
// これを非同期通信の数だけ書く
“`しかし、もっともパフォーマンスがよいのは、**Promise.all** かもしれない。
## Promise.all
“`js
async function waitMultiple() {
const promises = [
wait(3), // 非同期A
wait(5) // 非同期B
];
const messages = await Promise.all(promises);
Cheerp 3.0： Web用の最も先進的な C++ コンパイラ、 ライセンス提供開始
本日 (March 14, 2023)、Web用C++コンパイラの最新メジャーリリースであるCheerp 3.0を発表できることを大変誇りに思います。Cheerpの前リリース[Cheerp 2.7](https://leaningtech.com/cheerp-2-7-compile-c-to-webassembly-plus-javascript/)から1年以上が経過し、この新しいバージョンは、Webアプリケーションやゲームのためのプログラミング言語としてC++を使用することの最先端をもう一度動かすような新機能や最適化機能が満載です。
最も重要なことは、今回のリリースで、Cheerpのライセンスモデルに大きな変更を加えるということです。Cheerp 3.0から、すべてのコンパイラのコアコン
ムジュラの仮面のようなお面をつくりたい【前編】
# ムジュラの仮面23周年おめでとう
2000年にNINTENDO64のゲームソフトとして発売された「ゼルダの伝説 ムジュラの仮面」。当時小学生だった私は、月が落ちてくるのが怖すぎて、クロックタウンからストーリーを進められませんでした…。それからNintendo Switchで遊べるようになり、大人になっても怖い感情はそのままに全ての仮面とお面を揃えるまで夢中になってプレイしました。
任天堂公式HPより# オリジナルお面をつくりたい！
ということで私が考えたお面はその名も、
**「まっくらのお面」**
お面をかぶったら辺りが真っ暗になります。工程は以下の通り。
1. お面をかぶる
1. それを検知し通知する
1. 電気を消す
1. 仮面が光るこの記事は前編で、工程1と2を実施します。
# アイテム
– ど
