[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita
2024年6月11日リリースのChrome126から、View Transitions APIがパワーアップし、別ページへの遷移でも使うことができるようになったので紹介したいと思います。 View Transitions APIとは View Transitions APIは、画面遷移をなめらかに行うことができる機能です。 この機能を使うと、以下の動画で紹介されているように、ページ遷移にアニメーションをつけることができます。 まずはView Transitions APIの特徴から紹介したいと思います。 特徴1：異なるDOM要素間でアニメーションできる アニメーション前後のDOM構造が異なっていても、アニメーションを行うことが可能です。 例えば、<div>がアニメーションで変化しつつ<img>要素になる、といったアニメーションが可能です。 特徴2：アニメーションがCSSで自由自在 アニメー
![[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/40f0bdd895644cfec9e8497e08ce9c0883edb8d0/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSlMlRTMlODElQUElRTMlODElOTclNUQlMjAlRTMlODMlOTElRTMlODMlQUYlRTMlODMlQkMlRTMlODIlQTIlRTMlODMlODMlRTMlODMlOTclRTMlODElOTclRTMlODElOUZWaWV3JTIwVHJhbnNpdGlvbnMlMjBBUEklRTMlODElQTdNUEElRTMlODIlOTJTUEElRTMlODElQkYlRTMlODElOUYlRTMlODElODQlRTMlODElQUIlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWFhYTFiMTIzMDhkZDMyYmMzOTg1Zjg5MjVhYWZiOWI4%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBhY2Nlc3MzMTUxZnEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWMzODc4MWE1MWNmYzRiZGJlNTcyYzdjM2RkZDMxNDE0%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D3626912c51af4270ad5c67dd51388c1e)
エンジニア以外でもSQLを使いこなす社内勉強会の取り組み - Qiita
概要 CBcloudでは、各部署のKPIをモニターし、業務改善に必要なデータを可視化するために、Metabaseを活用しています。データに基づいた意思決定を迅速に行い、業務効率を高めることができます。 しかし、データの抽出や可視化においては、エンジニアのサポートが必要とされる場面が多く、迅速に対応することが難しい場面も多々あります。そこで、私たちはエンジニア以外の社員が自ら必要なデータを抽出できるようになることを目指し社内でSQL勉強会を開催したいな〜と思っていたところ、社内からGASやSQL学びたい！という声が！！！ ということでSQL勉強会を @aipacommander と共に開催する事になりました！開催は発起人のパートナーズサクセス本部I.A氏を中心に進めてもらっています。いつもありがとうございます！ 前提 CBcloudは物流ラストワンマイルの配送プラットフォーム「ピックゴー」を
Open WebUI (Formerly Ollama WebUI) がすごい - Qiita
Open WebUIを使ってみました。 https://openwebui.com/ 当初は「Ollama WebUI」という名前だったようですが、今はOpen WebUIという名前に変わっています。Ollama専用じゃなくなったということでしょう。OpenAIに対応済みです。 早速使ってみました。もちろんBedrockで。 6/11 続編を書きました。 環境構築 Dockerですんなり構築です。Bedrockに対応はしてないので、「LiteLLM」を使って対応させます。 環境変数でこのあたりを指定 Ollamaを無効化 LiteLLMのエンドポイントをOpenAIのエンドポイントとして登録 APIキーを登録（LiteLLMとの通信には不要ですが、未指定だとOpen WebUIが正しく動作しませんでした） services: open-webui: image: ghcr.io/open-
Windows11のコンテキストメニューを旧仕様に戻す方法 - Qiita
概要 Windows11のコンテキストメニューをWindows10までの従来仕様に戻すスクリプトをまとめた話です。 ググれば同じ話はいくつも出てくるのでn番煎じ感が強いですが、PowerShellだけで行ってる例は少なかったので、そこは新規性があるかも？ コンテキストメニューって？ エクスプローラやデスクトップ上などでファイルとか何もない場所を右クリックしたときに表示されるメニューのことです。 このコンテキストメニュー、Windows10までとWindows11で仕様が大きく異なります。 Windows11では表示をすっきりさせるためなのか、従来のほとんどの操作は非表示になっています。 なので、例えば7zipでの解凍・VSCodeで開く・送るなどの操作をしたい場合は「その他のオプションを確認」をクリックして従来のコンテキストメニューを表示してから対象操作を選択する必要があります。とてもつら
急に仕事で英語を使うことになった社会人に贈るまとめ(便利ツール/コンテンツ) - Qiita
急に仕事で英語を使うことになった社会人に贈るまとめ(便利ツール/コンテンツ/勉強本) 新規案件参画初日。 Goやk8sを使えることなってワクワクしていたあの日、 参画してすぐにチーム内のエンジニアで日本人が自分以外に一人であること、 それ以外のチームメンバー全員が外国籍のメンバーになることを知らされた そこのあなた！ 数年前の私です（笑） さらに2ヶ月後には、開発チームで唯一の日本人になって死にそうになりました。 その時は突然にやってきます。 当時、私の英語の経験というと大学受験の対策のみと言っていいほどで、 そこから10年以上経過していたため、高校英語すらも怪しい状態でした。 英語学習を開始して 半年ほど経過した時のレベルがTOIEC450程度だったので、学習開始当初はおそらく400点を切っていたレベルであると思います。 そこから英語学習を開始し、2年ほど経過した今では、便利ツールを活用
Linuxの面白いコマンド9選 - Qiita
はじめに Linuxの面白い（あんまり使い道のないどうでもいい）コマンドを9個まとめてみました。暇な時ぜひ試してみてください！ ※環境によっては、コマンドのインストール方法が異なる場合があるので、本記事ではインストール方法を記載しません。 1.メッセージをつぶやくウシ cowsay cowsayは、メッセージをつぶやくウシ(オプションで他の動物を指定することも可能)のアスキーアートを生成するプログラムです。 下記コマンドを実行すると、「Hahaha」というセリフを言うウシが表示されます。 $ cowsay Hahaha ________ < Hahaha > -------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || || $ cowsay -f turtle Hahaha ________ < Hahaha > -------- \ __
｢これはHEAD^^｣ ｢これはHEAD^2｣ ｢これはHEAD~2｣｢HEAD@{2}､reflog用｣｢全部いっしょじゃないですか｣｢違う!!もっとよく見ろ!!｣ - Qiita
｢これはHEAD^^｣ ｢これはHEAD^2｣ ｢これはHEAD~2｣｢HEAD@{2}､reflog用｣｢全部いっしょじゃないですか｣｢違う!!もっとよく見ろ!!｣Git 画像略 TL;DR(Too Long; Didn't Read) ~nは単純なコミットの親をたどる(ブランチの分岐がある場合は現在のブランチのみで辿れるコミット) ^nはマージコミット向けで^2は｢そのコミットの2番目の親(取り込んだブランチの前回のコミット)｣ だからHEAD^n(n > 2)は存在しない 2024/06/04追記： OctopusなMergeだと３つ以上のブランチからマージできるので^nも存在する......があまり見かけることはない HEAD^^は｢HEAD^の親｣､HEAD^2は｢HEADのもう一人の親｣みたいな......｡タラちゃんがHEADだと波平がHEAD^^でマスオがHEAD^2です(
個人開発で月1万円を稼げるようになった話。 - Qiita
はじめに こんにちは。こんばんは。おはようございます！ 今回は個人開発話でも書いてみようと思います。個人開発で月1万円を稼げるようになるというのは僕にとって1つの目標でした。同じように月1万円稼げるようになりたいぞ〜！という人もいるかもしれません。そういう人にこの記事が少しでも参考になればと思っています。 そして、実際にこの記事を読んで「個人開発をスタートした！」「眠らせてたアプリをバージョンアップした！」などのアクションにつながったとしたら、それが一番嬉しいです。 ちなみに僕はiOSアプリを開発しているので、iOSアプリによった話がメインです。 個人開発で一番大事なこと 大事なのは続けること ごくごく当たり前のことで何の捻りもありません。でもやっぱりこれが一番大事です。とにかく続けましょう。 まだ月1万円に到達していない人で、アプリを20回以上アップデートしたという人はほぼいないんじゃな
WBSについて学び直した - Qiita
エンジニアのみなさま、日々の学習本当にお疲れ様です！ また本記事まで足を運んでいただき本当に感謝です。 約3分程度で読めるので最後まで読んでもらえると幸いです。 本記事を書こうと思った経緯 プロジェクト管理をする上でWBSに触れる機会が多いものの、表面的な理解しかできておりませんでした。 「何のために使うのか？」 「この手法を活用し、どの様な責務を持たせるべきなのか？」 を理解したい。そして実践したい。 その結果、プロジェクトにおける工程管理を「正しい知識を持って」「より円滑に」プロジェクトを進めたいと思ったためです。 いくつか記事を見ながら学び直した内容を要約してみました。 実務でWBSを活用したときのつらみや感じたことを織り交ぜながら本記事を完成させたいと思います。 主観が多いため 「もっとこうした方が良いよ！」 や 「うちの会社ではこの様な考えで取り組んでます！」 があればぜひコメン
モチベーションを維持し、自分だけの人生を切り開くためにやるべき「10のこと」 - Qiita
今の時期って、期が変わり 、自分のキャパを超えて、モーレツに頑張っている人と、自分のキャパを持て余し気味で、モチベーションが落ち気味の人がいるのではないかと思います。 ５月病とはよく知られた言葉ですが、正式な病名ではなく俗称です。 激しい入学試験をパスしてやっと大学に合格し た新入生が、ゴールデンウィーク明け頃に無気力な状態になることから名づけられました。 大学生だけでなく、新入社員 などにもみられます。 お疲れ様です。 4月にこうありたいと立てた目標からぶれないよう、自分を戒める意味で、記事を作成しました。モチベーション維持が難しいと、悩んでいる方々の助力となれば、幸いです。 モチベーションを維持する方法 モチベーションを維持するのは難しいですよね。しかし、ちょっとした工夫で、より長く高いモチベーションを保つことができます。まず、いくつかの方法を紹介します。 目標設定 SMARTな目標を
Windows 11 では 7z をコマンドラインでも圧縮・解凍できるようになっていた - Qiita
Windows 11 23H2 以降、エクスプローラーが 7z、tar などの解凍に対応しました。さらに、Build 25992 では圧縮も可能となったようです。7-zip を追加インストールしなくてもこれらのアーカイブを取り扱えるのは嬉しいですよね。 1 一方で、PowerShell の Expand-Archive コマンドレットは拡張されておらず、ZIP 形式の解凍しかできません。 GAC Version Location --- ------- -------- False v4.0.30319 C:\Program Files\WindowsApps\Microsoft.PowerShell_7.… OperationStopped: File 'E:\test\archive.7z' does not appear to be a valid zip archive. せっかく
【超初心者向け】Pythonのテストの書き方（pytest, unittest） - Qiita
概要 pythonでテストコードを書くときがありますが、（筆者のように）超初心者からすると難しい用語や書き方がたくさん並んでいてハードルが高いです。 テストコードの入口となる最低限（最低限過ぎるかもしれませんが）の書き方を備忘を兼ねて書きます。 pythonでのテストコードを書く時のライブラリの種類 筆者が簡単に調べたところ、2つのライブラリがよく使われているようです。 unittest : python標準ライブラリ。インストールが必要ない。pytestと比較すると、柔軟なテストケースを書きづらい。 pytest : サードパーティ製のライブラリ。インストールの必要がある。柔軟なテストケースが書ける。pythonのテストコードを書く時のデファクトスタンダートになりつつある模様（これが本当かは確認していないですが、そういう記述を見かけることが多かったです）。 筆者個人としては、以下の3つの
【2024年度】エンジニア向け研修資料まとめ - Qiita
はじめに 本記事では無料で公開されている企業のエンジニア向け研修資料をまとめました。 近年では、多くの企業が新人向けの研修資料を公開しています。これらの資料は内容が充実しており、初心者から中級者まで幅広いレベルの学びを得ることができます。さらに、資料の作り方も参考になるため、勉強会で発表する人や企業の研修担当者にとっても貴重な情報源となっています。 本記事では様々な企業のエンジニア向け研修資料をまとめましたので、ぜひ参考にしてみてください！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 この記事の主な対象者 有名企業の研修資料を幅広く確認したい方 エンジニアとして初級から中級レベルの方 独学で学んでいる方 今後研修資料
ユーザーが『アイドル』を歌うとサーバーが停止する - Qiita
起きたこと 僕が運営している『オンライン絵しりとり』というサイトで起きた話となります。 これは訪れたユーザー同士で絵しりとりを楽しめるサービスです。 ある日、このサービスをホスティングしているConoHaVPSより、規約に違反しているため利用を制限した旨のメールが届きました。 お客様のVPSにおきまして、弊社会員規約に反するコンテンツが 検出されましたので、ご利用サービスの制限をさせていただき ましたこと、ご連絡申しあげます。 そして、メールが届いたほぼ同時刻にサーバーが停止され、サービスへアクセスできない状態になりました。 メールによると、JASRACより著作権侵害に対する防止措置の申し出があったとのことです。 指摘対象のコンテンツを確認したところ、ユーザーがサイト内のチャットでYOASOBIの楽曲である『アイドル』の歌詞の一部を投稿しておりました。 ご覧の通り、話の流れで流行りの曲をみ
HTML,CSS初めて１ヶ月ぐらいの人に知って欲しいCSS設計のこと - Qiita
「HTML,CSSだって難しいよ！」 初心者でも始めやすいって言ったの誰ですかね。最初は覚えるのに必死だし、少しわかるようになったかな？で始めたサイト制作（コーティング）もエラーだらけで頭を抱える日々。そんな修行を耐えているみなさんに知ってほしい、CSSの設計についてお話できたらなと思います。概念的なこと中心になりますので細かいことは下記の参考文書をご覧ください。 『インプレス社 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 谷拓樹著 2022年発行第１版』 注意 作者自身もプログラミング初めて１ヶ月の超初心者です。HTML、CSSを使ってデザインカンプを元にサイトを作れるぐらいのレベルです。なので僕より歴長い人はスルーしてもらっていいです。まだ初めたばかりの人は追いついてきてください。僕は先に行ってます。 初め 壊れない完璧な設計を
統計学で用いる行列演算の小技 - Qiita
はじめに 千葉大学・株式会社Nospareの川久保です．今回は，統計学（特に多変量解析）で多く出てくる行列演算の小技集を，線形回帰モデルにおける簡単な実用例を交えて紹介します． 転置に関する公式 行列の転置とは，$(i,j)$要素を$(j,i)$要素に入れ替えることです．$m$行$n$列の行列$A$の$(i,j)$要素を$a_{ij} \ (i=1,\dots,m; j=1,\dots,n)$とすると，$A$を転置した$n$行$m$列の行列$A^\top$の$(j,i)$要素が$a_{ij}$となります．また，自明ですが，転置行列の転置は元の行列になります．すなわち，$(A^\top)^\top = A$です． 行列の和の転置 行列$A$と$B$の和の転置は，転置行列の和です．つまり， が成り立ちます． 行列の積の転置 次に，行列$A$と$B$の積$AB$の転置としては，以下の公式が成り立
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~ - Qiita
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~初心者umlVSCode新人プログラマ応援mermaid はじめに Mermaid Graphical EditorというVSCodeの拡張機能にとても感動したので一筆書きました こんな方におすすめ シーケンス図/クラス図/フローチャートをサクッと書きたいけどmermaidとか難しそう 😢 できること VSCode上でポチポチしながらシーケンス図/クラス図/フローチャートを描けるようになる mermaid記法のコードも自動生成されるよ 個人的メリット mermaidの学習コスト0 紙で書くよりも修正しながら書きやすい 導入手順 （簡単7steps） (1) VSCode上で「Mermaid Graphical Editor」という拡張機能をインストールする (2)
Git不慣れ勢を束ねて安全なチーム開発をするメモ - Qiita
本稿は当初チーム開発時のメンバー向けにまとめたものです。 ある程度、端折っていた背景などを記載しました。 git初心者同士でのチーム開発において、git操作を詳しく知らないメンバーも含め安全に行う必要がありました。しかし、開発期間はごくわずか...この状況を回避するために、下記の対応をとりました。 Gitコマンドの基礎的な内容を理解する（私） 各種操作をGUI上で完結させる拡張機能を色々と導入する シンプルな開発フロー(Github flow)を採用し、コマンド実行に相当する操作を限定する 各操作をGUI上での操作に置き換え、チームメンバーに教える 本稿はその際の、コマンドやGUI操作に関するメモをまとめたものになります。 こういった取り組みのおかげか、チームの開発をすんなりフローに乗せることができました。 ■ 前提条件 対象とする動き Github flowを回すうえで、 cloneする
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
decimal型（十進小数）に夢を見ている輩が多すぎる - Qiita
Qiita