知識0の状態からたった2時間でVSCodeの拡張機能を作った話 - Qiita
はじめに こんにちはkenです。エディターはVS Codeを使ってます。 突然ですがみなさん、普段開発をしていて 「VS Code にこんな拡張機能、あったらいいのにな〜」 と思うことありませんか？ 私はあります。しょっちゅうあります。 そこで先日、予定がない休日を利用して拡張機能の開発に挑戦してみることにしました。 最初は拡張機能の開発をどのように進めていけばよいのか全くわからず、そもそも拡張機能でどこまでのことを実現できるのかすらわかりませんでした。ましてや実装についての知識なんて皆無です。 「これは完成まで1日くらい、いや下手すると3日くらいかかるかな」と考えていたのですが、いざやってみるとたった2時間で作れてしまったので今回はその経験についてお話ししたいと思います。 この記事を読んで、 「こんなにお手軽なら自分にも作れそうだ！」 と感じてくれたら幸いです。 本題 作りたかったものと
python3ではじめるシステムトレード：射影と最小二乗法 - Qiita
回帰直線と射影 説明が明確で、分かりやすいストラング：線形代数イントロダクションは、線形代数の入門書として多くの人に支持されています。しかし、ハードルもあります。理解に多くに時間を費やしてしまうこともあります。その一つが、4.3の最小二乗法です。最小二乗法そのものは難しいものではありません。回帰直線を求めるのに最初に習うのが最小二乗法です。誤差を最小にするように回帰係数を決めましょうということなので、なんら難しさはありません。しかし、これを射影と合わせて理解しようとすると、それはやさしいことではありません。それは図4.6を見ればわかります。 左の図は回帰直線を幾何的に説明した図で、右側は線形代数的に表現したものです。ここでは時間の経過$t$を0,1,2としています。また、その観測値$\mathbf{b}$を6,0,0としています。これを $\mathbf{b}=C+Dt$ という式で当ては
GPT-4を使って ぷよぷよ 作ってみたときの感想
以下のツイートに反響があったので、どういう感じで作っていったかと感想をメモ 要約 この記事ではAIのChatGPT（GPT-4）を使用して、JavaScriptでぷよぷよを作成する手法について紹介しています。最初の依頼は「JavaScriptで動くぷよぷよのコードを書いて」とされており、最初に生成されたコードは不完全であったとのことです。 その後、AI側からは、1.ぷよの衝突検出、2.プレイヤーの入力によるぷよの操作、3.ぷよの回転の順に実装するように指示があり、徐々に改善を施していきました。 短時間で開発を終えることができるため、エンジニアとしてのスキルや要求、不具合の言語化能力があれば有効だとされています。現時点では優秀なプログラミングのアシスタントとして機能しています。 エンジニアが直面するストレスや不安を軽減できる可能性があります。一例として、短期間で開発を終えることができるため、
画像編集ソフトの覆い焼きやソフトライトといった「レイヤー合成モード」は一体何をしているのか？
Photoshopなどのデジタル画像編集ソフトウェアでは、「覆い焼き」や「ソフトライト」といったさまざまなブレンドモード(レイヤー合成モード)を用いて画像を編集することが可能です。このレイヤー合成モードは一体何をしているのかを、プロダクトデザイナーのダン・ホリック氏が解説しています。 Blending Modes | Dan Hollick https://typefully.com/DanHollick/blending-modes-KrBa0JP レイヤー合成モードは、2つの入力カラーに基づき新しいカラーを作成するというものです。以下の画像の「Foreground(前景)」と「Background(後景)」が異なるレイヤーであり、「Result」部分がレイヤー合成モードにより出力された新しいカラーを指しています。 レイヤー合成モードの中で最も単純なのが、「Darken(比較(暗))」と
【CSS】「なんかドロップシャドウがダサくなるんだけど」を解決する。 - Qiita
概要 みなさんは、このドロップシャドウを見てどう思いますか？ ドロップシャドウの色が濃かったり、ドロップシャドウの向きが変な方向だったり、 あまり綺麗なドロップシャドウとは感じないですよね？ この記事では、これが発生する原因 と 綺麗なドロップシャドウの使い方を解説していきます。 この記事を読んで理解すれば、これからドロップシャドウに悩むことはなくなるでしょう！ ドロップシャドウが綺麗にならない原因 1. デザインを3次元として捉える UIやグラフィックデザインは、複数の平面が重なりながら、組み合わさって作られています。 例えばUIだと、 ベースとなる平面に、カードの平面が重なっていたり、 カード平面の上に画像やボタンといったオブジェクトが置かれています。 このように、UIやグラフィックデザインは２次元で作られているのではなく、 各平面・オブジェクトがZ軸上に重なることで作られています。
グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法
グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSグラデーションが算出される仕組み おすすめのカラーモード これらの知識を活用する 美しいグラデーションを生成できるツール 終わりに はじめに さっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。
お金はないけどUIはキレイにしたい！ “インディーズゲームにおけるUI制作”のノウハウが語られたセッションをレポート
お金はないけどUIはキレイにしたい！ “インディーズゲームにおけるUI制作”のノウハウが語られたセッションをレポート ライター：高橋祐介 2021年8月21日にインディーズゲーム開発者向けのオンラインカンファレンス「Indie Developers Conference 2021」が開催された。その中で，インディーズゲームのUIにフォーカスしたセッション「プログラマしかいない お金もない それでもUIを綺麗にする！」が行われた。 登壇したのは，東方Projectのファンゲーム「幻想郷ディフェンダーズ」「幻想戦略譚」などを制作した開発グループ，Neetpiaに所属する少佐氏。氏は両作品のプログラマでありながら，同時にユーザーインタフェース（UI）のデザインも手掛けているという。 少佐氏は大前提として「UIはデザイナーが専任すべき」仕事と前置きしたうえで，「実際の現場ではそこまで人手がなく，グ
全モダンブラウザ対応のCSS機能が爆増。Chromium版Edgeのもたらす次世代CSS表現 - ICS MEDIA
全モダンブラウザ対応のCSS機能が爆増。Chromium版Edgeのもたらす次世代CSS表現 2020年初め、Chromium版のMicrosoft Edge（以下新Edge）がリリースされました。新Edgeは「Microsoft Edge Legacy」（以下Edge Legacy）と比べて多くの機能が使えるようになっており、Chrome・Firefox・Safariのモダンブラウザと遜色ないレベルになっています。 先日5月29日にリリースされた「Windows 10 May 2020 Update」では、Edge Legacyの開発が終了することもアナウンスされており（参考記事「Windows 10 features we’re no longer developing - Windows Deployment」）、今後のWindows標準ブラウザは新Edgeとなっていくでしょう。 ウ
Chromeの拡張機能を自作する - 虎の穴開発室ブログ
こんにちは。虎の穴ラボのH.Hです。 突然ですが、皆さんは普段使っているブラウザは何でしょうか？ 私は普段からChromeを使っており、このブログもChromeを使って書いています。 先日ある拡張機能をChromeに入れるにため機能の説明を読んでいました。 説明の中にGithubのURLが記載され拡張機能のソースコードが公開されており、JavaScriptなどの知識があれば作成可能とわかりました。 またGoogleから簡単な拡張機能を作成するチュートリアルも公開されていました。 そこで、チュートリアルで公開されている拡張機能の実際に作ってみることにしました。 今回は拡張機能の作成した時の手順とデバッグの方法を説明していきます。 Chromeの拡張機能とは Chrome機能はChromeウェブストアなどからChromeに追加することで、標準には無い機能の追加を行うものです。 chrome.g
[Flutter]コピペで使える！ボタンのデザイン16種類をまとめました - Qiita
Flutter開発する中で、「この形のボタンどうやって書いたっけ？」と調べ直すことが何度かありましたので、ここにまとめておきます。 特に、ボタンウィジェットのshapeで定義できるのは、RoundedRectangleBorderやStadiumBorder、BeveledRectangleBorderなどなど色々ありますが、少し覚えにくいんですよね... 修正点等ありましたら、ご指摘お願いします。 [2020年10月24日追記] Flutter1.22より、ElevatedButtonやTextButton、OutlinedButtonなどのボタンWidgetが追加されたため、そちらも追記しておきます。 いろんなボタンまとめ 1.色付きボタン // Flutter1.22以降のみ ElevatedButton( child: const Text('Button'), style: El
![[Flutter]コピペで使える！ボタンのデザイン16種類をまとめました - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/2ee21b26e5af6d1ea78ff240fc9241a1ff45918e/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCRmx1dHRlciU1RCVFMyU4MiVCMyVFMyU4MyU5NCVFMyU4MyU5QSVFMyU4MSVBNyVFNCVCRCVCRiVFMyU4MSU4OCVFMyU4MiU4QiVFRiVCQyU4MSVFMyU4MyU5QyVFMyU4MiVCRiVFMyU4MyVCMyVFMyU4MSVBRSVFMyU4MyU4NyVFMyU4MiVCNiVFMyU4MiVBNCVFMyU4MyVCMzE2JUU3JUE4JUFFJUU5JUExJTlFJUUzJTgyJTkyJUUzJTgxJUJFJUUzJTgxJUE4JUUzJTgyJTgxJUUzJTgxJUJFJUUzJTgxJTk3JUUzJTgxJTlGJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz01MzRhYzZhOTQwZmI5ZThjOTYyOTFhNzIzZjRmMTQ1Yg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBjb2thX18wMSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NDMwOTM0ZmJmNTI3NjVlM2JlOWRhMmI3OWJlMTQ5MTU%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D0a340bc9e59b3cb051fc4e14d9121312)
モダンな開発用ターミナル環境のためのツール紹介
エンジニアのjhondaです。入社して1年が過ぎました。 ターミナル上での開発作業が好きなので開発を快適に進めるために常日頃から使っているツールやエディタを抜粋して紹介します。 この手のツールは組み合わせることで更に便利になるので、組み合わせを含めた紹介となります。 筆者の会社での開発環境はMacですが、プライベートマシンのLinux上でも同じものを使えています。 筆者のターミナル環境は Alacritty + tmux です。 Alacritty Rust製ターミナルエミュレータ。GPUを使うので描画が高速。 https://github.com/jwilm/alacritty 同リポジトリより Rust製だからという理由なので趣味です。でもたしかに速い気がします。 tmux 言わずとしれた仮想端末エミュレータ。 https://github.com/tmux/tmux たいして使いこな
box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company
CSSだけでドット絵（Pixel Art）を描く・アニメーションさせる方法を紹介する。ただ、バニラCSSだけでも大丈夫なのだが、よりメンテナブルにするためSassで描く方法も併せて紹介する。 ちなみに下図のようなドット絵がつくれる。 マリオとMinecraftの土ブロックは、CSSアニメーションをつかって動かしている。もちろんJavaScriptは使っていない。 box-shadowプロパティについて ドット絵を描くためには、CSSのbox-shadowプロパティを使う。 そもそもbox-shadowプロパティは、要素にドロップシャドウ効果（影をつける）を与えるのが本来の使い方なので、まずは基本的な使い方からまとめる。 いくつかの構文がある。 box-shadow: offset-x offset-y color box-shadow: offset-x offset-y blur-rad
【Unity】TextMesh Pro で使用できる 30種類のタグを紹介 - コガネブログ
はじめに この記事では TextMesh Pro で使用できる 30種類のタグ を紹介していきます 目次 はじめに 目次 テキストの配置 (align) 色 (color) 透明度 (alpha) 太字と斜体 (b, i) 文字間隔 (cspace) フォント (font) インデント (indent) 行の高さ (line-height) 行インデント (line-indent) リンク (link) 小文字、大文字、スモールキャピタル(lowercase, uppercase, smallcaps) マージン (margin) マーク (mark) 固定幅 (mspace) タグ無効化 (noparse) ノーブレークスペース (nobr) 水平位置 (pos) フォントサイズ (size) 水平スペース (space) スプライト (sprite) 取り消し線と下線 (s, u) ス
プログラマが知っているとよい色(1)使い(JIS安全色) - Qiita
色の指定値 http://safetycolor.jp/shiteichi/ JIS外16進数は次の２つの資料に基づき追記。（ただし白の文字色は、#FFFFFFだと読めない。また表の中で背景に色をつける方法を知らない。白の文字色値を #DDDDDD #BBBBBBにしている。） 新JIS安全色普及委員会(New safety colour JIS popularization committee) http://safetycolor.jp/shiteichi/ 視認性に配慮した色の識別！JIS安全色彩(iro-color) https://iro-color.com/episode/jis.html 資料によっては、青がPB(purple blue)で、赤紫がP(Purple)であるのは、日本語表記で青の概念は幅広いことと、紫が以前は赤紫だったためと推測している。 実際に製品を作る場合だ
UI Challenge - Flight Search | Szałko-Blog
In this post, I will go through another UI Challenge. I have picked Johny Vino‘s Flight Search design from 100 Mobile App Interactions which is mostly about animations and I will try to implement it as close as I can. Let’s get to it! First, we need to decompose this view into a few smaller parts: AppBar and top buttons Initial input Airplane resize and travel Dots travel Flight stop card view Fli
Flutterでアプリ全体を統一感のあるデザインにする方法 - Qiita
FlutterのThemeDataの使い勝手がとてもよかったので紹介しようと思います。 iOSもAndroidもアプリ全体を通してデザインの統一感をもたせようとすると地味に手間がかかります。 AndroidのStyleやThemeはいまいち使い勝手が良くないと思いますし、iOSではそもそも全体を統一するための仕組みが無いように思います。 アプリで使う色やフォントの定義ファイルを作って都度設定するような実装になってしまうことも多いのではないでしょうか？ FlutterのThemeはまずアプリ全体に適用するためのThemeDataを作成します。といってもデフォルト値が設定されているので、何もしなくてもよいです。 AppBarやFloathingActionButtonなど組み込みのウィジェットの多くは、Themeのスタイルを参照するようになっているので何も指定しなければThemeに準じた見た目
「LINE Bot からの返答をよりリッチに」- Flex Messageを試してみた | DevelopersIO
この記事は、今月アップデートされた LINE Messaging API の Flex Message についてです。 実際に Flex Message を使用した LINE Bot を使いながら解説していきます。 こんにちは、中村です。 先月になってしまいますが、 LINE の Messaging API にアップデートがありました！ 【LINE】「Messaging API」の新しいメッセージタイプとして、 画像やボタンなどを自由にレイアウトが可能な「Flex Message」を公開 Flex Message は、 HTML 近い感覚でメッセージレイアウトできます。 これによりメッセージの UI/UX を改善し、よりよりユーザーコミュニケーションを可能にします。 Flex Message はiOS版およびAndroid版のLINE 6.7.0以降で対応しています。 今回は LINE B
【保存版】プログラミングで何を学べばどんなアプリを作れるのかまとめてみました。｜Dai
追記） プログラミング教育・就活などについてツイッターでも発信しています。この記事を読んで興味を持っていただけた方がぜひフォローよろしくお願いします！ ------------------------------------------------------------------------- プログラミングで「これ創りたい！」というときに何を学んだらいいのか創りたいもの別にまとめてみました。 主にAidemy, Progate, noteのチュートリアルの教材をまとめた記事になります。これから学習するルートに従って勉強を始めると、創りたいアプリができるようになると思います。全体像はこんな感じになります。 ①Webページを創りたい まずはWebページの作り方です。お店のホームページなどを作るためには、以下の言語を学ぶ必要があります。 ・HTML ・CSS ・JavaScript ・jQ
配色えらびも人工知能の時代！素敵なカラーパレットを自動生成できるツール Khroma
デザインに欠かせない配色選びは、デザイナーにとって頭を悩ませる問題のひとつ。もしコンセプトにあった色の組み合わせを素早く、しかもたくさんのサンプル案と一緒に確認できるとしたら？ Khroma は、そんなデザイナーの想いを人工知能をつかって解決したオンライン配色ツールです。お好みの色を追加することで、より精度の高い組み合わせを実現できる、まさに「育てる」配色ツールと言えます。 Khroma とは。 Khroma とは、人工知能 Ai を利用することで、選択した色を解析し、実用性の高いカラーパレットを生成するオンライン配色ツールです。 このツールを使えば、以下のようなスタイリッシュな配色をほんの数分で作成することができます。今回は、Khroma の使い方を詳しくみていきましょう。 Khroma の使い方 まずは、お好みの色を50色選んでいきます。「50色」と聞くと多いように感じるかもしれません
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「色物の服を買っても合わせ方がわからない」人向けの画像がすごい。｢これでまず失敗しないと思います｣→｢ちょうど悩んでた｣
