はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

はてなブックマーク

  • はてなブックマークって?
  • アプリ・拡張の紹介
  • ユーザー登録
  • ログイン
  • Hatena

はてなブックマーク

トップへ戻る

  • 総合
    • 人気
    • 新着
    • IT
    • 最新ガジェット
    • 自然科学
    • 経済・金融
    • おもしろ
    • マンガ
    • ゲーム
    • はてなブログ(総合)
  • 一般
    • 人気
    • 新着
    • 社会ニュース
    • 地域
    • 国際
    • 天気
    • グルメ
    • 映画・音楽
    • スポーツ
    • はてな匿名ダイアリー
    • はてなブログ(一般)
  • 世の中
    • 人気
    • 新着
    • 新型コロナウイルス
    • 働き方
    • 生き方
    • 地域
    • 医療・ヘルス
    • 教育
    • はてな匿名ダイアリー
    • はてなブログ(世の中)
  • 政治と経済
    • 人気
    • 新着
    • 政治
    • 経済・金融
    • 企業
    • 仕事・就職
    • マーケット
    • 国際
    • はてなブログ(政治と経済)
  • 暮らし
    • 人気
    • 新着
    • カルチャー・ライフスタイル
    • ファッション
    • 運動・エクササイズ
    • 結婚・子育て
    • 住まい
    • グルメ
    • 相続
    • はてなブログ(暮らし)
    • 掃除・整理整頓
    • 雑貨
    • 買ってよかったもの
    • 旅行
    • アウトドア
    • 趣味
  • 学び
    • 人気
    • 新着
    • 人文科学
    • 社会科学
    • 自然科学
    • 語学
    • ビジネス・経営学
    • デザイン
    • 法律
    • 本・書評
    • 将棋・囲碁
    • はてなブログ(学び)
  • テクノロジー
    • 人気
    • 新着
    • IT
    • セキュリティ技術
    • はてなブログ(テクノロジー)
    • AI・機械学習
    • プログラミング
    • エンジニア
  • おもしろ
    • 人気
    • 新着
    • まとめ
    • ネタ
    • おもしろ
    • これはすごい
    • かわいい
    • 雑学
    • 癒やし
    • はてなブログ(おもしろ)
  • エンタメ
    • 人気
    • 新着
    • スポーツ
    • 映画
    • 音楽
    • アイドル
    • 芸能
    • お笑い
    • サッカー
    • 話題の動画
    • はてなブログ(エンタメ)
  • アニメとゲーム
    • 人気
    • 新着
    • マンガ
    • Webマンガ
    • ゲーム
    • 任天堂
    • PlayStation
    • アニメ
    • バーチャルYouTuber
    • オタクカルチャー
    • はてなブログ(アニメとゲーム)
    • はてなブログ(ゲーム)
  • おすすめ

    猛暑に注意を

