「一時保存や下書きできるようにしたい」といった要望が出てくることがあると思います。世の中のサービスでよくある機能ですしあったら便利だなと思うのも当然です。 同じ要望を受けた当時の私はその大変さに全く気づいていませんでした。 意外と考えることが多いよ、というのが伝わると幸いです。 当初明確になっていた仕様 入力フォームには必須と任意の項目があるが、必須項目が未入力状態でも一時保存できる 入力フォームにはファイルを添付できる 正式データと一時データは同じ一覧ビューの中で両方とも表示させる 一時データはユーザー単位ではなく共有される（誰かが作った一時データは自分も閲覧編集できる） 一時データは正式データに対してひとつのみ存在できる 最終的には上記以外にももっと細かい仕様になったのですが、この後の検討や設計の流れに沿って随時記載していきます。 データの持ち方の方針 方法としては以下二つの案がありま

https://kaigionrails.org/2024/talks/osyoyu/

CSSは気がつくと、どんどん進化しています！ 先月リリースされたCSS Values and Units Module Level 5のワーキングドラフトでは新しい値と単位、プロパティ、関数が追加されました。それらの新機能と新しい関数を紹介します。 計算値にキーワード（auto, max-conetntなど）を使用できるcalc-size()関数、ランダムな値を返すrandom()関数、位置を示す論理プロパティなど、魅力的な機能ばかりです。一部はすでにブラウザに実装されており、ブラウザのサポートも年々早くなっていますね。 New Features and Functions Arriving in CSS by Alvaro Montoro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに attr関数の変更 キーワード

皆さん、フォーム作ってますか？ Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも

「Developer eXperience Day 2024」において、Microsoft Senior Software Engineer の牛尾剛氏が、自身のキャリアと米国IT企業での経験を通じて、ソフトウェア開発の文化とマインドセットの違いを語りました。プログラマーへの夢を追い続けた軌跡から、世界的クラウドサービスの開発現場まで、日米のソフトウェア開発アプローチの違いが明らかになりました。全4回。 牛尾剛氏の自己紹介と経歴 牛尾剛氏：はい、おはようございます！　おはようございますじゃないんや、よくわからへんねん。僕は今10時ぐらいなんですけど、みなさんの時間帯がよくわからないですね。というわけで今日は、「米国巨大IT企業で働いてわかったソフトウェア開発の文化とマインドセットの違い」をテーマに、話をしたいと思います。 私はエンジニアをやっています。Azure Functionsという世

こんにちは。趣味グラマのNobu(@nm_aru)です。 Google Playから以下のタイトルのメールが来ていましたが、身分証の提出ぐらいだろうと甘く考え、期限ギリギリまで放置しようと思っていました。 時間が出来たので内容を見てみると、何と個人開発者は自宅住所をストアに公開するための対応依頼でした・・・。 名前の公開はまだ良いとして、流石に住所公開はハードルが高いので、Playストアでのアプリ公開はもう諦めようかなと思いもしましたが、以下の3点から開業届を出して対応する事にしました。 利用してくれているユーザーがいる iOSのみになるとFlutterを使っている意味がほぼ無くなる 開業届のハードル（手続き、費用面）が低くなった という訳で、ここには備忘録を兼ねて今回の対応を残しておきたいと思います。

「30歳からのプログラミング」と題したこのブログを書き始めたのが 2016 年 3 月。 そこから月日が立ち、立派なアラフォーとなったわけだが、私はこれまで 3 年以上継続して働いたことがない。プログラマに転身する前も含めて、である。一度もない。 3 年経つ前に、必ず無職になってしまう。労働して貯めた貯金を食い潰しながら無職生活を送り、カネが無くなりそうになってまた働く、ということを繰り返している。 だが、今の勤務先（株式会社HERP）に入社したのは 2021 年 10 月 1 日であり、入社してからもうすぐ 3 年になる。 つまり、 3 年以上労働を続けることになる可能性が高い。 仮にこの記事を投稿した直後に退職を決意したとしても、引き継ぎや有給休暇の消化などで、さすがに 9 月末までは在籍していると思う。そうなれば 3 年到達である。 今までの会社を辞めてきた理由は様々だ。同様に、今の

はじめに Oracle Database の PL/SQL の MySQL への移行方法を説明します（MySQL 5.0 からストアドプロシージャに対応している）。 AWS Schema Conversion Tool (SCT) という GUI デスクトップアプリケーション（Windwos/Mac OS X/Linux版）をインストールし、移行元の Oracle Database に接続して自動的にPL/SQL を MySQL のルーチンに変換することができます。 SCT による変換方法は Oracle Database を Amazon Aurora に移行する方法 | Amazon Web Services ブログ をご覧ください。 移行先として適切なサービスを選ぶ 本題に入る前に Oracle Database からの移行先として MySQL、PostgreSQL、Redshift

