デザイナーでも楽々フロントエンドの環境構築「PINGY CLI」 - よちよち開発の日々
最近、「環境構築とかしたくないー」などと嘆くデザイナーさんがいらっしゃったので、何か手軽にフロントエンドの環境を構築できる方法はないかなーと思っていました。そこで良いツールを見つけました！！ その名もPingyです。 gulpやGruntなどは学習コストが掛かります。 Pingyの場合は、複雑なビルドのフローなどには向きませんが、設定ファイルなどもシンプルで初心者に優しく簡単に環境構築ができます！ では、早速環境構築をしていきましょう！ nodeが入っていることは前提としていますのでまだNodeをインストールしていない方は下記の記事を参考にしてください。(尚nodeのバージョンは6以上をサポートしています) Macユーザーはこちら qiita.com Windowsユーザーはこちら qiita.com 1 インストール npm i -g @pingy/cli 作業ディレクトリを作成 mkd
「RxJS」初心者入門 - JavaScriptの非同期処理の常識を変えるライブラリ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。 みなさん、「RxJS」をご存知でしょうか？ すごく大雑把に言うと、RxJSとは非同期処理（マウスクリックなどのイベントベースの処理も含める）をするときに超絶便利なライブラリです！ イメージしやすいように「便利」とは言いましたが、決して「便利」という言葉ではおさまらないくらいのインパクトがあると思います。ちょっとした「イノベーション」に近い感覚です。 今回は、RxJSを全く知らない初心者でもとっつきやすいように説明してみたいと思います。少し記事が長くなりますが、最後までお読みいただければ幸いです！ 目次 ReactiveXについて 非同期処理の問題点 RXと「Observerパターン」 ウォーミングアップ イベントを配列のように操る？ Stream（ストリーム） ストリームを操作する「オペレーター」 オペレーションチェーン ObserverとObservable Col
[iOS] Javascript でクリップボードにアクセスすることは不可能… ではどうするか
2015-07-19 Tech Javascript Tech Web [iOS] Javascript でクリップボードにアクセスすることは不可能… ではどうするか はコメントを受け付けていません。 Web アプリを制作していて気づいた。Javascript で「クリップボードにコピーする」等の操作を簡単に書けると思ったら、全然そんなことなかった。 でもそういうサイトみたことあるよーって思うかもしれない。私もそう思ってたから簡単にできるものだと思ってた。しかしそれらは javascript ではなかった。 本記事では、Web ブラウザでどうすれば「クリップボードへコピー」を実現できるか考えようと思う。 javascript – クリップボードにコピーする方法 – スタック・オーバーフロー http://ja.stackoverflow.com/questions/2744/クリップボード
![[iOS] Javascript でクリップボードにアクセスすることは不可能… ではどうするか](https://cdn-ak-scissors.b.st-hatena.com/image/square/b12d6a824454bbbaf84fff9a22023769bfd77e94/height=288;version=1;width=512/https%3A%2F%2Fwww.terabo.net%2Fwordpress%2Fwp-content%2Fuploads%2Fclipboard-97590_1280-1009x1024.png)
初心者でもほぼ無料でJavaScriptを勉強できるコンテンツ16選 -
Photo by dotConferences こんにちは。谷口です。 プログラミングをこれから学ぼうとしている方で、「JavaScriptを使えるようになりたい！」という方は多いと思います。 JavaScriptは実行環境が主にWebブラウザに実装され、動的なウェブサイト構築や、リッチインターネットアプリケーションなど高度なユーザインタフェースの開発に用いられます。（JavaScript - Wikipedia） Webサービスの作成・運用をする機会がある方には必要不可欠なJavaScriptですが、これから勉強を始める方の中には「プログラミング経験ゼロなんだけど、一体どうやって勉強したらいいの……？」と思っている方も多くいらっしゃるのではないでしょうか。中には「エンジニアではないんだけど、仕事でJavaScriptを触る機会があるから覚えたい！」という方や、「初心者だけど、なるべくコス
Trianglify
About My name is Quinn Rohlf, and I'm a roaming engineer/designer based in the western United States. Trianglify is an open-source library I wrote to generate low-poly style patterns by combining a Delaunay triangulation with some nice colors. It was originally released in April of 2014. It has a sibling project, Trianglify.io, that provides a user-friendly GUI for the library and helps fund libra
はじめてのJavaScript / JS Girls Tokyo #1
JS Girls Tokyo #1で、JavaScript初心者向けの勉強方法について話しました。 私自身、HTML/CSSはできてもJavaScriptが大の苦手でしたが、@hokaccha 先生による修行によって、なんとか理解できるようになりました。 その修業の中で、何をどうやって勉…
「ノンプログラマのためのJavaScriptはじめの一歩」の1章が公開されました - Webtech Walker
11/7発売予定の書籍「ノンプログラマのためのJavaScriptはじめの一歩」のはじめにと1章が先行して技評のWebサイトで公開されました。 はじめに 1章 1章はイントロ的なところで、JavaScriptを学ぶ前にJavaScriptの動かし方やデバッグツールの使い方について解説しています。 また、本書籍の2章以降で解説するスライドショーのサンプルプログラムも1章で登場するため公開されています。次のようにボタンを押すと次の画像に行くというだけの、簡単なサンプルプログラムです。 {::nomarkdown} {:/nomarkdown} 技評のWebサイトからも実際に試すことができます。 JavaScriptのソースはこんなかんじです。全体で90行程度、コメントや空行を除くと40行程度です。 /** * 簡易スライドショー * * nextボタンを押したときに画像を切り替える簡単な *
javascript初心者によく教えること - Qiita
色々な人に同じことを教えている気がするのでまとめておく。 他の言語でもいいので、変数、分岐、繰り返し、関数くらいがわかってたら、下のことにとりかかっても早くない。 上の方が効果/学習コストが高い。 困ったらChromeデバッガ とにかく困ったらChromeデバッガを使う。jsもcssもhtmlもChromeデバッガを使って確認する。 使い方は一通り勉強した方がいい。 とりあえずjQueryとcoffeescriptを使う jsのmvcフレームワークとかに比べると学習コストが激安。 初心者であれば、とりあえず使っておいて間違いない。 検索は、「javascript+◯◯」ではなく、「jquery+◯◯」 生jsを排除してなるべくjQueryに寄せて書くことで、IE対応を減らせる。記述量も減る。 変数を一つのグローバルなオブジェクトにまとめて格納する 名前空間の汚染を小さくするために、状態保存
JavaScript Library Archive
JavaScript Library Archiveについて JavaScriptライブラリをまとめたサイトです。用途別に探すことができ、配布元、使用方法、ライセンスなどについて解説をしております。 新着JavaScriptライブラリ プログラムのコードに色を付ける「google-code-prettify」 角丸を表現する「jQuery Corners 0.3」 jQueryベースのカラーピッカー 「Farbtastic」 水平方向のアコーディオンメニュー「horizontal accordion」 セレクトボックスをカスタマイズする「Script.aculo.us Select Box」 IE6でhover,active,focus擬似要素を使う為の「csshover」 画像に光沢を与えるjsライブラリ『Glossy.js』 IE6以下をIE7と同じようにするライブラリ『IE7.js』
世界のJavaScriptを読もう @ 2012
調べる方法を知る JavaScriptは調べるとやり方が見つかることが多い 古いものと最近のものがまざってる ごく最近〜未来のものは見つけにくい 以下の総集編的な内容 海外のJavaScript情報を見つけよう 世界のJavaScript情報を読もう 今からRSS購読すべきタグと検索結果 ブラウザの最新情報を知るために、Web開発者が読んでおくべきブログ Webの動きはとても早いので、調べ方を知る
CSS Nite LP, Disk 13フォローアップ（8）比留間 和也さん｜CSS Nite公式サイト
CSS Nite LP, Disk 13フォローアップ（8）比留間 和也さん 記事公開日：2011年6月 3日（金） 2011年1月22日、ベルサール九段で開催したCSS Nite LP, Disk 13「スマートフォン特集（1）iPhone/iPad編」のフォローアップとして、比留間 和也さん（カヤック）の『教科書には出てこない!? iPhone のUIトリック表現』のスライドと音声をシェアします。 スライド 音声（MP3、43:40、21.0MB） 続編のLP16：Android編を6月18日に開催します。 メッセージ 参加されたみなさん、長い時間お疲れさまでした。アンケートを拝見させて頂きましたが、これから作るぞ！というような熱意にあふれた意見が見受けられてとてもうれしく思っています。 一点、OTONATIC中でスライド中でアプリケーションキャッシュを使ってオフライン機能を実装してい
jQueryのCSSセレクタAPIを高速に扱う方法 - KAYAC Engineers' Blog
最近Androidとの抗争が激化しているago（@kyo_ago）です。 jQueryはCSSセレクタを多用する特徴がありますが、jQuery内では実行ブラウザやCSSセレクタの記述によって呼び出されるブラウザAPIが変わり、それによって実行速度にも影響が出ます。 この記事では「セレクタAPIとはなにか」、「CSSセレクタの記述によって呼び出されるセレクタAPIの種類」、「高速なセレクタAPIを使用するための方法」、「高速なセレクタAPIが使われるかどうか確認する方法」などを紹介したいと思います。 （※この記事はJavaScript Advent Calendar 2011 (フレームワークコース) : ATNDの1日目の記事です） セレクタAPIとはなにか セレクタAPIとは「#hoge .huga」のようなCSSセレクタから、DOM上に存在する要素を取得するためのAPIです。 jQue
画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。
jQuery Mobileを触りながら覚えよう！ [Japanese Version Only] - jsdo.it - Share JavaScript, HTML5 and CSS
サンプルを用意しました！フォークしてjQuery Mobileを体験してみよう！ スマートフォンサイトをプレビューするには、エディタ画面の「Smart Phone Preview」ボタンをクリックしてください。 こんなことを試してみるとオススメ！ aタグに data-transition 属性を付加するとトランジションのエフェクトを選ぶことができます。 Footer要素を画面下に固定することができます。data-position="fixed" フォーム周りの要素もjQuery Mobileで表示できます！ そもそもjQuery Mobileってなんだっけ？ jQuery Mobileはモバイルサイト構築のためのフレームワークです。 スマートフォンサイトやWebアプリを作成する際に利用します。 非常に手軽に利用でき、少し勉強するだけでそれなりのものが作れてしまうんですよ！ ということで、j
[JS]設置も簡単、シンプルで軽量なフラッシュのMP3プレイヤー
NiftyPlayerは、MP3ファイルの再生やロードをスクリプトでコントロールできる、シンプルで軽量(4KB)なフラッシュのMP3プレイヤーです。 NiftyPlayer フラッシュのMP3プレイヤーのインターフェイスはシンプルで、再生（プレイとポーズ）と停止ボタンでMP3ファイルをコントロールします。 パネルには再生状況が分かるシークバーとボリュームコントローラーがあり、クリックやドラッグで操作できます。 インフォメーションには、時間とステータスが表示されます。 また、プレイヤーのコントロールはスクリプトでも制御が可能で、再生（プレイとポーズ）、停止、別ファイルの読み込み、読み込みと同時に再生、ステータスの取得などが行えます。
HTMLで文字詰めするタイポグラフィー用JS | fladdict
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
JavaScript初心者入門講座
JavaScriptのサンプルを使って簡単な基礎から、データベースの操作まで学べる初心者向けの入門講座です。関数の作り方やJavaScriptを外部ファイルとして読み込む方法、フォームのデータを正規表現でチェックする方法、イベントの設定方法、配列の使い方などが学べます。 ・より本格的なプログラミングを学びたい場合は Java初心者入門講座 を次のステップとしてご活用ください。 ・Web系のプログラミングを学びたい場合は PHP初心者入門講座 をおすすめします。 ・PHPやJAVAではデータベースにMySQLを使用しているため、 MySQL初心者入門講座 を先に学ぶと習得が楽になります。もちろん必要になった段階でMySQLを学んでもOKです。 JavaScriptで本格的なゲームを作ることができます。 しかも使い慣れたプログラミング言語のJavaScriptで、いろんなプラットフォームに対応
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DevDocs
syboos.jp