HTMLやCSSやJavaScriptの軽量化・整形、FlexboxやGridやbox-shadowのジェネレーター、各種エンコード・デコード、データの暗号化、ダミーテキスト・ダミーデータ・ファビコン生成、テキスト比較（Diff）など、Web制作に役立つさまざまなツールがまとめて利用できる『He3』を紹介します。 Windows, macOS, Linux対応の無料アプリで、今までオンラインであちこちの各ツールを利用していた人とかにかなり便利なツールだと思います。 He3: Modern Developer Toolbox He3の特徴 He3のダウンロードとインストール He3の使い方 He3の特徴 He3は、200種類以上のWeb制作に役立つ便利ツールが詰め込まれたデベロッパー向けのツールボックスです。 200種類以上あるツールは、カテゴリ別にまとめられており、スマート検索機能ですぐに
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った URLを文字列結合で組み立てると色々問題が起きやすいので、それを避けるためにURL APIやURLSearchParams APIでURLを組み立てるパターンをまとめたチートシートを作りました。 azu/url-cheatsheet: URL manipulation cheatsheet for JavaScript URLにユーザーが入力した文字列を含めるときはencodeURIComponentでエスケープする URLはプレーンな文字列ではなく構造化された文字列(文字の並びに意味がある文字列)として扱わないと、さまざまな問題を抱えやすいです。 たとえば、次のように文字列結合でURLを組み立てるとパストラバーサルの問題があります。 name に ../../adminのような文字列が
![[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った](https://cdn-ak-scissors.b.st-hatena.com/image/square/8e5439b69c83b50834bd0c07600f1b23fd865e34/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fefcl.info%2Fpublic%2Ffavicon.png)
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 本記事は、Anurag Kanoria氏による「7 Repos I Didn't Know I Needed For Front-End」（2021年3月8日公開）の和訳を、著者の許可を得て掲載しているものです。 必要だと気付いてもいなかったフロントエンド用リポジトリ7選 より良いものをより早く作るのに役立つ、あまり知られていないリポジトリ。 Photo by Juan Rumimpunu on Unsplash はじめに 私たちは、汎用ツールやリソースが数回タップするだけで手に入る時代に生きています。しかも幸いなことに、そのほとんどが
アニメーションを作る時に、「思いついた演出をすぐに実装したい」「頭の中ではできているのに、コーディングするのが面倒」と思ったことはありませんか？アニメーション作成にはライブラリを使用することが多いと思いますが、使い方を調べて覚えて、ドキュメントからコピペしたり、ひたすらタイピングをして… 私はこれらの問題を解決するために、「Tween24」というライブラリを作りました。Tween24はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装できます。依存ライブラリもなく、単体で動作します。アニメーションライブラリの多くはオブジェクト型でプロパティを指定するためタイピングが多くなりがちですが、メソッドチェーンであればエディターのコード補完機能でスラスラと記述できます。 その他にも、メソッドチェーンには以下のようなメリットがあります。 コード補完によりプロパティ名などを覚える必要
Discover the resources for adding interactive charts for browsers and mobile devices.
その名もズバリ「OS.js」というJavaScriptライブラリです。 誰かのイタズラかと思いきや、使ってみるとブラウザの中にもう1つ別のパソコンが起動しているような感覚になり、その完成度の高さに驚かされます。 APIも提供されており、「OS.js」で起動したデスクトップ環境用のアプリケーションを自分で開発することも可能になっているのは面白い点でしょう。
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/0af55bc16bf3c0a6a24924c1dcaf778ffd1396ed/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
サンプルデモ真ん中寄せをして、ウィンドウの横幅が480px以上の場合は、5つのシェアボタンを横並びで表示し、スマホなど、ウィンドウの幅が狭いブラウザでは、LINEを含めた6つのボタンを1行に3つずつ表示するレスポンシブ仕様になっています。ここで表示している個々のボタンは画像を使用していますが、実際と同じように動作するので、ウィンドウの幅を広げたり縮めたりしてみて下さい。実際のシェアボタンでのデモを見たい人は、「サンプルデモを見る」のボタンから別ページにアクセスして下さい。 HTML <h2>シェアボタンの表示</h2> <p>横幅を狭めると、2行になり、LINEボタンが出現します。LINEボタンの画像は、<a href="https://media.line.me/howto/ja/" target="_blank">公式ウェブサイト</a>よりダウンロードする必要があります。</p> <
Unity C#とJavascriptの主な違い
Unity WikiにてUnity C#とJavascriptの違いを整理しているので紹介したい。 なおリンク先では各々の違いの詳細説明もついているため興味ある方は併せて確認いただくと、さらに勉強になるとおもう。 http://wiki.unity3d.com/index.php/Csharp_Differences_from_JS 17 August 2012, at 11:59 Unity C#とJavascriptの主な違い 関数定義 function Start () { /* stuff. */ } // JS void Start() { /* stuff. */ } // C# string MyFunc() { return "hello, world"; } // C# C#ジェネリック //JS function Start(){ var someScript : E
Write your document with HTML and CSS, as you normally would. Use special HTML attributes to indicate variables. Write a little JavaScript to specify how your variables are calculated. Tangle ties it all together. * * * Try out some examples. Proposition 21: Vehicle License Fee for State Parks The way it is now: California has state parks, including state beaches and historic parks. The curren
セレクトボックスの検索もタグの補完入力もこれ一つでできる！ BootstrapベースのjQueryプラグインSelect2 「Select2」はセレクトボックスに検索機能を付けたり、タグの補完（サジェスト）入力ができるBootstrapベースのjQueryプラグインです。 投稿日2013年05月14日 更新日2013年05月14日 準備 最初に「bootstrap」と「select2」のcss&jsと「jQuery」を読み込みます。 （bootstrapのcssは必須ではないです。） html <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/select2.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。 １．はじめに TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!（エクスクラメーション）」がついています。 Twitterの場合 <a href="https://twitter.com/share" class="twitter-share-button" data-via="yujiro" data-lang="ja" data-size="large">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getE
スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示してみます。 デモページ：幅480pxで表示 skel.jsの使い方 jQueryや他のスタイルシートなどを用意せずに、すぐに利用できます。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="skel.js"></script> jQueryもスタイルシートも他のファイルは必要ありません。 Step 2: スクリプトのセットアップ スクリプトのセ
イベントを作成/編集する イベント編集は基本的にシーンの作成⇒イベントの作成/追加という手順で進めます。個々のシーン/イベントの編集が終了したら「OK」ボタンを押して確定します。 作成手順： 「シーンを追加」をクリック ⇒ シーン名を入力。ダンジョンイベントなら初期配置、フラグ設定、ストーリー設置を行う。 決まったら「OK」をクリック ⇒ シーン/イベント リストにシーン名が追加されるので、イベントを編集する。「イベントを追加」をクリックすると、 イベント名のリストが出るので好きなイベントを選択する ⇒ 各種パラメータにデータを入力して「OK」をクリック。シーンとイベントはいくらでも追加できる。それらを再編集したいときは下のシーン/イベント リストをクリックする。 プレイ方法： イベントデータを作成後、「フォームを表示」をクリック。次に「書き出す」をクリックしてフォーム上にデータを表示させ
はせがわようすけ氏のブログエントリ「機密情報を含むJSONには X-Content-Type-Options: nosniff をつけるべき」にて、巧妙な罠を仕掛けることにより、別ドメインのJSONデータをvbscriptとして読み込み、エラーハンドラ経由で機密情報を盗み出すという手法が紹介されました。これは、IEの脆弱性CVE-2013-1297を悪用したもので、MS13-037にて解消されていますが、MS13-037はIE6～IE8が対象であり、IE9以降では解消されていません。 また、MS13-037を適用いていないIE6～IE8の利用者もしばらく残ると考えられることから、この問題を詳しく説明致します。サイト側の対策の参考にして下さい。 問題の概要 JSON形式のデータは、通常はXMLHttpRequestオブジェクトにより読み出しますが、攻撃者が罠サイトを作成して、vbscript
Markup example This example uses all default settings. <a href="#myToggle" class="panel"> <img src="http://placehold.it/470x300/f1f1f1/aaa&text=Example" /> </a> <div id="myToggle" class="cap-overlay hide"> <h5>Cupcakes</h5> <div class="content"> Name: cupcakes.png<br /> Photography: Ryun Shofner<br /> <a href="javascript:void(0)" class="button small"><i class="icon-edit"></i> Edit</a> <a href="jav
運営元のロゴ Copyright © 2007-2026 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
