別ソースをインポートするには？［JavaScript／jQuery］
JavaScriptファイルに別ファイルの内容を取り込むには、jQueryのajaxメソッドを利用できる。ECMAScript 2015のmoduleを使った例も紹介する。 連載目次 JavaScriptのソースコードに別のソースコードを取り込みたいと思ったことはないだろうか？ 例えば、JavaScriptのソースコードを複数のファイルに分けたいのだが、HTMLの<script>タグで指定するJavaScriptのファイルは1つだけにしておきたいといった場合だ。jQueryを使えば、それが簡単にできる。 本稿では、jQueryを使ってソースコードを取り込む方法を解説するとともに、JavaScriptの新しい機能による方法も紹介する。 jQueryを使って別ソースをインポートするには？ jQueryのajaxメソッドを使えばよい。 同期的に取り込むには、次のコードのようにajaxメソッドを使
ライブラリ整理をもっと快適に！依存モジュールとそのファイルサイズを可視化する「source-map-explorer」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ライブラリ整理をもっと快適に！依存モジュールとそのファイルサイズを可視化する「source-map-explorer」 こんにちは、フロントエンドエンジニアのいなばです。 最近、React を案件に採用して、React 漬けの生活を送っています。久々に新規の開発案件に携わっていることもあり、なかなか楽しいです。 さて、今回は、アプリケーション依存しているライブラリと そのファイルサイズを可視化するのに便利なツール「source-map-explorer」をご紹介します。 アプリケーションの開発・運用は、長期に渡るうえ、規模感も大きいのでソースコードのサイズが大きくなりがちです。また、運用や改修をしていくうちに、「昔は使ってたけどいつの間にか使わなくなってしまったライブラリ」などが出てくることもしばしば。 それらのファイルサイズを、数値だけではなくビジュアルで確認できると、定期的なチェックが
JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
公式のはてなブックマークの数値表示がカッチョわるいので、テキスト表示させるJavaScriptを書いてみた。 – 和洋風KAI
嗚呼・・・。公式のはてなブックマークの件数表示。 これ非常に便利なのですがMSゴシック体で表示されるため、Mac環境だとフォントが上の画像のように合わずしっくりこないのが玉にキズ・・・。アンダーラインもあわねぇ。サイズもあわねぇ。車もそんなに走ってねェ・・・。 というわけで、見た目をしっくりさせるためにテキストではてブ数を表示させるJavaScriptを@akio0911さんにアドバイスをもらいつつ書いてみました。 追記：書きなおしてみました! 「先日書いた"はてブ数"をテキスト表示するJavaScriptがカッチョ悪かったのでシンプルに書きなおしてみた。 | 和洋風◎」 参考にしたのは @amachang さんの記事。 HTML だけで、件数を埋め込む例を書いてみたよ！やり方は簡単callback パラメータに document.write を指定するだけ！ 引用元：新はてなブックマーク
ドラゴンボールで学ぶオブジェクト指向
オブジェクト指向の基本亀仙流やつ鶴仙流など、世の中にはいくつかの流派（＝クラス）があり、それぞれの流派にかめはめ波やどどん波、舞空術などの技（メソッド）がいくつかあります。 実際に流派にある技を使う場合、技を覚えているZ戦士（インスタンス）が必要になります。 例）亀仙流を覚えた孫悟空を使ってかめはめ波を放って敵を倒す goku = new KamesenRyu("goku"); goku.shootKamehameha(teki); Z戦士によっては複数の流派の技が使えたり、自分の技を人に教えることが出来ます（継承）。 また悟空とクリリンのように同じ流派でも同じ技で違う性能を持っていたり、オリジナルの技を持っているなどの違いがあります。 クラスはセルを作るためのZ戦士達の遺伝子情報と言っても良いかもしれません。 例）セルを作りましょう。 class Cell extends Goku,Ve
JavaScript入門講座
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳
もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 １）3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
開発者/デザイナ向けのチートシート集 | TRIVIAL TECHNOLOGIES on CLOUD
みんなのIoT/みんなのPythonの著者。二子玉近く160平米の庭付き一戸建てに嫁/息子/娘/わんこと暮らしてます。月間1000万PV/150万UUのWebサービス運営中。 免責事項 プライバシーポリシー 仕様やルール，使い方などのHow Toを手短にまとめたチートシートを探していたらこういうページを 見つけました。プログラミング言語だけでなく，HTMLやSQL，jQuery，Django，Railsなどもあって，かなり充実していてビックリかつ 関心したのでご紹介。チートシート配布サイトとして有名なAdded Bytesからのものが多いですね。どのチートシートも印刷しやすくなっているので，紙に印刷して手元に置いておきたくなります:-D。 元のページには，PhotoshopやIlustratorなどAdobe製品のチートシートなどもあるのですが，このブログの読者向けに再編してみました。また
yuga.js :: Kyosuke.jp
yuga.jsって？ ウェブサイトを作る上で面倒な部分を自動で実装したり、ちょっとした機能を簡単に追加したりするJavaScriptです。jQueryを使って作られています。Web制作を優雅にするために作られました。 設置方法 まず、ファイル一式をダウンロードし、読み込みたいサイトの任意のフォルダに配置します。 yuga.jsを使いたいHTMLファイルのhead要素でjavascriptを読み込みます。 <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></s
webデザイナーのためのjQueryベストプラグイン＆チュートリアル10個
かなり人気のあるjQueryですが、そんなjQueryの私個人が選ぶ素敵なプラグインとチュートリアル10選。 とりあえず定番的なものをどうぞ。 ちなみにjQueryを自作できるレベルまで手軽になりたい人は以下記事参照。 web制作の現場で使うjQueryデザイン入門が激しくお勧めな件 タグクラウドの細分化 jquery Hover Sub Tag Cloud - Noupe サンプルデモ これかなり好き。 タグクラウドをさらに細分化させて表示させてます。 こういう発想は今までなかったので最初見たときちょっと感動しましたね。 ローディングページ How to Load In and Animate Content with jQuery | Nettuts+ サンプルデモのメニュー部分をクリックしてみてください。 右上にローディングのマークが若干出て、さらにアコーディオン風に内容が変わります
JavaScript基礎文法最速マスター - gifnksmの雑多なメモ
続々と増え続ける基礎文法最速マスターシリーズ(あまりにも増えてきたので他の言語記事へのリンクは別の記事に移しました)。 JavaScript 版は誰も書いていなかったようなので書いてみます。こういう解説記事的なものを書くのは初めてなので変なところがあったら指摘して頂けるとありがたいです。 JavaScriptの基礎概念についての解説はこちら：JavaScript基本概念最速マスター - TechTalkManiacs 1/31 23:58追記 コメント欄のos0xさんのご指摘を基に一部追記・修正を行いました。 2/2 2:52追記 switch文・正規表現・例外処理について追加しました。 2/2 6:44追記 コメントでfavrilさんにご指摘頂いた点(typo & コメント・サンプル追加)を修正・加筆しました。 2/2 7:15追記 トラックバックでLiosKさんにご指摘頂いた点(cal
JavaScriptで画像を使った時計を表示するサンプルソースを探す。
JavaScriptで時計を表示するプログラムを応用して、美人時計のような時計サイトは作れないものかと思い、参考になるサイトを探してみました。画像を使った時計のJavaScriptサンプルソースがあるサイトをご紹介します。 当サイト関連記事： ・お父さん向けブックマーク。「美人時計」のご紹介です。 ・ブログに無料JavaScriptの「オセロゲーム」を貼り付けよう ■GRN WEB SITE - Java Script 画像 時計 (1) http://guron.net/document/content/javascript/tokei2.php ■GRN WEB SITE - Java Script 画像 時計 (2) http://guron.net/document/content/javascript/tokei3.php JavaScriptソースと、数字画像のサンプルがありま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