知れば知るほど面白くなるUIの世界を皆さんにもチラ見せしたい……ということで、連載の第2弾となる今回は「これは発明だ！」と私たちが感動したUIパーツについてご紹介します。 ミクロな視点でアプリを観察し、UIパーツ一つひとつに注目してみると、普段は気付けない面白い発見がたくさんありますよ。 ※各UIパーツの名称は、公式で発表されているものではなく、私たちが便宜的につけた呼称になります。 関連記事：UIデザインとは？ 大切な5つのポイントや取り組み事例を紹介 Apple Booksのセミモーダル Appleが提供する電子書籍アプリ「Apple Books」では、カルーセル状に並んだ本を押すと、そのままセミモーダルが立ち上がります。前の画面の一覧性を保ちながら、それぞれの本の詳細を見ることができるのが特徴的ですね。さらに下スクロールすることで、全モーダルへと滑らかに変化します。 このUIのポイン

こんにちは。六月と申します。 Xはこちらです AtCoderのプロフィールはこちらです もう色変する日は来ないと思っていましたが、おかげさまで約2年半ぶりに色変しました。 というわけでまた、自分語りをする機会に恵まれました笑 きみたち、良かったらまた、おぢさんの話をちょっと聞いていかないか……。 お時間の許す方はどうぞお付き合いください。 簡単な自己紹介 私は40代で、普段はIT業界ではない企業で働いています。私生活では中学生と小学生2人の3人の子を持つ父でもあります。大学は文系で、これまで情報科学の教育・訓練を受けた経験はありません。 子供が小学校の授業でプログラミングを習っているのを見て「今後はプログラミングが読み書きそろばん同様になるかも」と不安を感じ、ひょんな事からAtCoderの存在を知り、競技プログラミング（以下、競プロ）への参加を通してプログラミングの勉強を始めました。 20

多重下請けではエンジニアが育たないという話を前回のブログで引用していたのですが、そもそも多重下請けではまともなソフトウェアは開発できないんではないかという気持ちになりました。 多重下請けでは、上位受け会社の「SE」が「設計」を行い、下位受け会社の「PG」が実装を行うという役割分担があります。というか、今回の話はそういう役割分担がある多重下請けを前提とします。 そうすると、設計というのは会社間をまたがった契約文書であり、発注のための作業指示書であるということになります。ソフトウェア開発で本質的に必要な文書というよりは、ビジネス構造によって必要になったビジネス文書です。ちなみに派遣ではなく業務委託のはずなので詳細な作業指示になってはいけないのもポイントです。 ※余談ですが「設計は必要である」という人の話をきいてみると、必要なのは実装のための設計ではなく保守のためのドキュメントということがほとん

www.howtogeek.com 「オペレーティングシステムは、『パーソナル』コンピュータのもっともパーソナルな部分で、かつては Windows ユーザとして、自分がマイクロソフトからコンピュータを借りてるような感覚はなかったのだが、最近では自分のものだという感覚がまったく消えてしまった。私には Windows がかつてないほど安っぽく、商業的に感じるし、それは良いユーザ体験の秘訣とは思えんね」という文章で始まる記事だが、これ分かるわー。 その後、「Windows のオフライン黄金時代」として Windows 3.1 の話から始まるのにのけぞるが、要は今の Windows は常にオンラインであるのを要求するのとともに自分のコンピュータ体験が「パーソナル」でなくなっていると嘆いているわけだ。 で、その最新版と言えるのが、Windows 11 でスタートメニューに表示される広告である。今では

本セミナーでは、デザインやITの知識を持たない方でも直感的で使いやすいUIの検討（アプリケーションの画面設計等）を行える方法論をご紹介します。 DXに取り組む企業の増加、ノーコード開発ツールの発展などの背景から、最近、デザインやITの知識をほとんど持たない方が業務用アプリ等の画面をつくる機会が増え…

今回の記事は特に私の意見であり、所属会社の意見ではないことをお断りしておきます。 最近になってまたウォータフォール vs アジャイルの議論を見かけることが多くなってきたので、私が勤務する米国の世界規模のクラウドプロバイダーでは2024年現在どんな開発をしているのかをご紹介したいと思います。私はこれが「正解」といいたいのではなく、何らかのポイントが皆さんの何らかの参考になったらいいなと思って筆をとりました。 ちなみに、2016年時点で私のウォータフォール開発に対する考え方は下記のブログの通りで今も変わっていません。ただ、2024年現在だからといってアジャイルをやるべきと思っているわけでもありません。 もし、今ウォータフォールをやっている人がいたら「そんなこと言ってもどうしたらええねん」となると思うので、自分なりの解決方法も考えてみました。 最初に自分的な結論を書いておくと「2024年の開発と

