文化祭入退場・混雑管理システム "CAPPUCCINO" 開発・運用記
この記事は、文化祭実行委員会に所属する[1]現高校 3 年生 3 人で文化祭の入退場混雑管理システム「CAPPUCCINO」を 2 年間に渡り開発し、実際に運用した記録を残したものです。 ＊この記事は以下の 3 名による共同執筆です 著者・開発者: すばる (@su8ru / Twitter:@su8ru_) 高校３年生。普段は TypeScript に使われながらウェブフロントエンド技術で遊んでいます。 たけ (@takeno_hito / Twitter:@Takeno_hito) こうこうさんねんせい。コーディングよりはゲームのほうが好きです。上下二人に揉まれながらも一応リーダーをやってました。 ふわわあ (@fuwa2003 / Twitter:@ibuki2003) 高3。Vimmer。半言い出しっぺなのに後半コード書いてないとかで最近は肩身が狭い思いをしています。 1. CAP
同時多発的に価値創出していく Ubie Discoveryのフロントエンド開発 / 20211127 JSConf JP Ubie Discovery
2021年11月27日開催 JSConf JPで使用したスポンサーLTの資料です
パッケージマネージャで配布されるマルウェア、対策と課題について - ぶるーたるごぶりん
はじめに 画像は記事に全く関係ないカニのフィギュアです👋 近年、善良なパッケージを騙ったマルウェアが配布されているケースが増えてきています。 これらのマルウェアはパッケージマネージャ上で配布され、開発者端末やそれをビルトインしたシステムを利用するユーザー端末で悪事を働きます。 これは俗にいうサプライチェーン型攻撃で、 これらの関連ニュースを目にする機会が増えてきていることを、多くの開発者が体感されていると思います。 ただ、これらのサプライチェーン型攻撃の記事は、 どうしてもエンドユーザー（パッケージを利用する開発者側・それらを組み込んだアプリを実行するユーザー側）の対策に焦点が当てられたものが殆どのように感じています。 そこで本記事では、このエンドユーザー側の対策だけではなく、 パッケージマネージャメンテナーたちがどう対策しているのかも含めて、 「パッケージマネージャ上で行われるマルウェ
増えたWindows Subsystem for Linuxのバージョン、またUSBデバイスの接続が可能に (1/2)
Windows 11が正式リリースされ、Windows Insider ProgramのDev Channelプレビュー版（以下Dev Channel版と略す）がWindows 11ベースとなった。また、Windows Subsystem for Linux（以下、WSL）のプレビューがMicrosoftストアで開始された。このため、WSLには複数のバージョンが存在することになった。Windows 11正式版以前は、Windows 10の機能アップデートで配付されるWSLとWindows Insider Program版に搭載されているプレビュー版のWSLの2つしかなかった。 まずは、現状のWSLのバージョンを整理しておこう。以下の表のように4つある。1つ目は、Windows 10に搭載されているもの、2つ目はWindows 11のもの、3つ目はDev Channel版だ。これに対してMi
TypeScript をより安全に使うために まとめ - Object.create(null)
こういう一連の記事を書きました. susisu.hatenablog.com susisu.hatenablog.com susisu.hatenablog.com TypeScript の型安全性 TypeScript の型システムは健全ではありません. TypeScript Design Goals にある通り, そもそも言語設計の段階で完璧な型安全性は目標になっておらず, 既存の JavaScript の言語仕様や資産を活用しやすいように, 生産性や利便性とのバランスをとることを目標としています. では TypeScript の型システムではどの程度の安全性が保証されるのでしょうか? 型安全性を第一の目標に置いていないとはいえ, TypeScript がまったく見当違いな型検査をしているというわけではありません. したがって, ある制限された範囲内であれば, 安全性を担保するのに十分
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
コンテナで動くGoアプリをデバッグする方法
初めに 最近開発環境を整備していて、コンテナでGoアプリケーションをリモートでデバッグするのにちょっと面倒だったので、自分のメモも兼ねてやり方を残しておきます。 要件 プロジェクトによりますが、今の現場では主要エディタがVSCodeです。 もちろんVimユーザー（うち一人はぼく）がいるので、ターミナルでもデバッグできるように対応する必要があります。 また、コード変更を反映させるために都度イメージをビルドしてコンテナを再作成するは開発スピードが落ちるため、コンテナ再起動だけで反映されるようにする必要があります。 デバッガのしくみ Goにはdelveというデバッガがあります。 delveはClient-Serverモデルになっていて、次の2つのプロトコルで通信が可能になります。 JSON-RPC DAP JSON-RPCはdelveのCLIに使われています。 DAPはMicrosoftが策定し
database
"); write(" "); write("【商人名】 "); write("【居所】 自 1 ～ 至 10 "); write("【現在地】 自 1 ～ 至 6 "); write("【職種・所持株】 自 15 ～ 至 30 "); write("【出典】 "); write("【フリーワード】 [全項目横断検索] "); write(" ※ 数字は半角で入力してください。 すべての項目を入力する必要はありません。 また、必ずしも各項目を完全に記述する必要もありません。入力された語が含まれるものが検索されます。 "); write(""); } w.focus(); } function SelectClear(sel2) { var len = sel2.length; for(i= len - 1;i >= 0;i--) { sel2.options[i] = null;
コンポーネントの分類について考えたことをまとめた
どのようにコンポーネントを分類していくか 個々のコンポーネントがが単一の責任のみ負っている状態であれば、コードの見通しも良くなる上、後々のメンテナンスも容易です。 まずは「複数の関心ごとを１つにまとめない」という原則（単一責任の原則）から分類の指針を考えていきます。 フロントエンドにおける関心ごとですが、大別すると APIとの接続 View（表示とイベント実行） 状態管理 以上３つに集約されるのではないでしょうか。 では、これらの関心ごとをどの様に切り分けていけば良いのか考えていきます。 APIとの接続 まずはAPIとの通信ですが、こちらはコンポーネントの外で管理した方が良いと考えています。 各コンポーネントに通信に関わる処理がベタ書きされている状態だと、エンドポイントの変更等に弱くなり、通信処理の再利用も面倒です。 それに、「フロントの状態管理 / 表示」と「外部との接続」はそれぞれ別種
変数(variable)と値(value) - ソフトウェア設計を考える
はじめてScalaに触れたとき、変数宣言(var)と値宣言（val)を使い分ける言語仕様に、なるほどなあ、と思った。簡単に言えば、変数(var)は再代入できて、値（val)は再代入できない。 プログラミングのスタイルとして、var宣言は命令的なプログラミング、val宣言は宣言的なプログラミングになる。どちらのプログラミングスタイルで書いているかを、varとvalで明示できるわけだ。 Javaだと言語の基本の仕組みはすべてが変数。final宣言をすることで再代入をコンパイルエラーにすることはできる。Javaは、C言語やC++などの命令的なプログラミングの系譜の言語なのですべて変数(variable)というのは、とうぜんの言語仕様だった。 命令的なスタイルから宣言的なスタイルに 命令的なプログラミングでは変数(variable)を使う。宣言的なプログラミングでは値(value)を使う。 再代入
電車の運行情報をOLEDディスプレイでチェックする【追記あり】
第49回では、3色のLEDで簡易的に鉄道の運行状況を知る方法についてご紹介しました。しかしLEDだけだと詳しく分からないですよね。そこでやはり、ディスプレイを使って運行情報を表示する仕組みを作っていきましょう。 編集部より 電車の運行情報を取得する過程で取り上げた「Yahoo！路線情報」を運営するヤフーより、同サービスの利用規約についての指摘がありました。内容を検討した結果、記事を取り下げます。 関連記事 電車の運行情報を通知LEDでチェックする【追記あり】 「Yahoo！路線情報」から情報を取り出して、状況をLEDで分かるようにしてみます。 部屋の二酸化炭素濃度を測定しよう ラズパイでCO2センサーを作る ラズパイを使ってCO2を計測し、部屋の換気をする目安にしてみましょう。 550円の「Raspberry Pi Pico」でIoT その1：気温と湿度、気圧を測定する 独自開発のチップ「
PC/macOSのマイクがミュート状態か入力中かを表示するアプリを書いた
mic-mutebarというPCのマイクがミュート状態か入力中(話している状態)かを表示するシンプルなアプリを書きました。 マイクの状態を表示するシンプルなアプリを書いた。 ミュートした状態で話してしまう問題を回避する目的 -- azu/mic-mutebar: mic mute status barhttps://t.co/GiYHoccZEY pic.twitter.com/jM2auYWWfG — azu (@azu_re) November 27, 2021 シンプルな棒状のアプリで、透明ウィンドウになっているので任意の位置に移動してマイクの状態を表示できます。 作った理由 前のMacbook ProではTouchbarがあったのですが、MacBook Pro (14”, 2021)に変えたらTouchbarがありませんでした。 Touchbarでは、Mutify for Macを
描写から構成へ 『Every Layout』とコンポジション指向CSS
ヘイドン・ピカリングとアンディ・ベルの共著『Every Layout』が日本語に翻訳された。光栄なことに僕も出版前のレビュワーのひとりとして、微力ながらお手伝いさせていただいている。 タイトルが示すとおり、本書はCSSによるウェブデザインのうち「レイアウト」の問題に焦点を絞ったものだ。レイアウトといってもページ全体のグリッドのことだけではなく、ボタンやアイコンのような小さな部品に至るまで、CSSが「ボックス」として扱うあらゆる要素を対象としている。 テーマの根底にあるのは「コンポジション」というコンセプトだ。CSSによってインターフェイス部品を形づくるとき、それらひとつひとつを独自の、独立したものとして捉えるのではなく、基本的で小さなレイアウトの組み合わせたコンポジションとして捉えるべきである、と著者は主張する。そしてそのように組み合わされる小さなレイアウトを「レイアウト・プリミティヴ」と
【悪用厳禁】mitmproxyを使えばSSL通信でも傍受できる
最初に言っておきます。 mitmproxyは、開発の生産性をUPさせるモノです。 上手く使えば、開発の生産性がかなり向上します。 しかし、悪用しようと思えば悪用も可能です。 SSL通信であっても、通信を傍受できてしまいます。 つまり、パスワードをのぞき見することが可能になります。 でも、これは確実に犯罪です。 したがって、決して悪用はしないください。 今回は、そんな危険な可能性を持ったmitmproxyを紹介します。 本記事の内容 mitmproxyとは？mitmproxyのシステム要件mitmproxyのインストールmitmproxyの動作確認 それでは、上記に沿って解説していきます。 mitmproxyとは？ mitmproxyとは、SSL/TLS対応のインターセプトプロキシです。 わけがわからないですね。 もうすこしわかりやすく説明します。 インターセプトとは、通信の傍受という意味で
Capacitor: Webアプリをクロスプラットフォームに展開
import { LocalNotifications } from '@capacitor/local-notifications'; LocalNotifications.schedule({ notifications: [ { title: "On sale", body: "Widgets are 10% off. Act fast!", id: 1, schedule: { at: new Date(Date.now() + 1000 * 5) }, sound: null, attachments: null, actionTypeId: "", extra: null } ] });import { Geolocation } from '@capacitor/geolocation'; // get the users current position const pos
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アクセシブルなフロントエンド開発のこれまでとこれから / the past and future of accessible front-end development
大学生に『書くこと』の授業をしたときに 引き合いに出した本 / books on writing for students
GitHub - factorysh/redistop: Use Redis' MONITOR to draw things in a terminal
加速するEdge Computing
GitHub - utkusen/reqstress: a benchmarking&stressing tool that can send raw HTTP requests
Deserialization on Rails
組織フェーズを見据えたWebフロントエンドのアーキテクチャと変遷
GCP Cloud Functions(GCF)を使って画像に文字を埋め込む方法 - アルパカログ
GitHub - damoeb/rss-proxy: RSS-proxy allows you to do create an RSS or ATOM feed of almost any website, just by analyzing just the static HTML structure.
GitHub - postcss-rs/postcss-rs: 🚀 Fast and 100% API compatible postcss replacer, built in Rust
Firebase Hosting を使った HTML, CSS, Prettier, Dockerのサンプルコード
【CTF】OSINT問題で個人的に使用するツール・サイト・テクニックまとめ - Qiita
はじめに — 機械学習帳