先日、display:contents;というプロパティをはじめて知りました。 他のdisplayシリーズと比べるとあまり馴染みがなかったので、今回はdisplay:contents;とは何か、どんな場面で使えるのかについて紹介します。 1. 結論 display:contents;を指定した要素は、あたかも存在しないかのように扱うことができる これにより、グリッドレイアウトやレスポンシブデザインを作成する際に便利に活用できる ただし、アクセシビリティに課題が残るため、慎重に使用する必要がある 2. display:contents; とは？ 2-1. display:contents;の概要 display:contents;を指定した要素は、存在しないかのように扱われ、指定した要素の子要素が直接親要素内に挿入されます。 Mdn Web Docsでは以下のように説明されています。 これら

はじめに この記事では今回開発したWebアプリ、自閉症識別（後に理由を説明しますが、動作が大変モッサリです）を公開するまでの経緯や考え・思いをまとめた。 6月中旬に差し掛かる頃から、Aidemy PewmiumのAIアプリ開発コースで、Pythonを用いてアプリ開発を行えるようになることを目標に学んできた。その成果として開発したのが、顔写真から自閉症を判別するWebアプリだ。 この記事では私自身がプログラミング超初心者として、そしていち支援者として感じたことも多く綴っているため、必要に応じて適宜読み飛ばしてもらえると良いかもしれない。 開発開始に至るまで 私はこちらの記事にあるように、保育士として児童発達支援に関わってきた。大変ではあるが非常に楽しい仕事だった。とはいえAidemyの講座受講中、成果物を何にするかをずっと考えていたが、この領域で何かやろうなんてことは全く考えていなかった。

Webサービスのフォームに住所を入力するとき、丁目や番地などを入れる欄について、数字やハイフンを全角で書かなければいけない「全角縛り」をやっているフォームをよく見ます。半角文字を入力してしまってエラーになったり、咄嗟に変換方法を思い出せなかったり、全角と半角の見分けが付きづらかったり、「全角縛り」であることが明示されていなかったり、「ハイフン」としてどの文字を使うべきかわからなかったり……と、鬱陶しさを感じることが多くあります。 「住所は全角のみ」（数字やハイフンも絶対に半角を受け付けない）という仕様がどういう経緯で生まれて、どう広まっていったのかが気になってる。いま存在しているのは過去の仕様や慣習の踏襲として理解できても、そもそもなぜそれらが生まれたのかが理解できない。 https://t.co/ZLz0Pw9GOK — ymrl (@ymrl) July 29, 2024 これについて

はじめに こんにちは@Sicut_study (Watanabe Jin)です。 去年の10月頃にReactのロードマップを投稿しておかげさまで1000いいねもすぐそこになりました そこから私自身も状況がかなり変わり、大好きなReactを使ってプログラミングを教えるスクールを運営しております。 エンジニアになりたい完全未経験の方や、すでにエンジニアだけどもっと自由にプログラミングができるようになりたい人をたくさん教えてきました。 👇メンバーの記事はこちらにあります その中である程度この流れで学習をすすめていけば1-2ヶ月程度でReactで自由にサービスを作れるレベルに再現性をもってレベルアップすることができると確信がもてたので、 実際にやっているカリキュラム(React部分)をすべて紹介します ロードマップは完全未経験でもできるようなものになっていますのでわかる箇所は飛ばしてもOKです。

今回は、SSH接続を劇的に高速化する方法をご紹介します。たった3行の設定を追加するだけで、接続時間を10分の1に短縮できます。しかも、2回目以降の接続では認証も自動的に行われるので、パスワードやパスフレーズの入力も不要になります。 要点 .ssh/configファイルのHost *セクションに以下の3行を追加するだけです。 詳しい説明 1. ControlMaster auto この設定で、1つのSSH接続で複数のセッションを共有できるようになります。新しくSSH接続を確立するたびに認証情報を入力し直す手間が省けて、接続がぐっと速くなります。具体的には： 初回の接続時のみ認証が必要 2回目以降は既存の接続を再利用するため、認証プロセスをスキップ パスワードやパスフレーズの入力が不要になり、接続がほぼ瞬時に完了 2. ControlPath ~/.ssh/mux-%r@%h:%p Contr