中野 仁 (AnityA) @Jin_AnityA ユーザー側とシステムを本業にしているベンダー側で組織の能力差がでるし、結果的に情報の非対称性が拡大する 外部に発注するにもユーザー側に必要な能力というのはあるし、それがないとプロジェクトの成功確率は落ちる 日本企業でシステムトラブルが相次ぐ根本原因 SIerとユーザー企業の間にある｢埋められない人材格差｣ president.jp/articles/-/819… リンク PRESIDENT Online（プレジデントオンライン） ｢プッチンプリン｣の出荷停止に､ゆうちょ銀行の入金遅延…日本企業でシステムトラブルが相次ぐ根本原因 SIerとユーザー企業の間にある｢埋められない人材格差｣ 江崎グリコのシステム障害によりプッチンプリンなど一部商品の出荷が停止している。4月にはゆうちょ銀行で入金遅延が起きた。なぜ企業のシステムトラブルが相次いでい

JRの職員がマルスを操作する動画が話題になった。 この動画について、職人性を賞賛する立場と、UIとして問題があるという立場が対立していた。 nobkzさんのこの記事は、「熟練が必要なのはUIとして問題がある」という立場での記述だとおもう。 一連の話題に対して違和感を持ったが、違和感の源泉は明確で、「UIとしてよいかどうか」という立論自体に机上の論理以上のものにならないということもあるが、そもそも「マルスとはどういうシステムなのか」が議論されていないことがおおきい。 わたしもマルスについて名前は知ってはいたものの、具体的にはどういうシステムであるかは知らなかったので、少し調べてみることにした。 マルスについて Twitter(X)で話題になっていたもとの動画はこちらである。 ここだけ取り上げてみて、マルスの良し悪しを論じるのは鉛筆を取り上げて絵の良し悪しを論じるようなものだとおもう。 次の動

SPAのアプリケーションで、外部のIdPを使ってOpenID Connect によるログイン機能を開発しようと考えています。IDトークンの保存先として、ブラウザのCookieかサーバーのDBに保存するかの2つの案があると思っています。調べた限り、サーバーサイドで持つべきという意見が多いように見えますが、以下のような背景がある中で開発しても、ブラウザのCookieでは持つべきなのではないのでしょうか？ - IDトークン自体にも、個人の属性（氏名等）情報は無いことを確認している - サーバーサイドでIDトークンの署名検証をして、IDトークンの改ざんが無いか確認する - Http Only属性：JSによるCookieへのアクセスを防ぐため - Secure属性：流出防止のため - SameSite=strict：CSRF対策のため 結論から言えば、「どちらでもよい」となります。しかし、恐らく話は

CSS GridやFlexboxで配置するプロパティ値は？ 先頭の3つだけを指定するセレクタは？ という「あれは何だっけ？」に役立つのが、チートシートです。 CSS GridやFlexboxの各プロパティ・値でどのように配置されるのか、セレクタやnth-child()やdisplayやposition、VS CodeやGitのコマンドがまとめられたチートシートを紹介します。 チートシートは高解像度版が用意されており、ダウンロードしておくと便利です。 CheatSheets -GitHub チートシートはすべて、「ご自由にダウンロードしてご利用してください」とのことです。チートシートは高解像度版を無料でダウンロードでき、モニターの壁紙や印刷して机の脇に貼っておいても便利です。 では、どんなチートシートがあるのか紹介します。 まずは、CSS Flexboxのチートシート。Flexboxの各プロ

ソフトウェアは複雑さを増すばかりですが、人間の脳は限られた複雑さしか扱えません。ソフトウェアが思い通りに動くようするには、脳に収まり、人間が理解できるコードを書く必要があります。 本書は、拡張を続けても行き詰ることなくコードを書き、複雑さを回避するための実践的な方法を解説します。最初のコードを書き始めるところから機能を追加していくところまでを解説し、効率的で持続可能なペースを保ちながら、横断的な問題への対処やトラブルシューティング、最適化を行なう方法を説明します。自分のチェックリストからチームワーク、カプセル化から分解、API設計から単体テストまで、ソフトウエア開発の重要な課題に対する考え方やテクニックを紹介します。サンプルプロジェクトで使うコードは、Gitリポジトリの形で入手でき、試しながら学べます。 有効に機能するプロセスを選び、効果のない方法論から脱却する方法。チェックリストを使うこ