sw-precacheでお手軽にオフラインWebアプリケーションを作る | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近、プログレッシブWebアプリ（Progressive Web Apps、PWA）に興味津々なフロントエンドエンジニア、いなばです。 今回は、オフラインWebをまずは自分で実際に手を動かしてやってみよう！ と調べていたところ、sw-precache というモジュールで、リソースのキャッシュ制御がとても簡単にできたのでご紹介したいと思います。 まずは簡単に使ってみる まずはシンプルな構成で試してみました。 ソースコードはこちらになります。 https://github.com/i78s/sandbox/tree/develop/sw-precache-sample 手っ取り早くデモを確認したい場合は、 下記のコマンドを実行してService Workerに対応しているブラウザ( ここで確認できます )で実際の動作を見ることができます。 $ git clone https://github.
高さ可変！CSSアニメーションでなめらかアコーディオン | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドのつっちーです。 前回記事では、サポート終了（※1）となったIE9を切り捨てることで、CSSアニメーションを軸とするスライドショーを作成しました。今回も同様のコンセプトで、同じくよく使われているUI、アコーディオンを作成します。 内容の高さにそれぞれ違いがある場合でも、サイズを指定することなくアニメーションするところがポイントです。 ※1 Windows Serverを除く 今回つくるアコーディオン まずは完成した状態を確認してみましょう。 See the Pen 1704-completed by ligdsktschy (@lig-dsktschy) on CodePen. トリガーの要素をクリックすることで開閉する、一般的なアコーディオンです。 ちなみにこれを、CSSアニメーションを使わず実装したものがこちら。 See the Pen 1704-jquery
【Node.js7.5対応】gulp.js/Gruntを卒業すべき3つの理由とgulp非依存の本格タスクランナーの作り方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
突然ですが、皆さんのgulp.js(gulp)タスク、依存関係が複雑になりすぎて、こんな風になってませんか？ “a gulpfile” #jsart pic.twitter.com/Uj3dXoDXQm — Victor Savkin (@victorsavkin) 2016年8月12日 gulpやGruntを使って開発していると、 やれ「Node.js(Node)のバージョンが違っていて動かない」、やれ「エラーログがぐちゃぐちゃで追えない」など、様々なトラブルに遭遇しますよね。 もちろん、Node や依存モジュールのバージョンを固定したり、ドキュメントをしっかり作るなどすればこれらのエラーに遭遇する可能性は下がりますが、できれば異常系の処理をするより、新機能の開発をしていたいのが人情ってものです。 今回はそんな方が gulp.js やGrunt に頼らずに、Sassのビルドを監視して自動
「Hello」しか言えない超英語初心者が、初めてオンライン英会話を体験してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ライターののっち(@nocci_84)です。先日から英語の勉強を目的にフィリピンのセブ島にきています。 ……なんですけど、わたし英語がマジで全くできないんですよ。 買い物もできなければ、道も聞けない。もはやHelloとYesとNoくらいしか言えません。はっきり言って生活に困るレベルです。（ちなみにフィリピンについて早々、空港では入国の方法がわからず大パニックになりました） そんな私を見かねて、先日いろんなところを案内してくれた“留学生のための足長おじさん”こと「らいこうさん」が「QQイングリッシュのオンライン英会話」を紹介してくれました。 「無料で1度体験できるし、直接話すより緊張しないから試してみて！」とのことだったのですが…… ・ ・ ・ ・ ・ ダメだ。ひたすらに怖い。 だってオンラインって、なんかもう逃げ道のない箱に閉じ込められている感じしませんか？ 私が特に怖い点が以
リリース間近？？より便利になったgulp 4.0の変更点と移行へのポイントを紹介します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのいなばです。 今回は、案件で使っているgulpをv4.0にあげてみたので、その主要な変更点をいくつかご紹介したいと思います。 インストール方法 gulp 4.0の正式リリースはまだなので、下記のコマンドを叩いて直接gitリポジトリからgulpをインストールします。 npm install git://github.com/gulpjs/gulp.git#4.0 --save-dev 今回はお試しなのでローカルにインストールしています。 バージョンアップ後の大きな変更点 本稿では、変更点の中で主要な4点をピックアップしてご紹介します。 タスクに渡す関数の制約 gulp.taskの引数 直列/並列の処理 gulp.watchの引数 そのほかの変更点はこちらで確認することができます。 1. タスクに渡す関数の制約 Gulp v4 requires a str
【サンプルPSDデータ配布中！】デザイナーとフロントエンドにちょっと優しい「PSDルール」を考えてみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
【サンプルPSDデータ配布中！】デザイナーとフロントエンドにちょっと優しい「PSDルール」を考えてみた こんにちは、デザイナーのもりたです。 突然ですが皆さん、整理整頓は得意ですか？ 私の会社のPCのデスクトップはスクリーンショットだらけです。 よく整理整頓の第一歩はルールづくりだと言いますね。 リモコンはサイドテーブルに置く、雑誌はラックに入れる、シャツ類は一番上の引き出しに入れる……。でも、整理整頓ができる人にはきっとわからないけれど、自分に合わせたルールをつくるのが一番めんどくさいんですよ！ だからデザイナーの間でもPSD（Photoshop Document）のレイヤー整理がまちまちだったり、同じ人でさえ場合によって変わったりします。そこで、いちいち考えることすらめんどくさくなったので、社内共通のルールをつくってしまおうということになりました。 せっかくつくったので、今回はそれをご
webpackを使った開発の効率化方法やloaderの種類をTLで話してきました【スライド付き】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、まろCです。 2月に2本のLTに登壇してきたのですが、どちらもwebpackを題材にして喋ってきました。 今回は、そのときのスライドを共有したいと思います。また、すぐに使えるインストール方法もあわせて解説したいと思います。 webpackとは http://webpack.github.io/ webpackとは、一言でいうと依存性を解決するツールです。 HTML上に、何本もscriptタグでJavaScriptを読み込んでいたものを、1本のJSにしてパックします。 エントリーポイントと呼ばれるJSにrequireと書いて、他のJSを読み込むことで、ビルド時にそれを探して1つのJSファイルの中に書き出してくれます。 自作のモジュールを、パスから引っ張ってきたりbowerから引っ張ってきたりできるのはもちろん、node_modulesからも使えるものは使えたりと何でもありなツール
【フォントの些事】第2回 Photoshopでの文字詰めとフォントのボディについて | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、デザイナー兼イラストレーターのもりたです。 前回の「【フォントの些事】第1回 インストールする前に確認したいフリーフォントの基礎知識」で次回予告したものがうまくまとめられなかったので、今回は第3回で予定していた、Photoshopのフォントと文字ウィンドウについて書きます！ 普段仕事でPhotoshopを使ってる人でも、文字ウィンドウはその数値が何を指しているのかよくわからないまま使っていることが多いんじゃないでしょうか。 特に文字詰めに使用する「カーニング」「トラッキング」「ツメオプションの設定」の違いがいまいちよくわからない。 例えば「ツメオプションの設定」の「100％」という数値は、文字のどこを基準に何が100％詰まるの？とか。「トラッキング」の数値って何を基準に100なの？ピクセルじゃないしな？とか。 正直に言っちゃえばWebでは文字詰めをそんなに細かく設定することがないの
そのCSS、ヤバイかも？CSS設計が破綻するありがちな失敗パターン4つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
コンセプトは「現場で使える、実践的なCSS設計」です。 以下のようなポイントに当てはまる方は、ぜひ手にとってみてください。m(_ _)m CSS設計を勉強したいとは思ってるけど、まだ本格的には動いていない CSS設計の理屈はわかったけど、いざ実務でやると上手くいかない SMACSSとかBEMとか方法論がいろいろありすぎて、どれをどう使えばいいのかわからない CSSを設計する意義がわからない CSS設計を実務に導入したいけど、絶対に失敗したくない ということで広告はこれくらいにして、本題に入りたいと思いますっ。 1. ドキュメントがない 複数人で開発を行う場合、ドキュメントがないとコーディングルールをはじめとするさまざまなお約束事項をメンバー間で共有することができません。 その結果、命名規則が守られなくなったり、CSSの書き方がバラバラになったりと、設計がみるみる内に崩れていくでしょう。。。
CSS、canvas、SVGで円周上をアニメーションさせる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、おじいちゃんです。 今回はCSS、canvas、SVGで円周上をアニメーションさせる方法をいくつかご紹介したいと思います。 CSSでアニメーション CSSで円に沿ったアニメーションを実装したい場合、transformのrotationを使用することでアニメーションさせることができます。 transformのrotationを使った回転方法 transformのrotationは、要素を回転させることができるプロパティです。 入れ子の構造を持った親のDOMに使用することで、円周に沿ったアニメーションを作ることができます。 HTML <html> <div class="box"> <div class="circle"></div> </div> </html> .box{ width: 320px; height: 100px; margin: 230px auto 0; ba
Git管理ツール「SourceTree」で差分ファイルを抜き出す方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、お久しぶりです、はやちです✌(´ʘ‿ʘ｀)✌ ここ最近DMMのブラウザゲーム「刀剣乱舞」にハマってしまいましてひたすら刀狩りをしております( ˇωˇ )＜おじいちゃんこない そんなことはどうでもいいですね。 今回は、Git管理ツール「SourceTree」を使用して昔のファイルと作業したファイルの差分を抜き出す方法をご紹介いたします( ˘ω˘)☝ バッチファイルを用意する まずはバッチファイルを用意しましょう( ˇωˇ)☝ 適当なディレクトリにファイルを保存します。 Windows用 Windows用がこちらです。 export_diff_zip.bat if "%2" EQU "" ( set PARAM1=HEAD set PARAM2=%1 ) else ( set PARAM1=%1 set PARAM2=%2 ) setlocal enabledelayedexpan
コーディング中のクラス名で迷いたくない！よく見るコンポーネントの名前17選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 コーディングをしていて、クラス名に迷うことってありませんか？ ボタンや見出しといった、比較的単純なコンポーネントなら「.button」「.headline」など、すぐに思いつくかもしれません。 しかし、それが複雑なコンポーネントだったりすると、なかなか思いつかないものです。 そんな悩みを解消したいと思いまして、いろいろなサイトのソースコードを見て、開発者がどんなクラス名をつけているのか調査してみました。 今回は、その中からよく使われていたクラス名と、「これはナイスネーミング！」と思ったクラス名をピックアップしたいと思います。 thumbnail サムネイル画像。 アイキャッチ画像やギャラリーページの画像一覧などで用いられます。 avatar ユーザのアバター画像。 Webサービスのユーザ情報ページや、ブ
SVGのpathを使ったモーションパスアニメーションの実装方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、おじいちゃんです 今回はSVGのpathを使ったモーションパスアニメーションの実装方法について書きたいと思います。 【こちらもおすすめ】 ☞ SVGとjQueryで絵を描いているようなアニメーションを実装する方法 SVGのpath要素 path要素を使うことで、好きな図形を描くことができます。 Illustratorを使っている方はよく使ってますよね。Illustratorで描いたパスからSVGを書き出して使うこともできるのですが、今回は直接SVGタグのpath要素に描いて作ってみましょう。 d=”M 50,50 L 200,50 Z” SVGでpathを描く場合は、上のように各コマンドにパラメータをいれることでpathを描画できます。少しクセがありますが、自分で好きなpathを描いてみると慣れてきますので、遊んでみてください。 pathを描画するためのコマンドは下記があります
Node.jsからGoogle Analytics APIにアクセスし、GA情報を表示させよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGフットサル部部長兼エンジニアののびすけです。 最近フットサルにあまり行けてないので、どなたか誘ってください。笑 さて先日、LIGブログが初めて月間300万PVを達成した際、社内向けに「リアルタイムでLIGブログのPV数をが表示されるサイト」をGoogle Analytics APIを利用して作ってみました。 そこで今回は、Node.jsからAPIへの接続方法とサイト作成について紹介していきたいと思います。 まずはみんな大好きGoogle Analytics(以下GA)です。 GAのAPIを使えば、ほとんど全ての情報が取れるのではないかというくらい、豊富にデータが取得できます。 代表的な項目でいえば リアルタイムにアクセスしている人の数 ページ毎のPV数やページ情報 指定期間のサイト全体のPV数 などでしょうか。しかし今回のテーマはGAの解析ではないので、一旦ここまでの紹介
LIGのソースコードレビュー会で使用している共有ツールとライブラリの活用方法の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
社内表彰式で「ブランディング賞」というものを受賞しました、ハカセです。 金一封として800バーツをいただきましたが、本当に扱いに困ってます。どうしたらよいのでしょう。 さて、今回はLIGのコードレビュー会で使用しているツールについて、活用技術を紹介していきたいと思います。 LIGのコードレビュー会とは LIGでは毎週コードレビュー会を開催しています。 毎回1人がコードを出し、それをみんなで確認して もっとこうした方が、わかりやすいのでは？ こっちの方がパフォーマンスが良い これすごくいいから、ちょうだい！ というような意見を、気軽に言い合う会となっています。 しっかりした品質のためのレビューとは異なり、個々のスキル向上、コーディングルールの意識統一などを目的とした勉強会のような位置づけになっています。 レビューの方法 レビューについては、以前は1台のPCモニターの前で集まっておこなっていま
外国語添削SNS「Lang-8」で英語とWeb技術を一挙両得した！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
シャーロックとハリー・ポッターが大好きなライターの内藤です。 ハリー・ポッターに至ってはUK版を原書で全て読みあさっており、とあるテレビ番組に出演したことがございますが、それも今となっては恥ずかしい思ひ出でございます。 とはいえ・・・ 私は、TOEICを受けたことがありません。 私は、多少の英語は読めますが、書くのと聞くのと話すのは全くダメです。 でも英語できるようになりたい！シャーロックのために！ハリー・ポッターのために！ そんな私が最近はまっているLang-8をご紹介致します。 勢古口さんの記事”実践英語を身につけるための、無料で使える言語学習サイト5選“でも紹介されていました。 世界中で外国語（母語以外の言葉）を勉強する人のSNSサービス、それがLang-8です！ http://lang-8.com/ Lang-8とは？ 簡単に言うと、自分の母語を学んでいる外国人の記事をお互いに添削
SVGとjQueryで絵を描いているようなアニメーションを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもお久しぶりです。 フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近『天空のクラフトフリート』というソーシャルゲームにハマっております。 もともとは弊社のエンジニアの何人かに誘われてDLしたのですが、みなさん最近ログインしている様子がなく、もくもくとひとりでミッションをこなし、練り上げております( ∵ ) まけないひとりたのしい、強くなる✌(´ʘ‿ʘ｀)✌ さて、今回はSVGで絵を描いているようにアニメーションを生成してくれるサイト、LAZY LINE PAINTERの使用方法をご紹介します。 SVGとは Scallable Vecter Graphocs（スケーラブル・ベクター・グラフィックス）の略で、XMLをベースとした二次元ベクターイメージの画像形式のことです( ˘ω˘)☝ SVGはjpgの様にimg要素で扱ったり、cssで色を変えたり背景画像として扱ったりできます( ˘
Photoshopを快適カスタマイズできるオススメ無料プラグイン6選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 普段Webデザインを制作する上でPhotoshopを使用している方は多いかと思いますが、いかに自分に合った環境にカスタマイズするかで作業効率は大きく変わってきます。 今回はいつものPhotoshopがさらに快適になる無料プラグインをご紹介させていただきます。 【こちらもおすすめ】 おすすめPhotoshopプラグイン WebINK http://www.webink.com/webfontplugin/ ※現在このサービスはご利用いただけません。 Google Web FontなどのWebフォントをPhotoshop上で表示、利用することができます。 最初の同期に少し時間がかかりますが、あとはデザインしながら手の届くところでWebフォントがさくさく選べてしまうので、非常に捗ります。 Photoshop CS5から対応しています。 flaticon ht
採用担当が転職者の求人を成功させるために気をつけたい5つのこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、メディアマネージャーのそめひこです。 LIGはまだまだ小さな会社ですが、組織を細分化しているために、各事業責任者が人事担当を兼任しています。おそらくこの現状はベンチャーにはよくあることだと思うのですが、実際に人を採用する立場になると、その難しさを実感します。 そこで今回は、何かと目につく「ちくしょう。転職だ！」の広告でお馴染みの転職サイト『Green』の事業部長・森田さんからお話を伺い、採用担当者が求人を成功させるために気をつけたいことを5つにまとめてみました。 これらは、どんな求人媒体を使うのか、紹介手数料をいくら払うのかよりも重要な、採用の大前提です。僕自身、これまで自分が担当した採用が客観的に上手くいっているのかを判断できなかったため、大変感銘を受けました。 採用担当者の皆様は、ぜひぜひご活用くださいませ！ 1. 採用のコンセプトは明確か IT/WEB業界では、求められる
【HTML5・CSS3】おしゃれなテーブルデザインのサンプルソース5点 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい！ そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。 table作成時に参考になるサイト 本題に入る、その前に。XPの公式サポートも終了し、HTML5＋CSS3の普及が進んでいます。今更ながら、この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。 table専門参考ページ4選 table専門の参考ページを4つほど選んでみました。 CSS3を使って美しく装飾されたテーブルの作り方｜Webpark CSS3でのtableの作り方を、見た目とソースから解説してあります。 テーブル｜CSSデザイン｜スタイルシート（CSS）｜PHP & JavaScr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
