テンプレートエンジン「EJS」とタスクランナー「Gulp.js」で爆速HTMLコーディング | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 突然ですがみなさん、EJSってご存じですか？ EJSっていうのはですね、なんかもう、こう、すんごいツールでして！ とにかく、使うとコーディングがめっちゃ早くなるんですよ！！ 今回はそれを使って、爆速でコーディングするテクニックの入門編を紹介したいと思います。 EJSとは？ EJSはテンプレートエンジンと呼ばれるツールの1つで、JavaScriptのような書き方を取り入れつつHTMLが書けるという特徴を持っています。 ざっっっっくり言い表すと、SassとCSSの関係に近いです。 「EJSデータでより楽な書き方をして、HTMLに変換して出力する」ことができます。 これが使えるようになると、例えばheaderやfooterなどのパーツを分割して共通化させたり、JSのfor文のような命令がHTML上で使えます
[JS]異なる高さを単に揃えるだけでなく、グルーピングや列に応じて揃えることも可能な便利スクリプト -matchHeight
デモページ：幅1,200pxで表示 これは、ボーダー無しの状態。 jquery.matchHeight.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。 <head> ... <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.matchHeight.js"></script> </head> Step 2: HTML 適用するパネル全てに同じclassを付与します。 各パネルが横一列に配置された場合は、全て同じ高さに。複数の列に配置された場合は各列で一番高いも
jQuery（JavaScript）でiPhone、iPad、Android向けにアラートを表示してURLをリダイレクト（選択）させる方法｜BLACKFLAG
少し前に「jQuery（JavaScript）でiPhone、iPad、Androidなどデバイスを判別して URLをリダイレクトする方法」と題して、 スマホ系のデバイスを判別してURLをリダイレクトさせる方法を紹介しましたが、 ユニクロさんやほぼ日さんのサイトではスマホ系デバイスでアクセスすると アラートでスマホ向けのサイトがあることをメッセージで促し、 どっちのサイトへアクセスするかユーザーに選択させる方式をとっており このUIがおもしろかったので試しにｊQueryを使って同じ動作を作ってみました。 例として、サイト構成が以下の様なURLとします。 ——————————————————- 【PC向けサイト】 ｈｔｔｐ：//black-flag.net/sample/ 【スマートフォン向けサイト】 ｈｔｔｐ：//black-flag.net/sample/sp/ ————————————
textarea要素の文字数の扱いについて - console.lealog();
textareaの闇を見たような気がした。 これは、文字数のカウンターっぽいものを実装するときに気付いて調べたものです。 いわゆるmaxlengthの敷居と、jsから文字列.lengthで取れる値で、文字数のカウントが違う・・ってなったところが事の発端。 20150624追記 コメントで教えていただいたのですが、この挙動はどうやらWebkitのみだそうです。 DEMOみたく適当な実装すると、現状Webkit以外で困ることになるのでご注意ください。 困ったこと Twitterみたく、いわゆる文字数をカウントしたい場合。 楽できるところは楽したいので、こういう指定をしますよね。 <textarea maxlength="140" id="jsTweetArea"></textarea> 改行せずに文字を打った場合は、きっちり140字で打ち止めになってくれます。 ペーストしても、はみ出る分はばっ
phiary
JavaScript の dispatchEvent の情報があまりにも少なかったので解説用にサンプルを作ってまとめてみました. このエントリーでは dispatchEvent の基本的な使い方と活用例について解説します. うまく使えばネイティブっぽく JavaScript を拡張したりってこともできる便利な関数です. About 今回制作したサンプルデモは２つ. 最初のサンプルはイベントを発行するサンプルです. boxB をクリックした際に boxA のクリックイベントも発生するようになっています. 2つ目のサンプルは rightclick イベント という 右クリックしたときのみ発行する独自イベントを定義しています. Code 今回制作したサンプルデモ１個目の全体コードです. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <l
Home - Slide SJS
We have been working since 2009. We started with two people: a designer and a programmer. Today the company employs almost 20 people who are divided into four teams. Everyone is a master of his craft. There are open vacancies. We use all our experience, knowledge and skills to help you properly implement your plans to make the site a convenient tool - in this we see our mission. In tandem with the
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