はじめに お客様に提案をしているときの会話です。 お客様：「詳細設計書は作りますか」 私：「昔ながらの詳細設計（ロジックを日本語で書くもの）は作りません。クラス図とか、シーケンス図は複雑であれば作りますが、今回のシステムはそこまで必要なものはないものなので、割愛しようと思っています。」 お客様：「保守をお願いするかどうか未定なので、場合によっては引継ぎのために作ってもらうかもしれません」 私：「・・・・」 といった感じで、私がこの業界に入った30年前は、確かにプログラムを作る前に、詳細設計書と呼ばれるプログラムを日本語で書いていました。 最近、詳細設計と呼ばれるものを作った記憶がなく、無駄なものは作りたくないなぁという思いから、コードから自動生成できないかなと思って、いろいろ試してみました。 Doxygenって いろいろ調べてみると、Doxygen にたどり着きました。 色々な言語に対応し

きっかけ 東京大学のAWS講義「コードで学ぶAWS入門」、いわゆる東大AWSってやつが良いらしいと聞いたのでやってみました。 確かにこれは良いです。クラウドをこれから学びたい方にぜひおすすめ。 集中講義的に休日に半日もあれば学べます。 かかるAWS費用もわずか。 ほとんどのチュートリアルがAWSの無料枠で実行できてしまいます。ディープラーニング用のGPUインスタンスをぶん回すところは有料です。それでも数百円で済みます。 これは一通りハンズオンをやってみたAWSの費用です。 もはや学ばない理由が見当たりませんね。 これを書いた理由 けっこう有名な講義資料なのでいまごろ紹介するまでもないネタかと思っていましたが、いざやってみたらハンズオンのコードが最近のAWS環境では動作しない箇所がいくつかあったので。 動作するように修正した手順をまとめておきました。 本記事がはてブを950件ももらってしまい

Twitterとか見て「そうだったのかー」とか言うんじゃなくて、ちゃんと調べてみましょうよ。/usr は元々ユーザーのホームディレクトリをおいていた場所ですよ。/bin などを置いていたシステムディスクの容量が足りなくなったので別ディスクだった /usr 以下を使うようになっただけです。Unix System Resources とかそんな長い名前、後付けに決まってるでしょ？ 翻訳は面倒なので、DeepL（の少し手直し）です。 初期の Unix のドキュメントから URLと1972年という年から、おそらく Version 1 Unix (1971) のドキュメントだと思います。ここ 経由で見つけました。 12ページにこのようなものがあります。詳細はよくわかりませんがディレクトリ構造でしょう。 idata: / root 41. 140016 .byte 7,1 9f-.-2 41. <..

起きたこと 僕が運営している『オンライン絵しりとり』というサイトで起きた話となります。 これは訪れたユーザー同士で絵しりとりを楽しめるサービスです。 ある日、このサービスをホスティングしているConoHaVPSより、規約に違反しているため利用を制限した旨のメールが届きました。 お客様のVPSにおきまして、弊社会員規約に反するコンテンツが 検出されましたので、ご利用サービスの制限をさせていただき ましたこと、ご連絡申しあげます。 そして、メールが届いたほぼ同時刻にサーバーが停止され、サービスへアクセスできない状態になりました。 メールによると、JASRACより著作権侵害に対する防止措置の申し出があったとのことです。 指摘対象のコンテンツを確認したところ、ユーザーがサイト内のチャットでYOASOBIの楽曲である『アイドル』の歌詞の一部を投稿しておりました。 ご覧の通り、話の流れで流行りの曲をみ

Unix 哲学的に考えれば、行を並び替える sort コマンドと重複行を取り除く uniq コマンドは別のコマンドであるべきなように思えます。しかし sort コマンドには -u オプションとして uniq コマンドに相当する機能が組み込まれています。なぜそうなっている（そうなってしまった）のかを「ソフトウェア作法（さくほう）」を参照しながらこの記事で明らかにしたいと思います。 関連記事 Unix哲学「一つのことをうまくやる」は単機能のコマンドを作ることではない 「誰」がuniq機能をsortコマンドに組み込んだ！？ 熱烈的な Unix 哲学の信者は「どうせ Unix 哲学を理解しない GNU が便利だと思ってオプションを追加したのだろう」と考えるかもしれません。しかし uniq 機能が組み込まれたのは Version 7 Unix、つまり Unix の開発者が組み込んだのです。これは 1

