短期間である程度までjQueryができるようになる独学Webデザイン勉強法を書いてみる - Yukihy Life
HTML、CSSの勉強法を以前書きました。 www.yukihy.com この記事を書いたあと、jQueryに挑戦をして、まだまだ完璧ではないものの実際にこのはてなブログを通して、いろんなブログパーツのようなものを作ることができました。 そこで、jQueryを勉強するとき、効率良く身につけられる方法を書いていきたいと思います。 僕自身いろんな本やツールに手を出しながら進めてきたので、実際に下の通りに行ったわけではありませんが、もう一度勉強しなおすとしたらこういったようにやるなといった感じです。 それではレッツゴー！ jQueryを身につけるための最短ステップ ステップ１ Progateで手を動かしながら学ぶ ステップ２ 平行してWebデザインレシピの記事を読む ステップ３ ドットインストールで総復習&補完 ステップ４ 書籍を参考に実際に作ってみる 作りながら学ぶjQueryデザインの教科書
Canvasで漫画にあるような吹き出しを書いてみた - Qiita
はじめに Canvasを使用して、漫画で使われるような 吹き出し表現を再現してみました。形自体にも汎用性があると思うので、吹き出し以外にも使えそうです。これで漫画表現シリーズは三作目となりました。（今までに書いたものは最下部を参照ください）今回書いた吹き出しは以下の3種類になります。 吹き出しのシッポ（何ていうのか分からない。。発言者を示す細い三角のやつです）は想定していません。 [動作イメージ] パーッとした吹き出し パンクな吹き出し モコモコな吹き出し なお実際の動作は以下で確認できます http://nekoneko-wanwan.github.io/demo/canvas/effect/fukidashi/light/ http://nekoneko-wanwan.github.io/demo/canvas/effect/fukidashi/punk/ http://nekonek
Chrome Devtools for beginners (v1.1)
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
Chrome DevToolsを使ってJavaScriptのメモリリークを検出し、解消する - 人生dat落ち
JavaScriptを書いていたらブラウザがくっそ重くなる症状に出くわした。あぁ、噂のメモリリークですわ。 先人の知恵に頼るマン。それっぽい記事が見つかる。 javascriptのメモリリーク対策(随時更新) - Qiita Shibu’s Diary: JavaScriptのメモリリークを10倍速で発見する Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools Writing Fast, Memory-Efficient JavaScript - Smashing Magazine angularjs - How to catch memory leaks in an Angular application? - Stack Overflow 上の記事はProfiles + Take Heap
Electronでデスクトップアプリを簡単構築
全国5000人のエンジニアをやめて寿司職人になろうと思っているみなさんこんばんは。 前回までスライド共有用のアプリケーションを趣味(リハビリ)で作っていたのですが、折角なのでデスクトップクライアントも作ってみました。構築にはElectronを使ったのですが、結構簡単にできたので記録としてまとめておきます。 Electronって何？GitHubが開発するクロスプラットフォームで動作するアプリケーションを開発するためのフレームワーク。コードの記述はHTML5とNode.js。その範囲であれば既存のWeb開発技術が使いまわせる。例えばjQueryとかAngularなんかを使うのも可能Chromeブラウザのオープンソース版のChroniumのエンジンを内蔵例えばAtom・Visual Studio Code・Slackクライアントや、日本だとKobitoあたりがメジャー作り方あちこちに記事があがっ
Monacaで作るHTML5/JavaScriptでのハイブリットモバイルアプリ（その1）
本連載では、業務アプリケーション開発を行う熱血若手エンジニアのために、面倒な作業が楽になる便利なツールをご紹介します。「定時になったらスマートに帰社してアフター5を存分に楽しみたい！」や「設計書やレビューの準備に煩わされるのは嫌だ、コーディングに集中したい！」などを実現してくれる便利なツールやソフトウエアを、サンプルコードを交えて説明します。 はじめに 普段、設計書をもとに業務アプリケーションを開発したり、単体テストや連結テストに追われて忙しい日々を過ごしたりしていると、たまには気分転換で、なにかおもしろいモバイルアプリを手軽に作りたいなということはありませんか？ しかし、いざ時間の取れる週末にアプリを作ろうと思ってみたものの、自宅のパソコンに開発環境を用意したり、開発に必要なライブラリなどをダウンロードしたり設定したりしていると、それだけであっという間に時間が過ぎてしまいます。また、An
【入門向け】Node.js + Express4 + MongoDB + Vagrant + foreverでChatWorkと連動するCRUDアプリを開発する。(１)（導入編） - Qiita
この記事について Node.js + Express4 + MongoDB + Vagrant(開発環境) + foreverを利用して簡単なCRUD(Create, Read, Update, Delete)アプリを開発しました。開発にあたりPHP歴３年の著者が得られた知見をまとめます。 導入編、環境編、開発編の全３回を予定しています。皆様のこれからの開発の一助になれば幸いです。 対象読者 ある程度の開発経験があり、Node.jsを使ったアプリケーション開発に興味がある/これから実装する人。 ノンブロッキングI/Oを知りたい人。 node.js + express4 + MongoDB による開発環境構築に不安がある人。 少しプログミングが書けてIT業界に興味があり、これからもっと学んでいきたいという意欲的な人。 注意書き Node.js, MongoDB, Vagrantなどのインスト
優秀なJavaScriptの開発者になるための5か条 | POSTD
(注記：7/15、いただいた翻訳フィードバックを元に記事を修正いたしました。) 子供の頃、私の興味は互いに関係性のない様々な分野に及んでいました。数学も歴史も大好きでした。 ルネッサンスマン 、つまり 博学者 と言う、複数の分野に秀でた人になりたいと思っていました。これはとても難しい課題で、私は突如として、器用貧乏な人になってしまう危機に直面したのです。 私は特定の分野に特化しなくては、と考え始めました。そうすればたとえルネッサンスマンにはなれなくても、少なくとも、器用貧乏にならなくても済むと思ったのです。どうしたらソフトウェア開発をするのに必要な広い知識を保ちながら、1つの分野で専門性を高めることができるのでしょうか。 この記事では、過去5年間、私が良いJavaScript開発者になるために使ったテクニックとリソースの概要をお伝えしようと思います。 最近の多くのWeb開発者は、ある共通の
無料麻雀ツール＆アプリ 点数計算＆牌効率ラボ
JavaScriptでプログラミングした麻雀の小粒プログラム集を公開しています。稚拙なものばかりですが、プログラムのヒントや参考になれば幸いです。
canvasでクロマキー合成っぽいことしてみる - Qiita
CMや映画でよく使われるクロマキー合成をcanvasで再現してみようと思った。 特殊な設備がなくてもいいように消す色を指定できるといいかもね。 やること 映像を取り込む canvasに描画する 描画されたcontextの指定された色の部分を透過にする 背景に画像を入れる ざっくりこんな感じ。 ファイルが別れると載せにくいのでstyleの設定はjsでやる。 とりあえずhtmlファイルに要素を置いておく 必要なのはvideoとcanvas。 あとはどの色を透過にするか指定できるようにinputも置いた。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Language" content="ja"> <meta name="viewport" content="wid
JavaScriptでSNSのカウンターを取得する | バシャログ。
どうもfujiharaです。 連日の雨・雨・雨。人生で今年が一番梅雨を感じれる年かなと。 本日は先日弊社 Latin から紹介がありましたバシャログリニューアルのポイント3 めっちゃ重かったソーシャル周りのスクリプトを非同期かつ、 カウント数のみをJSONで取得する仕様に変更 についての実装方法を説明します。 流れ たいした流れではないのですが、各SNSのAPI用URLに取得したい記事のパラメータを付随し、問い合わせをするとjson形式で値が取得できます。 はてブ数の取得 はてブ数の取得方法です。 // 問い合わせURL は "http://api.b.st-hatena.com/entry.count" // クエリーは url となります。 <script> $.ajax({ url:'http://api.b.st-hatena.com/entry.count' + '?url='
ぼくのフロントエンドの情報収集ソース
最近の情報収集の仕方も昔とはめっきり変わった感がある。 そもそも情報が多すぎるのが困りモノだ。 フロントエンドの技術サイクルも目まぐるしく早い。 多すぎる情報を効率良くフィルタリング出来る仕組みを確立すればいいと個人的には思っている。 それには自分に合った質の高い発信元を把握しておくことだ。 今日は自分の日頃使ってるものを紹介する。 国内 はてブ(テクノロジー – Webデザイン) 技術系の鉄板。毎日眺めるだけでホットな話題がある程度わかる。 Gunosy 言わずと知れたキュレーションサイト。意外とコアな情報も入ってくる。 dotHTML5 初めはHTML5関連だったけど、最近は多岐にわたってる印象。 HTML5 Experts.jp JSer.info azuさん運営のJSer御用達しサイト。 ここ 見ておくと参考になる。 そういえば最近JSerという言葉聞かなくなった。 海外 Smas
イマドキのJSテスト - テスト環境をモダンフロントエンドツール群で整備する編 〜 JSおくのほそ道 #032 - Qiita
こんにちは、ほそ道です。 今回はビルドツール・モジュールローダ・altJS(JSコンパイラ)を組み合わせてさらにテストコードのおくのほそ道に入り込んでいきます。 今回Gulp + Webpack + Karma + Jasmine + ES6を使用しますが、 GruntだったりBrowserifyだったりMochaだったりCoffeescriptだったりに置き換えても基本的な考え方は近しい感じになるかと思います。 あとはここにSPAフレームワークとかを組み合わせればいよいよモダンなテストコードになっていきますね。 目次はこちら 今回解決すること・設計方針 Webpackとテストコードを組み合わせる。なんかバンドルしたりごにょごにょやってるどこにテストを挟むのか？を解決する。 ソースコードもテストコードもES6で書く。babelないしはaltJSのコンパイルごにょごにょやってるどこにテストを
jQuery+非同期通信でスマフォライクなチャットを作る その２ - 北海道苫小牧市のホームページ制作 STUDIO KEY
jQuery+非同期通信でスマフォライクなチャットを作る その２ 2014年08月17日 2015年7月9日追記 : jQueryチャットの高機能版の記事を書いていますので合わせてどうぞ Sqlite版 https://studio-key.com/646.html お絵かき版 https://studio-key.com/1018.html 以前、jQueryでチャットを作る記事を書いたのですが、jQueryチャットというキーワードで来られる方が割と多くびっくりしています。LINEなどがある現代ではブラウザチャットなんて過去の遺物だと思ってましたので。 いつかもうちょとマシなものをと思っていたのですが、このお盆中の深夜、ふいに書きたくなり、朝まで掛かって新しいものを作りました。 2014-08-18追記 ちょっとスタンプ機能を付けてみました。素材はhttp://iconhoihoi.oo
隠れていたNode.jsの4バイトメモリリーク、Walmart問題の解決 - ぼちぼち日記
この記事は、 Node.js Advent Calendar 2013 - Adventar の12日目です。 1. ありがとう Ben Nodeの情報に普段アンテナを張っている人は既にご存じでしょうが、Nodeコア開発の中心的エンジニア Ben Noordhuis がNodeのコアチームから離れました。Node.jsの公式ブログに「Ben Noordhuis's Departure」としてアナウンスされています。 なぜ彼がNodeの開発を止めなければならなかったのかその経緯をここで述べることは控えますが、彼のこれまでの貢献なしでは今のNodeは存在し得なかった、と言えるほど彼は重要な存在でした。Benは、Nodeやlibuvのコードの開発だけでなく、github の issue の回答やPRのレビュー、 MLの質問の返答などNodeコミュニティにも精力的に対応し、去年来日した isaac
jQueryのメモリーリークの傾向と対策 — KaoriYa
Web開発にとても便利なjQueryですが、 実はメモリーリークを誘発しやすい構造であることは あまり知られていないようです。 本記事ではメモリーリークが発生する傾向と対策を紹介します。 皆さんjQueryは使ったことありますよね。Webでの開発ではとても便利で、ほぼ必須と言っても過言ではありません。しかしながらこのjQueryはメモリーリークを誘発しやすい構造であることはあまり知られていません。 GCのあるJavaScriptでメモリーリークが発生するとは何を言っとるんだ、と思われる向きもあるやもしれません。しかしGCがあっても、もう使わなくなったオブジェクトを配列やテーブル(Object)にしまいこんでいて、それを回収するタイミングが存在しなければ積もり積もってメモリを圧迫する、メモリーリークとなりうるというのは想像に難くないでしょう。jQueryで起こりうるメモリーリークはそのような
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome Developer Toolsを使いこなそう！
apple-touch-iconはbase64で指定できてJSで後書きできるって知ってた？ - Qiita
30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで - Qiita
appgiga.jp
