Chrome拡張 つくりかた 令和最新版
数年ぶりにChrome拡張のつくりかたを調べた。 本当に何も分からなかったので、Twitterで「2022年にChrome拡張つくりたかったら何見て学べばいい？」とつぶやいてみたところ、何人かの人が教えてくれた。教えてもらった中から幾つかのリンク先を紹介するような形で記述していく。 Create a Vite-React Chrome Extension in 90 seconds - DEV Community 2022年時点だと比較的新しめのフロントエンド向けツールであるviteと、viteのChrome拡張向けプラグインである@crxjs/vite-pluginを使ってChrome拡張をつくってみよう、という記事。今回自分は主にこれを参考にしながら開発を進めた。Reactと言っているが、自分のChrome拡張ではUIは存在しなかったので、Reactに関する部分は読み飛ばして、vite
Chrome Devtoolのmonitorを使うと関数の呼び出しを観察できて便利 - ぱすたけ日記
を読んで思い出したのでご紹介です。 元の記事と同様に以下の関数 sum について、 function sum(nums, acc = 0) { console.log({ nums, acc }); if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } この関数sumの引数 (nums と acc) の呼び出しごとの変化を見たい場合は、所謂プリントデバッグや debugger を使うのは一般的なテクニックとしてよく知られていますが、このような関数呼び出し時の引数を知りたい場合はmonitor(function)という関数を使うことで同様の効果を得ることが出来ます。 この場合は monitor(sum)とした後に、関
Web制作初心者に役立つ良質なツールやコンテンツ達を出し惜しみせず全部紹介
ぼくがWebデザインに携わってからこれまで約5年半、Web上の多くの優良なサイトから知恵を借りて、ド素人からなんとかフリーで仕事を貰えるまでになった。そして常々、Webから与えてもらった知識や情報を還元したいと思っていた。 こうしてブログを始め自ら情報を発信する場を得たので、一度Web制作に関する良質な情報をまとめて提供してみたい。 このエントリーでは、Web制作の初心者もしくはWeb制作に興味があってこれから始めてみたいという人が、うまくWebの世界に入っていくのに役立つような情報を厳選して紹介している。 一人でWeb制作全般を見れるようになるための基礎的な情報を広く列挙してあるが、必要な箇所だけ断片的に取り上げてもらっても役立つと思う。またできるだけ日本語の中で閉じるよう、海外サイトは最低限にとどめた。 目次 とにかく１ページに詰め込むことを優先したのでかなり長いが、下の目次から必要な
【作業用BGM】ログイン不要、簡単操作で良曲がずっと聞けるサイト14選 - まとめ記
パソコンで何か作業する時って音楽が聴きたくなりますよね。 お気に入りの曲もずっと聞いていると飽きてくるし、新しくネット上で探すとなると作業前なのにちょとした作業が発生するので時間が取られるし、何より面倒です。 私自身、検索バーで検索してYoutubeのプレイリストを自動で作ってくれるとかその程度の操作でも手間に感じてしまいます。英語のサイトならなおさら。 そこで今回は、ログイン不要なのは絶対で、URLを開けば勝手に始まる・再生ボタンを押せば永遠流れるといった、作業前に作業が極力発生しない14サイトを 「洋楽」「環境音」「邦楽・アニソン」に分けて紹介していきます。 洋楽 Vave URLを開き、ロゴ横の再生ボタンを押せばとりあえずいい感じの洋楽が流れます。 とにかくサイトがシンプルでとても操作性がいいです。 ジャンルを大きなアイコンから選ぶと気分に合わせた音楽が流れます。 PARTY CAS
働クリッカーという JS を学べるゲームを作りました。
どんなゲームなの？ 働クリッカーは、身も蓋もない言い方をすればクッキークリッカーがつまんなくなったやつです。 画面左側の『働く』ボタンを連打してお金をためて、資格やプログラミングスキルを買って一働きの単価を上げ、アフィリエイトや土地、株を買って不労所得(働くを押さなくても入ってくる金)を増やしていくというゲームなのですが、このゲームの肝はそこではなく、どれだけ高速にゲームクリア実績や全実績解除を達成できるか、というプログラミングによる攻略が本質的な所です。 俺が、俺達が TAS さんだ Tool Asisted Speedrun(or Superplay) という、ツールによる補助を受けたスーパープレイの動画は、多分見たことがあると思います。あれはエミュレーターそのものにそういう機能があったりするんですが、このゲーム、働クリッカーの場合は、ゲームそのものにツール機能が組み込まれています。と
SPAがネイティブアプリをぶっ壊す：HTML5/Javascriptが変えるWebの未来 - Qiita
はじめに タイトルは半分釣りですが、半分本気で考えてもいます。 近い将来、Webアプリが今のネイティブアプリの市場を超えてくる、と仮説を立てています。 ぜひ、先人のみなさんのご意見やお考えを教えてください。 SPAについて SPAとはなにか（What） 歴史 佐川夫美雄さんのイベントレポートの一部が、非常にまとまっていてわかりやすい部分でしたので、まず引用させていただくこととします。 RIAはアプリケーション利用者に対し高い評価を得ましたが、2010年のAppleショックにより衰退の方向へ向かいます。具体的には2010年にSteve JobsがFlashを激しく批判したことに端を発します。プロプライエタリ(Proprietary Software)なFlashよりオープン性のあるHTML5を推進するようになりました。2011年にはMicrosoftがWeb開発者に対してSilverligh
伊藤直也氏が「Web開発は高度化している」と語る理由と、押さえておきたい3つの技術領域【2014年前半のインプットlog】 - エンジニアtype
KAIZEN platform Inc. Senior Technology Advisor 伊藤直也氏（@naoya_ito） 2002年に新卒入社したニフティでブログサービス『ココログ』の開発担当となり、一躍有名になる。その後、はてなで『はてなブックマーク』など各種サービスを立ち上げ、2010年にグリーへ入社。2012年に同社を退職して以降は、フリーランスとしてベンチャーの技術顧問などを請け負う。自身のブログ『naoyaのはてなダイアリー』が人気 「Webアプリの実装で差別化は無理」という考えが変わった 現在、KAIZEN platform Inc.をはじめ複数社の技術顧問を務めている伊藤直也氏。「普段から、アウトプットの目的なく技術の勉強をすることはほとんどない」という性分から、今年上半期は「顧問としてベストプラクティスを提供するために知っておくべき領域」にフォーカスして情報収集を
入力フォームを改善して入力完了率を上げる！ エントリーフォーム最適化15カ条 | 勝手にEFO分析-エントリーフォーム改善
入力フォーム（エントリーフォーム）を入力していて、イライラする……と感じたことありませんか。ありますよね。自社サイトの入力フォームでユーザーにイライラを与えていませんか。 小さなイライラが積み重なった先にあるのは、エントリーフォームからの離脱です。ユーザーが一度エントリーフォームから離脱してしまったら、もう戻ってきてはくれないと覚悟しておくべきです。入力を完了してもらいエントリーフォームの「入力完了率※」を上げるためにはどうしたらよいのでしょうか。 そこで、この記事ではEFO（エントリーフォームを最適化）を行い離脱要因を減らして、入力完了率を上げる15カ条を紹介します。 少し手間をかければ劇的に入力完了率アップが期待できるはずの、「惜しい」エントリーフォームを各条1つずつ取り上げて、頼まれてもいないのに、勝手にそのフォームを分析して作った改善案とともに、ポイントとなるエントリーフォーム改善
Webアプリのパフォーマンス改善をWeb標準で行う方法、まとめ - ふろしき Blog
「HTML5 Advent Calendar 2013」の24日目の記事です。 Webアプリのパフォーマンス改善と言えば、JavaScriptやDOMアクセスなど、既存の技術ベースな改善手法を想像する方も多いでしょう。最近では、こうした改善のあり方を、別の視点からもう少し広げようというアイデアが存在感を持ち始めています。それは「Web標準」です。 そこで今回、Web標準側でできるWebアプリのパフォーマンス改善について、掻い摘んで紹介します。全てを説明となるとキリがないので、キーワードを中心とさせて頂きます。最近になって、結構実用化が進んできているので、悩んだ時には試してみる価値はあるでしょう。 1. リソースを先に読み込む linkタグにてURLなどを指定することで、これから先に読み込ませる可能性が高いWebページのリソースを予め読み込むWeb標準があります。ニュースサイトでは次のページ
続・レスポンシブWebデザインとかアダプティブWebデザインとか
2013年6月19日 著 渡辺さんが、レスポンシブ・デザインとアダプティブ・デザインの定義を整理してみたのなかで僕の記事に言及してくださったので、改めて自分の解釈を覚え書きしておきます。 身もふたもないことを先に言っておくと、どうもこの「レスポンシブ」やら「アダプティブ」という言葉が最近、好きではありません。意味的にも発音的にも紛らわしく、厄介なことこの上ない。これらをそのまま日本語圏で（カタカナ表記にしろ英語表記にしろ）使うことについては、どちらかというと反対の立場。渡辺さんの記事で説明されているように、「アダプティブ」と言ってもそれがコンテンツの適応性を指すのか、それとも表示上の適応性のみを指すのか、文脈次第で変わるのも好きになれない理由。 閑話休題。レスポンシブWebデザインにしろアダプティブWebデザインにしろ、Webコンテンツをマルチデバイスに対応させるうえでの考え方であることは
ニュースリリース｜統合マーケティングパートナー株式会社D2C
2024.01.31 「キョウソウAI」利用者の細かな要求に対応可能な「チャット機能」を追加 効率的に高精度なテキスト作成
会社を辞めずに夢を追う方法―Zaim 閑歳孝子“プライベート開発のすすめ”［1］ | CAREER HACK
公開後すぐiOS版が国内外のランキング上位となり、1年が経過したいま、ダウンロード数が30万を超えているオンライン家計簿サービス『Zaim』。企業に勤めながらも、完全なるプライベート開発によって大ヒットアプリを生み出した閑歳孝子さんに学ぶ、正しいプライベートプロジェクトの進め方。 プライベートプロジェクトで自分を変えよう。 プライベートで開発したアプリが多くのユーザーを集め、起業。その可能性に着目した企業から4000万円超の大規模な出資を受ける―― いささか“出来過ぎ“ともいえるストーリーを1年足らずで実現したのが、閑歳(かんさい)孝子さんだ。 そもそもインターネットは、大企業に依存せずともエンジニア個人が 自分の力でサービスを生み出し、社会に対して価値を提示していける世界。だがそうしたWEBならではのダイナミズムは、ともすれば日々の業務に追われる中で、忘れられがちでもある。 「起業するこ
Webの常識、業務システムの常識
「常識」の違い みなさんは、「業務システム」を開発する際にたくさんの会議を行い、資料を作成すると思います。プロのエンジニアとしては、「会議力」、「文章力」というのは重要なスキルの1つですが、「Webサイト構築」の開発の場合は、そのようなスキルが通じない（必要とされない）場合があります。 なぜかと言うと、「業務システム」と「Webサイト構築」では、開発の「スピード」、「システム運用期間」、「品質の意識」が大きく違うからです。 「業務システム」では、大規模になると設計のみで1年以上をかける場合もあります。一方、「Webサイト構築」では、プロジェクトの開始からリリース（本番稼働）まで3カ月というような短い期間の場合が多々あります。これは、「Webサイト構築」のターゲットが一般の人となるからです。 特にティーン・エイジャーなどの若者がターゲットのWebサイトの場合、流行の移り変わりが激しいため、リ
クリエイティブと開発のはざまで
Webサイト作りは、制作？開発？ 本記事を読まれる方の多くは、企業の業務システムを手掛けるエンジニアの方だと思いますが、みなさんの中で、仕事として、いわゆる「Webサイト構築」に携わったことがある方は、どのくらいいらっしゃるでしょうか。プロのエンジニアであればあるほど、「Webサイト構築」の仕事に、自分の仕事の流儀とかみ合わないものを感じることもあると思います。 その原因の1つに、Webサイト構築に関わる人の意識のズレが挙げられます。 「システム屋」の目線からすれば、Webサイトとは実際、ITシステムそのものです。ネットワークやデータセンターを土台にして、OSとミドルウエアの上に多くの画面を提供するアプリケーションを備え、バックエンドにはデータベースやCRMなどの基幹システムがつながっています。人気サイトであろうとすれば、大量のトランザクションを遅滞なく処理することが求められ、セキュリティ
URLを変えずにスマホもタブレットも最適な表示に――CEOに聞く「MOBIFY」の設計思想
PCサイトの資産を生かしてスマホやタブレットに最適化したサイトを構築でき、PCと同じURLのまま運用できる――。こんなサイト変換プラットフォームを提供するのが「MOBIFY」だ。同社CEOに、MOBIFYの特徴と設計思想について聞いた。 今やWebサイトのスマートデバイス対応は、待ったなしの状況だ。スマートフォンは一般層にも広く普及し始めており、この秋、相次いで発表された7インチタブレットがユーザーのすそ野を広げつつある。対応の遅れは顧客離れにつながりかねず、ECサイトは売上に影響する可能性もあるため、対応を急ぐ企業が増えている。 しかし、サイトのスマートデバイス対応には、さまざまな課題がある。対応させるための手法には、モバイル専用サイトの構築から自動変換ツールの活用、HTML5の採用、CMSの活用などさまざまなものがあるが、それぞれに一長一短があり選ぶのは難しい。また、厳しい経済環境が続
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
さいはてのどうくつ
JavaScript Promiseの本
UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめ
HTML5 BIZ -
デブサミ2013、講演関連資料まとめ