はじめに 「テーブル・DBを設計するときのさいきょうの極意」を完全に理解したので 初心者（私）向けに共有する記事です。 どうぞ揉んでいただければ幸いです。対戦よろしくお願いします。 さいきょうの極意 初心者が「テーブル・DB設計して」と言われると、 「アソシエーションってあったよね・・・バリデーションも？中間テーブルを使うときと使わないときと・・・」と大変に混乱し、何から手をつけていいかわからなくなります。 そんなあなたにこれ！ ・テーブル・DB設計は「属性」と「関係」の２つだけ ・「属性」は必要なものを書くだけ ・「関係」は 1:1 / 1:N / N:N しかない（しかも、ほとんど 1:N） これが極意だ！！！ 一般的な、「ユーザーがいて、投稿ができて、コメントといいねができるサービス」で考えてみましょう。 users / posts / comments / likes のテーブルが

よく見たら不自然なんだけどこれまで普通に許されていた、この引数デフォルト値がついに禁止されます。 何がおかしいって型がintなのに引数を渡さないと$xがnullになるので矛盾してしまうわけですね。 これはPHPが昔からの仕様を残しておいたためであり、いわゆる歴史的経緯というやつです。 以下は該当のRFC、Deprecate implicitly nullable parameter typesの日本語訳です。 PHP RFC: Deprecate implicitly nullable parameter types Introduction PHP7.1で?T構文、さらにPHP8.0でUnion型がサポートされたことにより、PHPはnull許容値型を正しく書くことができます。 歴史的にはPHP5.0でオブジェクト型、PHP5.1でarray、PHP5.4でcallable、PHP7.0で

案件でAWSの構成図を作成する機会があったので備忘兼ねて投稿します。 ※約5分で読めます 1. グループの内側から作成していく AWSの基本的なグループ構成はこんな感じ 添付の場合、個人的には Public subnet or Private subnet > Availability Aone > VPC > Region > AWS Cloudの順番で作成することをオススメします。理由は内側のグループが肥大すると外側のグループの手直しが発生するためです。 今回作成した時に外側から作成してしまい、めっちゃ時間がかかってしまいました... 2. グループの左上を掴む 日本語が下手ですみません。 なぜ左上を掴まないといけないか？試しにPublic subnetをクリックしてドラッグをすると、添付の様になりました。 クリックをするとグループの外から選択されてしまうため、選択したグループ内に存在

パワポのスライドと箇条書きが人間を駄目にする 今から20年前の2003年、データの可視化やインフォメーションデザインの先駆者として有名なイエール大学の教授エドワード・タフティが「パワーポイントの認知スタイル」というエッセイを発表しました。 彼はこのエッセイの中で、パワーポイントのようなスライド形式はプレゼンテーション自体の質を低下させ、余計な誤解や混乱を招き、さらに言葉の使い方、論理的な説明、そして統計的な分析といったものが犠牲になるため、スライドをつくる人の思考回路にダメージを与えると主張します。 こうした主張に賛同する人は現在でも多くいて、その典型的な例がアマゾンです。アマゾンではミーティングの前に文章形式の資料が配られ、ミーティングの最初の5分はそれぞれがこの配られたレポートを黙って読むことから始まるという話は多くの方も聞いたことがあるのではないでしょうか。（リンク） 実は、アマゾン

const md5 = text => fetch('https://md5sum.deno.dev/' + text).then(r=>r.text()) // 店舗コード const str_cd = '002870' // yyyyMMdd:hhmmss sources\com\locationvalue\ma2\extensions\ScreenExtensionsKt.java:78 const request_datetime = new Date().toLocaleString('sv').replaceAll(/-|:/g, '').replace(' ', ':') // ジャン const sku_cd = ['4549131971149'] await fetch('https://zaikoapp.plat.daisojapan.com/api_get_store

