10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
500 Error » SkelJSについて雑記
SkelJSの簡単なまとめとその使い方を以下のようにまとめてみる SkelJSとは インストール方法 使い方 1.SkelJSとは SkelJSとはWebページを横に12個のunitを敷き詰めたものとし、そのunitを横幅に応じて入れ替えることでレスポンシブデザインを作るものです 2.インストール方法 jQueryと同様公式サイトよりskel.min.jsをダウンロードし、ページで読み込めばOK 3.使い方 意外とめんどうなのかもしれないですがそれもレスポンシブデザインを一個のhtmlから生成するんだし仕方ないのかもしれないです(テキトー ①css切り替えの設定 横幅に応じて配置を変えているということは、当然どれほどの横幅のときどの配置を採用するか、そのcssの名前はどのようにするかなどの設定が必要です htmlの中に書き込む場合は <script src=”skel.min.js”>
「HTML5 UP」配布のテンプレートを使おうとしたらグリッドシステムにつまづいた | RCBlog
サイト制作時に、「HTML5 UP」というサイトで配布されているテンプレートを使う機会がありました。 テンプレートにそってパーツをはめこんでいけば簡単に出来るかと思ったのですが、何かよくわからないCSSの書き方があって作業につまづきました。調べていると、テンプレートにはレスポンシブwebデザイン対応のグリッドシステムが使われていることがわかったので、その時の覚え書きをメモに残そうと思います。 .4uとか.8uとか何なの…！！（作業当時の叫び） HTML5 UPについて HTML5 UP! Responsive HTML5 and CSS3 Site Templates HTML5/CSS3で作られたテンプレート（H26.5月現在21種類）を無料で配布しているサイトです。だいたいのテンプレートが、縦長1ページで完結したデザインになっています。レスポンシブwebデザインに対応しているので、
Illustratorで連番印刷
母親が今度コンサートを開くことになり、そのチケット作成を頼まれた。B5サイズの紙を5等分にして、それが1枚のチケットのサイズになるようにする。IllustratorでB5サイズの紙に5枚分のチケットを印刷するようにして、後でカッターで切る。 問 題は各チケットにナンバーを振る作業。通し番号を振らなくてはいけない。Illustratorそのものに連番印刷の機能は、ない。検索するとナンバリン グ用のプラグインがいくつか売られてた。でもたったこれだけのことに2,3万するプラグインなんて買う気にならないし・・・。 というわけ でいろいろ調べていたら、IllustratorやPhotoshopはJavaScriptでいろいろ操作できることがわかった。 Document Object Modelを操作することでいろいろ自動的にできる。面白そうだしやってみようと思って書いてみた。 チケットがすでに描かれ
Web画面でよく用いるJavaScriptの入力チェック色々 - ミッションたぶんPossible
バリデーション系の処理って、JavaScriptで案件変わる度に一から書かにゃならんのですよねぇ。資産取っとけや、と言いたいんですが、なぜかどこの会社もやらない。まぁ実装が簡単だとか色々あるんでしょうな。ただオレ自身が一から書くのはもう正直面倒なので、備忘録的にここに書いておきます。 /** * 値が入力されているかチェック(必須入力チェック) * @param obj 入力された値 */ function requireCheck(obj) { // 値のtrim obj.value = obj.value.trim(); // 書式チェック if(obj.value == "" || obj.value.length == 0) { obj.focus(); return false; } return true; } /** * 入力された値のバイト数最大値チェック * @param
いい加減、<script src="http://.. と書くのはやめましょう - DQNEO起業日記
外部サイトのJSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由 あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。 ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読み込んでくれないのです。 上の例ではjQueryの読み込みに失敗していますが、エラーメッセージ「Uncaught ReferenceError: jQuery is not defined 」を見てもHTTPS/HTTPのプロトコルが原因だとはすぐ気づかないので、わかりにくいバグになってしまいます。 結論 JSファイル(とかCSSとか画像とか)を読み込むときは、"http:"の部分を省
CSS3を使わずjQueryで、テキストボックスの初期値の文字をフォーカスした時に消えるようにするやり方（IEもいけるよ！）
jQuery 完成サンプルです 試しにクリックしたり、文字を入れてみてください。入力しようとすると、ちゃんと文字が消えて空っぽになります。 また、元々の文字は薄いグレーなのに、入力するときには濃い色の文字になってます。 何をどうしているのか まずはテキストボックスの初期値です。初めからテキストボックスに文字を入れておくには value を使います。 [html] <ul> <li><input type="text" value="ユーザー名" /></li> <li><input type="text" value="メールアドレス" /></li> </ul> [/html] そしてこのままだと、他の文字と同じように 濃い色の文字色のままです。とりあえずCSSでうすくしておきます。 [css] input[type="text"] { color: #ccc; } [/css] これで
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
How to Create an App from Scratch | AppMaster
Turning an app idea into a working reality is a more complicated task than most people might believe. However, with the wealth of software resources available on the internet, creating an app out of your idea is manageable. You don't even need to necessarily know how to develop mobile apps to make your application work. You can hire third parties or freelancers as there many places where you can f
jQueryで角丸を作るライブラリ jQuery Corner - Webtech Walker
Home Archive jQueryで角丸を作るライブラリ jQuery Corner jQueryで角丸を作るライブラリ jQuery Corner 2007年07月19日 category:javascript Comment(0) Trackback(1) コーディングするとき、角丸っていろいろと大変ですよね。今回はjQueryのライブラリで角丸を作成するものを紹介しようと思います。 ダウンロード 今回は角丸のみ紹介しますが、丸だけでなく色々な角を表現できるのがこのライブラリの特徴です。ダウンロードやデモ一覧は下記からどうぞ。 http://malsup.com/jquery/corner/ 使い方 まずjQueryとダウンロードしてきたライブラリを読み込ます。 <script type="text/javascript" src="jquery.js
ブログの記事タイトルを他のページに表示させたい - OKWAVE
現象は確認できませんでした。 Yahoo! BlogのフィードＵＲＬは http://blogs.yahoo.co.jp/[Yahoo ID]/rss.xml という形式ですが、間違っていませんか？ もしくは他のYahooブログで表示できるけど、自分のブログではダメということはありませんか？ つぎはぎだったので、念のためもう一度ソースを貼っておきます。 フィードＵＲＬの変数名が「blogUrl」では紛らわしいので、「feedUrl」に変更してあります。 前回のものは最新5件でしたが、3件に変えてあります。 <script type="text/javascript"> var _handleJson = function( json ) { if ( json.responseStatus != 200 ) return; var i, d, t = '<ul>', e = json.re
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】 テキストフィールドの初期化方法 | Graviness Blog
January 2024 (1) September 2023 (1) April 2023 (2) March 2023 (1) November 2022 (3) October 2022 (1) September 2022 (1) June 2022 (1) July 2021 (1) May 2021 (1) April 2021 (2) February 2021 (1) January 2021 (1) September 2020 (1) July 2020 (2) March 2020 (1) August 2019 (1) April 2019 (2) August 2018 (1) May 2018 (1) April 2018 (1) January 2017 (3) November 2016 (2) July 2015 (1) March 2015 (1) Ja
【ハウツー】ゼロからはじめるThickBox 3 - 画像もHTMLファイルもスイスイ表示 (1) ゼロからはじめるThickBox 3 - 画像もHTMLファイルもスイスイ表示 | パソコン | マイコミジャーナル
ThickBox 3とは? ThickBox 3はAjax(非同期通信処理)を利用して画像を表示するライブラリです。同じようなライブラリとしてはLightbox)が有名ですが、Lightboxはprototype.jsライブラリを利用しているのに対し、ThickBox 3はjQueryライブラリを利用しています。ThickBox 3の画像は単独の表示だけでなく、複数画像をグループ化してスライドとして表示させることもできます。また、画像だけでなくHTMLファイルなども表示させることができるので、いろいろ応用できそうです。Lightboxと比べてもThickBoxの方がプログラムサイズがコンパクトなことも魅力です。 ThickBox 3の大きな特長としてスクリプト(プログラム)を記述しなくてよいという点があります。つまり、全くプログラムが分からない人手も気軽に使うことができます。ThickBo
FAQ形式によるJavaScriptの本質がわかる超入門 - 風と宇宙とプログラム
はじめに JavaScriptは簡単な言語のようでいて、実は奥が深く、初心者にとってなかなかその本質がわかりにくい言語です。ここでは、JavaScriptの言語的エッセンスを理解できるようなものをFAQ形式で書いてみました。ご意見や誤り等を指摘してもらえたら嬉しいです。 なお、JavaScriptの標準化であるECMAScriptは、今年末にEdition 5 がリリースされる予定です。このFAQは、現在のバージョンであるEdition 3をベースにしています。 ECMAScriptって何ですか？ ECMAはEuropean Computer Manufacturer Association(欧州電子計算機工業会)の略で、標準化団体です。NetscapeのJavaScriptとMicrosoftのJScriptをベースに、純粋なプログラム言語部分を抽出したものをECMAで標準化したスクリプ
メールアドレス暗号化
何かあったときのためにサイトに管理人の連絡先メールアドレスを書いておきたいと思っても、スパムボットによる自動収集を考えると二の足を踏んでしまいます。そのためメールアドレスを画像にしたり、メールフォームなどで代用することが昨今では普通です。あるいは@を他の文字に置き換えたアドレスを書き、「メール送信の際は★を@に変えてください」などと注記したり。 とはいえプレーンなテキストで表示されていたり、リンクのmailto指定などで記載してあったほうが閲覧者に対して親切なのは確か。 そこでボットなどに収集されにくくする暗号化スクリプトを作ってみました。このスクリプトで暗号化したメールアドレスは、JavaScriptが動作するブラウザで閲覧したときのみ、以下のどちらかの形式で表示されます。 プレーンなテキスト。例) メール: hoge@mail.com (ブラウザ上でこの通りに表示されます) リンク形式
$BLBOG%a!<%kKI;_$N$?$a$N (B $B%a!<%k%"%I%l%9<}=8%m%\%C%HBP:v%"%I%l%90E9f2=%9%/%j%W%H (B3
$B%a! $B$K (BSubject $B$r;XDj$9$k5!G=$r (B $B$D$1$^$7$?!# (B $B2 $BI,MW$J$i!"2 $BI,MW$J$i!"2!Y$NMs$K (BFrom: $B$KJ;5-$9$kL>A0$rF~NO$7$F$/$@$5$$!# (B $BI,MW$J$i!"!X%j%s%/J8;zNs!Y$NMs$K%j%s%/$7$?$$J8;zNs$rF~NO$7$F$/$@$5$$ (B ( $BF~NO$7$J$$>l9g$O (B"E-mail" $B$H$$$&J8;z$,F~$j$^$9 (B) $BI,MW$J$i!"2 [ $BJQ49 (B] $BKU$r2!$7$F$/$@$5$$!# (B $B!X0E9f2=8e$N%a!l=j$K=q$$$F$/$@$5$$!# (B JavaScript $BBP
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」 IEやsafari、Google Chromeではword-breakプロパティが実装されていますが、FirefoxやOperaではword-breakプロパティは実装されていません。 そこで、FirefoxとOperaでword-break:break-allを実現するJavaScriptライブラリ「wordBreak.js」を作成しました。 使い方 ダウンロードした「wordBreak.js」をhead要素などで読み込んでください。 <script type="text/javascript" src="./wordBreak.js"></script> word-break:break-allを利用したいtable要素のclass名に「wordBreak」というclass名を追
metaphase coder team labs - 半角英数字を改行する
2009年5月22日 16:02 URLやメールアドレスなどの半角英数字を羅列した際に、それを包括する要素を突き抜けてレイアウト崩れが発生することがあります。 これは、スペース等の区切りが登場するまで一つの単語として認識され、通常では改行されません。 これをJSで解決されてたブログを見つけたのでご紹介します。 CSSにて[word-break:break-all;]と指定すれば、半角英数字の文字列の途中であっても領域に合わせて改行することが可能です。 しかし、これはIEでしか対応しておらず、そのほかのブラウザでは対応していません。 「to-R」というブログで「wordBreak.js」というものが公開されており、IE以外のブラウザでも[word-break:break-all;]と同様の効果が得られるようです。 FirefoxとOperaでword-break:break-allを実現する
特集：jquery.jsを読み解く｜gihyo.jp … 技術評論社
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