『qiita.com』

  • 人気
  • 新着
  • すべて
  • 🎉🎉最高にイカしたバウンディングボックスを紹介するぜ🎉🎉 - Qiita

    7 users

    qiita.com/yuneco

    🥳 前置き:君は最高のバウンディングボックスを知っているか 🥳 「バウンディングボックス is 何?」って方、これです↓ 出典: 複雑GUIの会( https://scrapbox.io/guiland/ ) イラレやFigmaのようなデザイン系のアプリには100%用意されてる、あのハコです。 知らん人にはマジどうでもいい話かもなのですが、GUI沼界隈においてはこのバウンディングボックスはHelloWorldであり鬼門であり永遠に辿り着けない理想の終着駅です。 界隈の人間が新しいプロダクト作る時は、とりあえずフルスクラッチでバウンディングボックスから作り始めたりするし、勉強会で集まるとバウンディングボックスだけで2時間くらい語れる人がウヨウヨでできます。 それくらいみんな大好きバウンディングボックス。既に若干引かれていそうな気もするけど、この記事はそんな憎愛を前提に温かい目でお読みくだ

    • テクノロジー
    • 2023/12/17 22:02
    • 😡VueのTransition使えば簡単にトランジションできるって言ったじゃないですか!〜あるある沼と解決策〜 - Qiita

      7 users

      qiita.com/yuneco

      この記事はVue Advent Calendar 2022の20日目(太平洋標準時)です ご存じの通り、Vueではコンポーネントを使って簡単に要素の表示/非表示トランジションが書けます。 ↓こんなやつですね。 <script setup lang="ts"> import { ref } from "vue"; const visible = ref(true); </script> <template> <label> <input type="checkbox" v-model="visible" />ボタンを表示 </label> <Transition appear> <button v-if="visible">ボタンだよ</button> </Transition> </template> <style lang="scss" scoped> .v-enter-active,

      • テクノロジー
      • 2022/12/21 01:02
      • プログラミング
      • あとで読む
      • 【ChatGPTと作る】あしのさきの動物パンプリン占い【クソアプリ】 - Qiita

        4 users

        qiita.com/yuneco

        Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? クソアプリ歴3年目のゆきです。一昨年はデスクトップでお寿司を回し、去年は世の動くサイトを粉砕しました。 今年も…って思ったけど、毎回自分でハードル上げ過ぎてしんどくなるので、今年は全部AIに任せてみようと思います こちらが完成した「あしのさきの動物パンプリン占い」です アプリ: https://yuneco.github.io/animal-panpudding/ ※ スマホでも動きます リポジトリ: https://github.com/yuneco/animal-panpudding これは一体何?? 🤖 「あしのさきの動物パンプ

        • テクノロジー
        • 2022/12/14 23:07
        • 4KBのJavaScriptだけで動く可愛いアクションゲームを作ったのでソースと解説 - Qiita

          77 users

          qiita.com/yuneco

          年イチでちょっとしたブラウザゲームを作ってます(→ 去年)。今年はそこそこ遊べる可愛いアクションゲームを4KB以内で作ってみました。 🎉宣伝させてください! 🐱今年も無事、猫の日ゲームができました!https://t.co/XnDD8AXx4k 今年は可愛さはそのまま、限界までコードを削って4KBにおさめました。PCの方はソース表示して見てみてね pic.twitter.com/j0QqH6iSSn — ゆき (@yuneco) February 20, 2022 作ったもの:ブラウザで動く4KBのゆるかわアクション URL: https://yuneco.github.io/mezashi-4kb/ ソース: https://github.com/yuneco/mezashi-4kb つまりどういう...コト? index.htmlという名前のファイルを作って下のコードをコピペする

          • テクノロジー
          • 2022/06/06 01:01
          • javascript
          • あとで読む
          • ゲーム
          • 圧縮
          • SVG
          • qiita
          • js
          • Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita

            257 users

            qiita.com/yuneco

            この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite(効果の組成)って機能がすごいよ!!って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき@ティアF47a (@yuneco) October 11

            • テクノロジー
            • 2022/05/08 21:35
            • css
            • アニメーション
            • あとで読む
            • animation
            • javascript
            • web
            • API
            • qiita
            • const
            • web制作
            • 😡webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】 - Qiita

              335 users

              qiita.com/yuneco

              おひさしぶりです。この記事はクソアプリ Advent Calendar 2021の13日目です 突然ですが皆さんは「スクロールに合わせてふわっと出てくるwebページ」ってどう思います? 最近多いですよね、あれ。 確かにオシャレだし楽しいしゲームとか作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページで「ふわっ」ってされるとちょっとイラッとする。 ちょっと?...イラッと?...いや、 許さない、絶対 よろしい、ならば粉砕だ よそ様のサイトを粉砕する都合上、今回の実装はChrome機能拡張です。機能拡張はViteにChrome機能拡張用のプラグインvite-plugin-chrome-extensionを入れて作りました。今回は解説しないけど、これ超楽。フレームワークは無し、言語はTypeScriptです。 とは言え、クソアプリのためにChromeに機能拡張をイ

              • テクノロジー
              • 2021/12/13 01:05
              • css
              • あとで読む
              • web
              • アニメーション
              • ネタ
              • qiita
              • javascript
              • プログラミング
              • animation
              • web制作
              • VueとPixi.JSでアクションゲーム『ネコメザシアタック』を開発して3年目なのでソースと解説 - Qiita

                30 users

                qiita.com/yuneco

                2/22に個人開発のブラウザゲーム『ネコメザシアタック21』をリリースしました。 特に理由はないのですが、3年前からこの時期には毎年同じテーマでゲームを作ってます。 ぶっちゃけ全然流行らないし、当然収益なんて1円もないのだけど、3年続けると見えてくることもあるので今年も記事書きます。せめて供養がわりにLGTM頂けると幸甚の極みです 作ったものの変遷 まあそんなわけで、まずはこの3年間での進歩をみて欲しい 1年目:その場でジャンプするだけの超シンプルゲーム プレイURL: https://mezashiattack.firebaseapp.com ソースコード: https://github.com/yuneco/mezashi 解説記事: VueとSVGを使ってシューティングゲーム『ネコ🐱メザシ🐟アタック🌟』を作ったのでソースと解説 その場でジャンプして弾(メザシ)を発射するだけの簡

                • テクノロジー
                • 2021/04/12 01:06
                • 開発
                • あとで読む
                • ゲーム
                • Vue3のcomposition-apiで金魚を大量に泳がせたのでソースと解説 - Qiita

                  4 users

                  qiita.com/yuneco

                  こんにちは。絵描き兼フロントの人の「ゆき」です。 先日Vue.jsのオンラインMeetupで「viteではじめるVue3 + TypeScript」という発表をしました。 Vue3の新しい開発環境であるViteの解説として簡単な「金魚が泳ぐデモ」を作ったのですが、LTではこのデモをほとんど見せる時間がなかったので、今日はQiitaで解説して元を取ろうと思います 作ったもの: https://yuneco.github.io/vite-kingyo/ リポジトリ: https://github.com/yuneco/vite-kingyo リポジトリクローンして動かす時はyarn; yarn devだけでOKです。 この記事ではVue3の込み入った話やViteの話は書きませんが、Vue3のcomposition-apiでインタラクティブなアニメーションを作るためのポイントは適時挟んでいきます

                  • テクノロジー
                  • 2020/09/07 21:34
                  • techfeed
                  • あとで読む
                  • VueとSVGでGIFアニメ生成アプリ作ったのでソース全公開&解説 - Qiita

                    18 users

                    qiita.com/yuneco

                    今日は週末に勢いでGIFアニメ生成アプリを作ったので開発の流れ&技術的なポイントを共有します。ソースコードも全て公開しているので、ご自由に流用して遊んでみてください。 作ったもの アプリ: https://fulful.web.app/ ソースコード : https://github.com/yuneco/fulful 珍しく、ちょいバズりました(※当社比) ふるふるふるえるGIFアニメを生成できるWebサービスをリリースしました!あそんでみてね #フルフルネコチャンhttps://t.co/x49XIjEBuN — ゆき (@yuneco) May 10, 2020 この記事で書くこと ちょっとした個人開発アプリを短期間でリリースする流れ&ポイント 技術解説:SVGフィルタの作り方 技術解説:ブラウザでGIFアニメを生成するアプリの作り方 なお、このアプリはもともとお仕事で↓の記事を書く

                    • テクノロジー
                    • 2020/06/22 17:35
                    • svg
                    • 個人開発
                    • 画像処理
                    • qiita
                    • アプリ
                    • 技術
                    • 開発
                    • 画像
                    • VueとCSSとTypeScriptでシューティングゲーム「ネコメザシアタック2020」を作ったのでソースと解説 - Qiita

                      41 users

                      qiita.com/yuneco

                      こんにちは 今日は2/22の猫の日に合わせて個人開発したゲーム「ネコメザシアタック」の技術的なポイントを解説する記事です。去年のバージョンはこちら 作ったもの ソース: https://github.com/yuneco/mezashi2 アプリ: https://nekomzs2.web.app/ (PCでも遊べるけどスマホ推薦です) 使っている技術 そろそろリリース見込みのVue3を先取りした構成です Vue(Vue2 + CompositionAPI) TypeScript CSS Transition(ほとんどのアニメーション) SVG(画像 + 一部のアニメーション) Firebase (Hosting + FireStoreでランキング) おしながき(この記事の内容) 作ったもの全部を解説していくとキリがないので、主に去年からの差分を中心に面白いポイントだけ説明していきます。

                      • テクノロジー
                      • 2020/03/01 22:12
                      • Vue.js
                      • あとで読む
                      • Vue
                      • css
                      • TypeScript
                      • game
                      • techfeed
                      • ●●WebGL(PIXI.js + glsl)と物理演算(matter.js)で可愛い絵本風タピオカ作ったので解説●● - Qiita

                        22 users

                        qiita.com/yuneco

                        こんにちは。WebGLのお勉強1週間目くらいの絵描き系エンジニア「ゆき」です。最近Qiita界隈でもタピオカが流行っているらしいので、今日は勉強中の技術をフルに活用してタピオカを作ってみました。 ここで試せます(スマホ未対応): https://tapioca-pixi.firebaseapp.com この記事の内容と想定読者 この記事ではJavaScriptの描画エンジンの定番の一つであるPIXI.jsと、物理演算ライブラリのmatter.jsを使って、タピオカを可愛くふわふわさせる表現のアプローチとポイントを解説します。 物理エンジンと描画エンジンの連携方法 シェーダーによるオリジナルの表現 物理演算で表現したいものを作るためのチップスいくつか シェーダー(glsl)周りは結構独特なので別途もうちょっとちゃんとした解説記事を書く予定です。この記事はどちらかというと駆け足のネタ記事になっ

                        • テクノロジー
                        • 2019/09/02 12:33
                        • pixi.js
                        • WebGL
                        • GLSL
                        • JavaScript
                        • あとで読む
                        • animation
                        • Vue.js+SVGで自由にCSSアニメーションしたい人のための完全解説(ソース付き) - Qiita

                          81 users

                          qiita.com/yuneco

                          こんにちは。UX&フロントエンジニアしながら絵描きして遊んでいる**ゆき(@yuneco)**です。この記事ではVue.jsを使ってCSSアニメーションを使った表現を自在に行うための基本的な部分をステップバイステップで解説します。目標は↓以下のようなアニメーションをJavaScriptで自在に構築できるようになることです。 ソースコードはこちら: https://github.com/yuneco/css-anime-tutorial 目次 この記事では最初にSVGを単純に表示するところから始め、Vueのコンポーネントを利用してそのSVGを自由に配置・変形させる方法を説明します。その上でCSS transitionを用いたアニメーションを取り入れます。最後に、複雑なアニメーションを抽象化・構造化してより複雑なシーンを構成するための方法を解説します。 SVGを作る Vueプロジェクトを作る

                          • テクノロジー
                          • 2019/06/30 22:37
                          • SVG
                          • vue.js
                          • アニメーション
                          • css
                          • Vue
                          • あとで読む
                          • animation
                          • js
                          • will-changeで目指す60fpsのぬるぬるCSSアニメーション - Qiita

                            177 users

                            qiita.com/yuneco

                            こんにちは、CSSとVue.jsでアニメーション使いまくりのポートフォリオ作ったり、シューティングゲーム作ったりして遊んでいるゆきです。 今日はCSSアニメーションで無茶しすぎてMacBookがカイロになった反省からの「負荷をかけずにぬるぬるのCSSアニメーションを実現するための試行錯誤」の顛末をまとめます。それでもCSSでアニメーションしたいんだ 今回の目的とサンプルケース この記事では、Webで**CSSを使ってゲームやアート的な表現にゴリゴリのアニメーションを使いたい!**というケースを想定します。 全体を通してCSSのwill-changeプロパティを使ったGPUレンダリングによる最適化のお話です。will-changeってなに?って方はこの後でてくる参考記事リストを先に見ていただくのが良いと思います。 https://css-anime.firebaseapp.com/ 今回検証

                            • テクノロジー
                            • 2019/06/10 01:37
                            • css
                            • あとで読む
                            • アニメーション
                            • performance
                            • vue
                            • animation
                            • css3
                            • 15年開発してるMac用画像ビューアを3年ぶりにバージョンアップした時にやったこと - Qiita

                              36 users

                              qiita.com/yuneco

                              こんにちは、絵描き兼開発者の「ゆき」です。 今日は私が学生時代から10年以上、地味に開発・サポートを続けているMac向けの画像ビューアを3年ぶりくらいにバージョンアップしたお話です。 この記事のモチベーションと対象読者 詳細は後ろに書きますが、Macアプリの個人開発界隈はそろそろ死にます。1 今年リリース予定の次期MacOS(10.15)で32bitアプリのサポートが完全に終了するためです。古くからの個人開発アプリは新しいバージョンが出ない限り新しいOSでは動きません。 もちろんきちんと開発継続しているアプリはもう大体対応済みかとは思いますが、個人開発のフリーウエア・シェアウエアに関しては開発者本人すら忘れていたりすることもある2ので、そんな個人開発者の方向けにこの記事が届けばいいなー...くらいの気持ちで書き残しておこうと思います。 今回の対象アプリ 画像ビューア「絵箱」 http://

                              • テクノロジー
                              • 2019/05/08 09:03
                              • mac
                              • アプリ
                              • 開発
                              • あとで読む
                              • VueとSVGを使ってシューティングゲーム『ネコ🐱メザシ🐟アタック🌟』を作ったのでソースと解説 - Qiita

                                15 users

                                qiita.com/yuneco

                                →2020年版できました。あわせてご参照くださいませ 絵描きとかUXとかやりつつフロントもやってる「ゆき」です。前回Vue.jsを使ったポートフォリオサイトを作って、VueとSVGだけでぬるぬる動くアニメーションが実現できることがわかりました。 ここまでやったら次はゲームを作りたいと思うのが人の性ですよね。今回は猫の日に合わせて合計20時間くらいで爆速ゲーム開発をやってみました。多分Vueでシューティングゲームを作った変わり者はあんまりいないと思うので、ソースとノウハウを共有します。 作ったもの https://mezashiattack.firebaseapp.com ソース(Githubリポジトリ) タップだけで遊べる簡単なシューティングゲームです。ジャンプしながらメザシを発射し、迫ってくる猫に与える(当てる)とポイントになります 今回作ったゲームの技術的なポイントです アニメーション

                                • テクノロジー
                                • 2019/02/25 03:37
                                • vue.js
                                • SVG
                                • Vue
                                • ゲーム
                                • VueとFirebaseの基本機能全部使ってぬるぬる動くポートフォリオサイトを作ったのでソースと解説 - Qiita

                                  437 users

                                  qiita.com/yuneco

                                  絵描きとかUXとかやりつつフロントもやってる「ゆき」です。ポートフォリオサイトは10年くらい前にMoveableTypeで作ったきり。最近流石に「これでフロントやってますとか言ったら絶対次転職できなくね?」と危機を感じたので0から作り直しました。 サイト: https://pf.nekobooks.com/ ソース: https://github.com/yuneco/portfolio 機能・性能・運用を考えて作った結果、VueとFirebase(Web)の機能を一通り使ったサイトが出来上がりました。これからちょっと凝ったポートフォリオサイトを作りたい方向けに、どういう目的でどの機能を使ったのか、その時のポイントはなんだったのかを共有します。 2019.4.18追記 春なので期間限定1で桜が咲くアニメーションを追加してみました。単体のアニメーションはテストページで試せます。複雑に見えるか

                                  • テクノロジー
                                  • 2019/02/04 15:40
                                  • firebase
                                  • Vue.js
                                  • Vue
                                  • あとで読む
                                  • SVG
                                  • web
                                  • UX
                                  • web制作
                                  • qiita
                                  • ポートフォリオ
                                  • Web Bluetooth APIとFirebaseでIoTドールハウス的なものを作ってみた話 - Qiita

                                    5 users

                                    qiita.com/yuneco

                                    Web Bluetooth APIとFirebaseでIoTドールハウス的なものを作ってみた話 概要 ちょっと前のコミティアで自作のドールハウスもどき1を作って、その中の照明とか窓枠のディスプレイとかを来場者のスマホからリモコン制御できるようにしてみた話です。 Bluetooth機器はLED照明のPLAYBULBE、技術的にはWeb Bluetooth API・Firebase・Riot.js・ES6(ES2015)・anime.jsあたりつかってます。 作ったもの 窓の外の景色と室内の照明をスマホのブラウザをリモコンにしてコントロールできるようになってます。 ポイント: カメラでQRコードを読むだけでリモコンが一発起動。Webなのでインストール不要! 複数人で同時操作もOK!他の人が景色や照明を変えると、手元のリモコン画面にも即座に反映 全てWeb技術で完結。半田ごてもラズパイも不要!(

                                    • テクノロジー
                                    • 2018/12/18 09:33
                                    • Bluetooth
                                    • SNS映えするWebアプリを...!FirebaseとVue.jsでSPAのOGP画像の動的生成をやってみたら案外楽だった - Qiita

                                      23 users

                                      qiita.com/yuneco

                                      この記事はFirebase Advent Calendar 2018 6日目の記事です。 はじめまして、ゆき(@twitter:yuneco)です。日頃は絵を描いたりちょっとしたWebアプリを個人開発したりして遊んでいます。今日は個人でTwitter連携アプリを開発した際に悩んだSPAの動的な(ページごとの)OGP生成について情報をまとめてみたいと思います。NuxtやSSRは使いません。 作ったもの&OGPのイメージ 今回作った colorinco*カラーインコ はTwitter連携したユーザの投稿画像やお気に入り画像を表示し、そこから自動的にカラーパレットを生成、Twitterでシェアできるサービスです。共有するとタイムラインに↓こんな感じでコンテンツにあわせた画像が大きく表示されます。 映える!テンション上がる! SNS連携アプリならOGPは必須 OGP(Open Graph Prot

                                      • テクノロジー
                                      • 2018/12/06 09:24
                                      • OGP
                                      • firebase
                                      • Vue.js
                                      • SPA
                                      • techfeed
                                      • JavaScript

                                      このページはまだ
                                      ブックマークされていません

                                      このページを最初にブックマークしてみませんか?

                                      『qiita.com』の新着エントリーを見る

                                      キーボードショートカット一覧

                                      j次のブックマーク

                                      k前のブックマーク

                                      lあとで読む

                                      eコメント一覧を開く

                                      oページを開く

                                      はてなブックマーク

                                      • 総合
                                      • 一般
                                      • 世の中
                                      • 政治と経済
                                      • 暮らし
                                      • 学び
                                      • テクノロジー
                                      • エンタメ
                                      • アニメとゲーム
                                      • おもしろ
                                      • アプリ・拡張機能
                                      • 開発ブログ
                                      • ヘルプ
                                      • お問い合わせ
                                      • ガイドライン
                                      • 利用規約
                                      • プライバシーポリシー
                                      • 利用者情報の外部送信について
                                      • ガイドライン
                                      • 利用規約
                                      • プライバシーポリシー
                                      • 利用者情報の外部送信について

                                      公式Twitter

                                      • 公式アカウント
                                      • ホットエントリー

                                      はてなのサービス

                                      • はてなブログ
                                      • はてなブログPro
                                      • 人力検索はてな
                                      • はてなブログ タグ
                                      • はてなニュース
                                      • ソレドコ
                                      • App Storeからダウンロード
                                      • Google Playで手に入れよう
                                      Copyright © 2005-2025 Hatena. All Rights Reserved.
                                      設定を変更しましたx