この記事のポイント この記事は、AI拡張機能「Cline」について解説しています。オープンソースとして提供されるClineは、開発者の生産性向上を目指しています。Clineの活用方法や料金体系、拡張性やカスタマイズについても詳しく紹介されています。実際のClineの使い方や、安全性と柔軟性の両立にも触れられています。 Microsoft AIパートナー、LinkX Japan代表。東京工業大学大学院で技術経営修士取得、研究領域：自然言語処理、金融工学。NHK放送技術研究所でAI、ブロックチェーン研究に従事。学会発表、国際ジャーナル投稿、経営情報学会全国研究発表大会にて優秀賞受賞。シンガポールでのIT、Web3事業の創業と経営を経て、LinkX Japan株式会社を創業。 AIを駆使して開発者の支援をする「Cline」について、その使い方から料金、実際の活用事例まで詳しく解説します。 オープ
概要 開発者向けの AI ツールは数多くありますが、その中で「Cody」は 無名ながらも知る人ぞ知る優れたプロダクトです。私が普段いるAI技術者コミュニティでは密かに絶大な支持を集めていますが、SNSなどでの一般的な知名度はほとんどないため、ここで紹介します。 Cody は無料プランが圧倒的に強い他、課金プランも、GitHub Copilot、Cursor、ChatGPT と比較して機能性で大きく抜きん出ています。私はすでに半年課金愛用していて、おそらく来年も愛用するでしょう。 Cody とはなんぞや Cody くんは、VSCode や、JetBrains IDEs、Neovim、Eclipseなどのコードエディタの拡張機能として使えるコーディング補助 AI ツールです。 他の生成 AI コードツールと同様に、AI コード補完とAIチャットがあります。 なぜ Cody がおススメなのか C
スマホで高さいっぱいにしたい時に、100vhが高さいっぱいにならず頭を悩ませていたときに、100svh, 100lvhの動的ビューポート単位が登場して、一時は解決したかに思いました。しかし、これらの単位だけではスマホでバーチャルキーボードなどを表示すると期待通りに機能しません。 このバーチャルキーボード表示時に頭を悩ませていた人に朗報です。CSSのinteractive-widgetキーワードを使用すると、この問題がすっきり解決します。 Control the Viewport Resize Behavior on mobile with interactive-widget by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに デフォルトのビューポートのサイズ変更動作 metaタグのinteracti
WordPressから乗り換える？他社CMSと移行方法を紹介世界中で大人気のCMS（Contents Management System：コンテンツ マネジメント システム）であるWordPress。日本では約8割のCMSがWordPressだそうですね。とっても使いやすくておしゃれなテーマも多く、カスタマイズ性も抜群！私も長年使っていますが、最近なにやら不穏な空気も。そこで、WordPress以外のCMSについて、簡単に紹介してみます。 ちなみに昨今のWordPress界隈のゴタゴタは、こちらの記事が簡潔でわかりやすいかもです： WordPress公式ディレクトリのAdvanced Custom FieldsがSecure Custom Fieldsに変わってしまう – Capital P – WordPressメディア とは言え、「WordPress、だめ絶対！」なんて言いませんよ！た
The Minimal PHP Framework for Pragmatic DevelopersOnly 1.3 MB. Learn in 10 minutes.PHPSSP really helpful for you to build a simple website or web application. Sometimes i can just install Laravel or Codeigniter, but i think its too heavy for simple website. So i build PHPSSP for simple website or web application. I just need a controller, model, view, routes, input sanitization, database connectio
Finderのコンテキストメニューに「Visual Studio Codeで開く」を追加することで、Finderから編集したいフォルダやファイルを指定するだけでVS Codeで編集できるようになるので非常に便利です。 WindowsのSakuraエディタといったエディタでは、インストール時に右クリックメニューに追加する設定ができるので、非常に重宝していましたが、MacでVSCodeを使い始めたときに同様のことはできないのかと思い調べてみました。 macOS Catalinaからzshに変更されたので追記しました。 Automatorで作成 AutomatorはmacOSの自動化ユーティリティです。 Automatorを開く このアイコンが目印です。 メニュー > ファイル > 新規 を選択する テンプレート（書類の種類）は「クイックアクション」を選択します。 アクションの追加 左側のライブ
Flexpilot Flexpilotは好みのAIモデルを選択可能なプライバシー重視のVS Code向け生成AIコーディングアシスタントです。VS Code用のGitHub Copilot代替となる拡張機能として開発されており、無料且つOSSとしてソースコードも公開されています。 コンテキストを認識した上での提案やガイダンス機能を備えたAIコード補完、コーディングスペースの脇に設置されるAIチャット機能、エディタを離れずにコードのリファクタリングやエラー処理及び解説をするインラインチャット機能、その他、生成AIによる様々なコーディングサポート機能が備えられています。それぞれの機能はリポジトリにGifアニメで紹介されていますので直ぐにどのようなものか把握できると思います。 選択できるLLMもOpenAIはもちろん、Gemini、Mistral AI、llama、AnthropicやOllam
本連載では、Webページ用UIフレームワーク「Svelte」の活用方法を順を追って説明しています。前回はプロジェクトの構成とSvelteコンポーネントの実装方法を説明しました。今回はデータ内容をWebページの内容に反映して更新させる、Svelteのリアクティブ機能とバインディング機能について説明します。 はじめに SvelteはWebページのUIを構築するためのフレームワークです。コンパイルによりプレーンなJavaScriptを生成し、実行時にSvelte固有の実装を利用しないことで、実行ファイルのサイズを小さくできる特徴があります。 本連載ではSvelteの活用方法を、順を追って説明していきます。前回はSvelteでWebページを実装するプロジェクトの基本的な構成や使い方と、SvelteにおけるWebページの構成単位であるコンポーネントの実装方法を説明しました。 今回は、コンポーネントに
CSSの実装に便利なVS Code用の機能拡張がリリースされました！ レスポンシブ対応のフォントサイズをCSSで定義するときに、面倒なclamp()関数の定義を簡単にできるClamp It!を紹介します。 Clamp It! -GitHub Clamp It! -Visual Studio Marketplace レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義 Clamp It!の使い方 Clamp It!のインストール レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義 レスポンシブ用のフォントサイズを設定するには、CSSのclamp()関数が便利です。たとえば、ルート要素が16pxで、スクリーンのサイズごとにフォントサイズを変えるとします。 480pxのスクリーン: 1.rem 16.8px 800pxのスクリーン: 1.25rem 20px 100
CSSだけでwidth: auto;やheight: auto;にアニメーションできたらいいな、と思ったことはありませんか？ たとえば、下記のようにテキストの量によってサイズが異なるボタンです。 これまではCSSでアニメーションするときは、固定値（width: 100px;しかアニメーションが機能しませんでしたが、Chrome 129でサポートされたinterpolate-sizeプロパティやcalc-size()関数を使用すると、簡単にwidth: auto;へのアニメーションが実装できます。 Animate to height: auto; in CSS by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに autoなどのキーワードをアニメーションさせる方法
Fetch APIでファイルを読み込む 最終更新日：2023-12-24 公開日：2021-02-10 Fetch APIを使って指定したURLからテキストファイルや画像ファイルなどを読み込む方法について解説します。 この記事のポイント 読み込むデータのファイル形式によって、Responseオブジェクトからファイルを取得するメソッドを切り替える 画像、音声、動画のようなリソースファイルを読み込むときはURL.createObjectURLメソッドを使ってページに挿入すると表示できる Fetch APIのAjaxでファイルを読み込む Fetch APIはサーバーにリクエスト（要求）を送信することで各種ファイルを読み込むことができます。 ファイルはどの形式でも読み込むことができますが、取得するファイル形式ごとにレスポンスデータの処理が必要になります。 以降では、以下の形式の各種ファイルをFet
2024.01.05 2024.07.15 Webデザイン 【2024年最新版】Swiperの使い方やカスタマイズ方法をわかりやすく解説します 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 プログラミングの勉強を始めたばかりの方でも、本記事で解説するSwiperを使えばカンタンにスライダーを作成できます。 本記事では、導入方法から各オプション・実装時のトラブルシューティングまで網羅的に解説しています。 記事を読み終えると、Swiperの使い方を一通り理解でき、色々なスライダーを作れるようになりますよ！ また、jQueryで
※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。 (送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。) はじめに この記事を読めば、PHPを用いたスクレイピングの基本的な手法を理解し、自分でスクレイピングを行うことができるようになります。 今日からあなたもデータ取得のプロフェッショナル。 スクレイピングの世界へ、一緒に飛び込んでいきましょう。 ●PHPとは PHPは、ウェブサイトの開発に特化したプログラミング言語の一つです。 HTMLと組み合わせて使うことが多く、データベースと連携して動的なウェブページを作成するのに適しています。 ●スクレイピングとは スクレイ
スクレイピングといえばPythonみたいな風潮がありますが、私はPHP派なのでPHPでWebスクレイピングをする方法を解説します。 Webスクレイピングとは Webスクレイピングとは、Webサイトから特定の情報を自動的に抽出する技術のことです。 Webスクレイピングを使うと、例えば、ショッピングサイトに掲載されている商品の価格を定期的に取得して、そのデータをグラフ化するなんてことができますね。 通常ならば、人間がブラウザを使って手動でデータ収集しなければならないところを、Webスクレイピングで自動化することができるわけです。わー、便利そう。 PHPでWebスクレイピングをする方法 PHPでWebスクレイピングをする方法としてよくphpQueryというライブラリの名前が上がるのですが、こちらとっくの昔に開発が停止しているようなので、使わないほうがよさそうです。 というわけで今回は、PHPに標
オススメ！PICK UP Accessibility確認のブラウザー拡張機能 ソフト紹介2023年10月 2日 簡単実装：CSSだけでアコーディオン開閉させる CSS2022年5月 9日 jQuery：アコーディオンメニューをサクッと作りたい時のための記事 JavaScript2021年12月10日 スライダープラグインの王道「slick」でスライダーを実装する方法 スライダー2021年12月 8日 【Google Chrome】サイト全体をスクリーンショットする方法【拡張機能不要】 PC・スマホ（操作/設定）2020年10月29日 CSS コーディング 制作 jQueryを使わずに、CSSだけで簡単にアコーディオン開閉させる方法を実装する方法をご紹介します。 以前、似たような記事を書いていますのでそちらも参考にしてみてください＾＾ 簡単実装：CSSだけでタブ切り替え 【アコーディオン関連
Webページを表示し、スクロールダウンするとヘッダが非表示になり、ページのどこからでもスクロールアップするとヘッダが再び表示される、というのを見たことがあると思います。 これまでは実装するにはJavaScriptが必要でしたが、CSSのみで実装できる方法を紹介します。 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up. by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS Scroll-Driven Animationsでスクロール方向を検出する transition-delayプロパティを使ったテクニック ヘッダをスクロール時に表示
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
