masuidrive

masuidrive

    • masuidrive

      masuidriveの日常を書いてます。技術もそうじゃない事も。

    • Web Components楽しい！

      Web Components楽しいので色々書いてみる！

    • 「色の消しゴム」アプリの作り方

      iPadには色々なお絵かきアプリがあるけど、私が欲しい「色の消しゴム」を持ったものがない！っていうのでProof of Conceptを書いたら友人の沖ちゃんが興味を持ってくれたので、ガッツリ巻き込んでアプリを作ってもらおうと思っている記録。

    • CardDBっぽいのが欲しい

    ChatGPTで1日分のSlackを要約してくれるスクリプトを作りました

    Slackって読むの大変ですよね。っていうかもうみんな追いかけるの無理でメンションしか読んでないですよね？ でも、全体感は把握しておきたい。そんな人のために昨日発表されたChatGPT APIを使って、SlackのチャンネルをGPTが読んで短くまとめてくれるスクリプトを作りました。 OpenAIへの登録(要課金)とGitHub Actions(要課金)だけで、朝早くに昨日のSlackのPublic channelの内容をチャンネルごとに要約して投稿してくれます。 かなりの

    masuidrive

      • よくある2ペインのレイアウト用コンポーネントを作りつつ、Web Componentsの仕組みを理解する

        Web Componentsを一言で説明すると「HTML/CSSが独立したカスタムタグを作れる仕組み」です。理解するには、まずは素のJavascriptだけでよくある部品を作ってみることが一番だと思います。 多くのサンプルではボタンやアイコンなどの部品を作りますが、今回はflexboxを使ったレイアウト定義のコンポーネントを作ってみます。この部分にはちょっとしたハマりどころがあるのでちょうど良い練習になります。 もう一つハマりやすいのはフォーム部品ですが、これはまた後日書

        masuidrive

        • とりあえずWeb Componentsでやりたいこと

          Storybookでいい感じにリファレンスを書ける環境作り (CSF v3かな？ Chromaticでreviewなどをできる設定 今作ってるRails 7のviewでコンポーネントを使う PurgeCSSを使って不要なCSSの削除を行う コンポーネントの配布 Litの使い方の記事を書く 仕事でも使ってみる tips formの処理 flexbox関係は:hostに設定しないとだめ

          masuidrive

          • 今なら使えるWebComponents

            Web Componentsは10年ほど前に提唱されたブラウザのコンポーネント技術の総称です。自分でタグを作ってHTMLを拡張していける技術なのですが、ブラウザの対応や仕様の確定などに時間がかかり、なかなか実用に至りませんでした。 私もずっと忘れていたのですが、React/Vueに疲れたなーと考えていたところ、ふと思い出し調べ直してみると、既に安定してProduction readyなのに情報が少なくすごくもったいなかったので、自分で調べつつ色々書き残すことにしてみました。

            masuidrive

          マガジン

          マガジンをすべて見る すべて見る
          • masuidrive
            masuidrive
          • Web Components楽しい！
            masuidrive
          • 「色の消しゴム」アプリの作り方
            masuidrive
          • CardDBっぽいのが欲しい
            masuidrive

          記事

          記事をすべて見る すべて見る

            Github Codespacesを使ってブラウザだけでESP-IDF開発環境を作る

            IoT関係の開発で一番面倒なのは開発環境を構築することじゃないでしょうか？ 複数人数で開発する場合、コンパイラのバージョンを細かく合わせたり、M1 macの場合はそもそもtoolchainが対応していない場合もあります。 Web開発では最近GitHub Codespacesを使ってVSCodeとDocker環境をブラウザだけで作り、その上で開発できるのですが、IoTの場合はデバイスの書き込みの方法がありません。 ということで、私が主に使っているESP32の開発環境のES

            masuidrive

            CH340Kは最近のmacOSでは認識しない

            タイトルで全部なんですが、公式のドライバもMojavi以降インストールできないみたいで詰みましたw 安くていい感じだったのになぁ CH340GとかはOSに標準のドライバで認識するのですがプロダクトIDの違うCH340Kは認識しないようです。  Virtual machineにUbuntuを入れればその中では認識するんですけどね。 参考URL - ESP32の書き込み用にCH340Kを使った回路を作ってみました(失敗) | kohacraftのblog - CH340Kで

            masuidrive

            After EffectsでSRTファイルから一番簡単に字幕をつける方法

            After Effectsのエクスプレッション機能を使って、SRTファイルから字幕を入れます。After Effects 2020で動作確認をしています。 動画に字幕を入れるのはよくあることですが、決まったやり方もないみたいなので一番簡単と思われる文字ツールに対するエクスプレッションを使った方法を解説します。 エクスプレッションを使うメリット - ほぼリアルタイムで反映されるので別のエディタでSRTファイルを書き換えるとそのままプレビューに反映される - プラグインなどを

            masuidrive

            Docker on M1 macでRails/Nuxt開発環境を試す（だいたい動いた

            これでついにM1 MacbookAirを開発機として使えるようになります！多分。 先日、DockerのAppleSilicon対応版がDeveloper Preview Program(要ユーザ登録)で公開されたので早速試してみました。 インストールは特別なことなくD&Dするだけ。まずはターミナルからalpineを起動してみます。 $ docker run -it --rm alpine sh/ # uname -aLinux 1bf5d756f216 4.19.104

            masuidrive

            PlatformIOでESP-IDF v4を使う方法

            なんか探しても分かりにくかったのでメモ platform.iniに`platform_packages`を追加 [env]platform = espressif32framework = espidfplatform_packages = framework-espidf @ https://github.com/espressif/esp-idf.git#release/v4.2 @ https://github.com/espressif/esp-idf.git#r

            masuidrive

            cdr/code-serverで開発頑張る #1

            本格的にVSCodeのオンライン版である cdr/code-server を使って開発を続けています。気がついたこと、直したいところが出たのでメモ。 接続が切れても分からない回線が不安定なところで使って、接続が切れても気がつかない。そのまま保存を押しても実は保存されてないが気がつかない。そのあと接続が再開してもリロードしないと再接続されない。 これは結構致命的なので、パッチ作るのを検討。 iOSでVPNのオンデマンド接続の方法がわからないProfileの作り方がわからな

            masuidrive

            MyDNSでLet's Encryptを使う

            code-serverでコードを書き始めたのですが、terminalでコピーするにはhttpsで接続する必要があるそうで、VPNにしたんだけどhttpsも設定することにしました。 httpsといえばLet's Encrypt。core-serverは外部に公開してないから普通にHTTP経由ではLet's Encryptの設定ができないのでDNSを使う必要がある。そしてドメインは適当なDynamic DNSを使いたい・・・と思って検索したらMyDNS.jpがDNSを使ったLe

            masuidrive

            code-serverを使ってブラウザ上だけでセキュアで快適に開発してみる

            前に紹介したCoderがPivotしエンタープライズ開発に注力するようで、個人開発者向けVSCodeブラウザ版はオープンソースで提供するようになりました。 VSCodeのブラウザ版はDockerでも提供されていて、Dockerさえインストールされていれば下記のコマンドを起動したあと`http://localhost:8080`をブラウザで開くだけでVSCodeと同じ環境で開発ができるようになります。 docker run -it -p 127.0.0.1:8080:808

            masuidrive

            DJコントローラを自作してみる #1

            自分用に持ち歩きやすいコンパクトなDJコントローラ欲しかったので作ってみることにしました。 DJコントローラはMIDIデバイスとしてスイッチの信号を送ってるだけなので、多分ArduinoとかでUSB-MIDIを話すライブラリがあるだろうと思っていたら、やっぱりありました>MIDIUSB プロトコルは昔調べたことがあるので、それを思い出すためにWikipediaとかサンプルコードを読みながら、EQとかはコントロール・チェンジで送信して、PLAYボタンとかは普通にノートとして

            masuidrive

            コンピュータサイエンスの基礎を学ぶと何ができるようになるのか

            今日、Facebookに「プログラマだったら当然知ってるよね？という知識一覧」という記事で、「データ構造」や「計算量」から「理論計算機」など幅広くコンピュータサイエンス(CS)の基礎をプログラマ知っているべきという論が展開されています。 私は経営学部だったのでコンピュータサイエンスについて学校で習ったことはないのですが、高校の頃から趣味で色々調べていて、この中だとグラフ理論と機械学習系以外は大体理解しています。 「Web系の人って、新技術ばっかり追いかけてCSの基礎とかち

            masuidrive

            プログラミング言語やHTML/CSSなどを学んだ後にやるべきことは写経とクローン作り

            Progateやドットインストールなど、プログラミング学習サイトが最近たくさん出てきていますが、「言語やツールを学んだあとどうすればいいのかわからない」という話も聞くようになりました。 せっかく言語を学んだのであれば、この状態を超えて自分の作りたいものを作ったり、依頼されたものを作れるようになると世界が広がります。 実は「言語やツールを知っていること」「コードが書けること」「サービスが作れること」と「ビジネスができること」のそれぞれのフェーズには大きな壁があります。多くの

            masuidrive

            エンジニアのゆるいつながりを感じるクラブイベント！ "ポプテク 2019 Spring"を5/28に開催！！ 【エンジニアじゃなくても大歓迎】

            「エンジニアってあんまりクラブ行かないけど、来てみたら面白いよ！」でも「普通のクラブはみんな怖くて行けないよね！」っていうことで、エンジニアが主導するクラブイベント"ポプテク"を行政書士でフェチ東京創設者、StudyCode主催者の新井秀美さん、ポップカルチャーメデイアのKAI-YOUさんとで開催してます。 今回はついに3回目！正念場です！ この手のイベントって2回目までは義理とテンションで集客できるんですが、3回目ぐらいから集客に苦労して、そのまま4回目はないってパター

            masuidrive