データベースとテーブルの作成 テスト用のデータベースtestdbを作成し、パフォーマンスチューニングを検証するためのcompanyおよびpersonテーブルを定義します。 CREATE DATABASE testdb; USE testdb; CREATE TABLE company ( company_id INT AUTO_INCREMENT PRIMARY KEY, company_name VARCHAR(255) NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE person ( person_id INT AUTO_INCREMENT PRIMARY KEY, company_id INT, person_name VARCHAR(255) NOT NULL, email VARCH

はじめに 数年前から「デザインの民主化」「非デザイナー向けの〇〇」といったワードをよく見るようになりました。それに伴い、デザイナー不在でも制作ができる便利なツールも増えてきましたね。 ReactなどのUI制作に便利なライブラリが広く使われたり、Canvasを使ってのバナー制作を行う人も増えてきた印象があります。 一方で「たくさんあるテンプレートから何を基準に選べば良いのか分からない」「アレンジしたけど、なんだか上手くいかない」という人もいるのではないでしょうか。 「非デザイナー～」シリーズでは「知っているとちょっと得するデザインTIPS」や「話のネタになるデザイン豆知識」をお伝えしていこうと思います。 今回のテーマ「色」と「特性」 今回は色の見え方、なかでも色覚特性について書いていこうと思います。 色覚特性はさまざまな理由から、多数派とは違う色の見え方・感じ方をする状態のことを言います。色

はじめに 個人でフロントエンド(react)、バックエンド(node.js)、データベース(postgreSQL)を利用したWebサービスを公開したいと考えていました。 まずはテスト的に無料で外部公開できるサービスがないか調査しましたが、2022年8月に有料化されたHerokuの記事ばかりヒットしてしました。 結果的には無料で使用できる構成があり、実際にテストプログラムを動作させることができましたので構成例として記載しておきます。 ※無料なので比較的厳しい条件も含まれていたりするのでそれぞれのサービスを確認お願いします。 例えばsupabaseは数日間利用がないとインスタンスが一時停止して手動で起動させないといけないなどがあります。 今回試したサービス できるだけ同じサービスに集約したいと考えていましたが、実際にはフロントエンド、バックエンド、データベースはそれぞれ異なるサービスになってし

はじめに この度、転職とスキル向上を目的に個人サービス(Football League)をリリースしました。 ITに関する学習は約1年ほど、その内の半年でサービスの開発をしました！ まだまだ修正箇所はあるものの、ひとまず形にはなったのでサービスの使用技術や開発過程を共有したいと思います。 私自身、独学で学習してきたのでそういった方々にとって少しでも参考になれば幸いです。 自己紹介 商業高校卒(サッカー部⚽️) 25歳 青森住み🍏 職業はトマト農家です🍅 どのようなサービスか 本サービスは、欧州5大リーグのサッカーの試合結果やチーム情報などを閲覧することができるWebサイトです。 ただ情報を閲覧できるだけでは面白みがないので、お気に入りのチームやリーグを追加することもできます。 なぜ作ろうと思ったか 私自身、小学生の頃から社会人になった現在までサッカーをやっています。 サッカーだけではな

はじめに Nostrという、SNSのようなものはご存知でしょうか？ ご存知でなければ、ぜひまず一度触ってみることをお勧めします。 割と普通にSNSっぽく使えます。 分散系SNSっぽいシステム Nostrは、分散系のSNSっぽいネットワークです。 図で表すとこんな感じ。普通に想像するWebサービスとは随分形が違うと思います。 各所のリレーサーバーに、ユーザーは投稿をばらまき、ユーザーがそれを見る形です。 分散の責任がユーザー(クライアント)側にあって、リレーサーバーが落ちたり消えたりしても影響が起きにくい仕組みです。 より詳しい説明は上記でやってるのですが、端的に言って 中央管理者がいない(各リレーに管理者はいる) 冗長で災害に強い Websocketのリアルタイム通信 オープンでシンプルで、でも拡張し放題な仕様 数多のサーバーによる分散ネットワーク といった特徴があります。 ※P2P技術は