「RxJS」初心者入門 - JavaScriptの非同期処理の常識を変えるライブラリ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。 みなさん、「RxJS」をご存知でしょうか？ すごく大雑把に言うと、RxJSとは非同期処理（マウスクリックなどのイベントベースの処理も含める）をするときに超絶便利なライブラリです！ イメージしやすいように「便利」とは言いましたが、決して「便利」という言葉ではおさまらないくらいのインパクトがあると思います。ちょっとした「イノベーション」に近い感覚です。 今回は、RxJSを全く知らない初心者でもとっつきやすいように説明してみたいと思います。少し記事が長くなりますが、最後までお読みいただければ幸いです！ 目次 ReactiveXについて 非同期処理の問題点 RXと「Observerパターン」 ウォーミングアップ イベントを配列のように操る？ Stream（ストリーム） ストリームを操作する「オペレーター」 オペレーションチェーン ObserverとObservable Col
エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今年もHTML5 Minutesに登壇してきました。こんにちは、先生です。 当日は「フロントエンド開発スピードをあげるための環境を作ってみた話」をしてきました。 今回はその環境を使ってみるまでの手順を書いていきたいと思います。 必要なものをインストール NodeJS Gulp WebPack Bower PhantomJS NodeJSとGulpのインストールは過去の記事「Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ」をご覧ください。 WebPackのインストール WebPackはさまざまな形式のモジュールを静的なファイルにまとめて出力してくれるツールで、拡張性が高く最近好んで使っています。 WebPack http://webpack.github.io/ インストールはnpmを使って簡単にできます。 npm install webpack -g ※ macは
SVGとjQueryで絵を描いているようなアニメーションを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもお久しぶりです。 フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近『天空のクラフトフリート』というソーシャルゲームにハマっております。 もともとは弊社のエンジニアの何人かに誘われてDLしたのですが、みなさん最近ログインしている様子がなく、もくもくとひとりでミッションをこなし、練り上げております( ∵ ) まけないひとりたのしい、強くなる✌(´ʘ‿ʘ｀)✌ さて、今回はSVGで絵を描いているようにアニメーションを生成してくれるサイト、LAZY LINE PAINTERの使用方法をご紹介します。 SVGとは Scallable Vecter Graphocs（スケーラブル・ベクター・グラフィックス）の略で、XMLをベースとした二次元ベクターイメージの画像形式のことです( ˘ω˘)☝ SVGはjpgの様にimg要素で扱ったり、cssで色を変えたり背景画像として扱ったりできます( ˘
わずか5分！？ AWSのEC2でクラウドなウェブサーバーを構築してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして。五反田の「Clisk（クリスク）」という会社でシステムエンジニアなどをしている芹沢と申します。盟友であるLIGのゴウさんや紳さんと酒を酌み交わしているうちに、LIGブログに記事を書かせていただくことになりました。よろしくお願いいたします。 AWSとは？ http://aws.amazon.com/jp/ AWS（Amazon Web Servicesの略）とは、Amazonが提供しているクラウドサービスの総称で、その中にはさまざまなサービスが含まれています。 EC2（仮想サーバー）、S3（ストレージ）、RDS（リレーショナルデータベース）、CloudWatch（監視）など、たくさんのサービスが提供されていて、それらのITインフラのリソースを、使いたいときに、使いたいものを、使いたいだけ、必要なスペックで、利用することができるのが特徴です。 多くのサービスは管理画面から操作でき
「新しいタブ」を有効活用できるChromeの拡張機能5選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 Chromeの新しいタブを開くと「よくアクセスするページ」や「アプリケーション」が表示されるよう標準で設定されていますが、ここの活用方法がよく分からなかったり、人に貸すときや一緒に作業するときに見られるとちょっとドキドキしたりしませんか？ そんなときに役に立つのが、「新しいタブ」ページをカスタマイズしてくれる拡張機能です！ 今回はその中でも特に良かったものを、Chrome ウェブストアのページと一緒に紹介していきます。 Chromeの『新しいタブ』ページが有効活用できる拡張機能5選 1. Currently https://chrome.google.com/webstore/detail/currently/ 「新しいタブ」を開いたときに現在地の4日間の天気予報を表示してくれる拡張機能。デフォルトは英語表記ですが、言語も豊富に揃っているので日本語にす
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
jarallax.jsの使い方解説
こんにちは、デザイナーのサリーです。 JSを書けない私が、いろいろとパララックスのJSを漁ってみて、一番書き方がシンプルでわかりやすそうだったのが「jarallax.js」でした。 使ってみたら簡単でいい感じでしたが、ところどころクセがあって悩んだ箇所があったので、覚え書きの意味も兼ねて、今回はjarallax.jsの使い方を解説します。 （注：スマホやタブレットでは上手く動きませんので、PCでご覧ください。詳しくはこちら「パララックスサイトをつくるときにディレクターが気をつけるべき4つのこと」をどうぞ。） jarallax.jsとは？ パララックスの動きが実装できるJSです。その名の通りjQueryを使用します。 公式ページはこちら： http://www.jarallax.com/ HTML <!DOCTYPE html> <html lang="ja" dir="ltr"> <hea
文字を魅力的に動かせる!!テキストエフェクトの定番textillate.jsの使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
一口にテキストエフェクトとは言ってもアニメーションのほうとビジュアルのほうと両方を融合させたものがあります。 ハリウッドのSF映画なら、必ずと言ってもいいくらい、映画の特徴を的確に捉えた超カッコイイテキストエフェクトをかけますよね！僕はトランスフォーマーのタイトルのような、動きも見た目もSFチックなのが好きです。 そういうのをWeb上でもインタラクティブに出来たら最高ですよね？如何せん、映像分野に比べてテキストエフェクト作成を手助けしてくれるツールが泣くほど少なく、制限も多くて自由性に乏しいがゆえに、個性的なテキストエフェクトを実装しようものなら、とてもじゃないがかなり骨が折れちゃう仕事になりそうです。 でも、それも過去の話！ とは言いたいところだが…まだまだ全然映像分野の足元にも及ばないのが現状… とは言ってもCSS3のおかげで昔よりは随分良くなってきたのも事実。 今回は、手間暇要らずで
関西ではメジャー？おにぎりせんべいを頂いてみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、紳さんです。 またもやLIGに何者からか荷物が届きました。毎週、何かしら不審な物が届く会社です。 ワレモノ・・・？ なんだろう？ こ、これは・・・ おにぎりせんべいだー！！ って、なんだこれ？ お菓子？ 手紙が添えられていました。 LIGのファンだという、ペンネーム喫茶店さんからのプレゼントだったんですね。 なんでも、Facebookでジェイが「おにぎりせんべい？なにそれ？」みたいなことを書いたら、送ってきてくれたんです。めちゃ良い人！ ありがとう、喫茶店さん！ こちらが「おにぎりせんべい」 三重県に本社を置く、株式会社マスヤさんが製造しています。 なんでも、関西〜九州にかけては絶大な知名度を誇るお菓子らしいのです。 このお菓子、長野県出身の僕は本当に知りませんでした。 手当たり次第、LIGの社員に聞いてみたところ、知っていた人は3割程度でしたが… お菓子入れに入れてみたら、な
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
まるでテーマパーク！？LIGがチームラボのオフィスに遊びに行ってきました。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、紳さんです。 本当に厳しい寒さが続いていますね。だけど、僕は負けないよ。 暖かい春がやってくるというのを知っているのだから。 …先日、ジェイや社長を連れてチームラボさんのオフィスに遊びに行ってきました。以前、チームラボの方達がLIGに来てくれた縁もありましたのでね！ その時の記事はこちら↓ テクノロジスト集団、teamLabの方達がLIGに遊びに来てくれた。 というわけで、会社見学レポートです。 文京区は水道橋駅から歩くこと数分。とあるビルの4F〜7Fがチームラボさんのオフィス！ すぐ下の階が東京都柔道接骨師会診療所でしたので、仕事中に万が一、足の骨を複雑骨折した時は便利ですね。 こちらがチームラボさんが開発した受付システム、フェイスタッチ。 訪問した際、社員を名前と顔で検索をして、お目当ての方を呼び出すことが出来るという素晴らしいシステムです。これだけわかりやすいインターフェ
テクノロジスト集団、teamLabの方達がLIGに遊びに来てくれた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、紳さんです。 今回は憧れのteamLabの方達がLIGに来た時の話をしたいと思います。 ことの始まりは、とある1通のメールから。 〜11月某日〜 「すみません！僕達、あまり他社の人達と交流が無いんで、取材がてら、ご訪問して良いですか？」 「え！嬉しい！光栄です！どうぞいらして下さい！」 「ありがとうございます〜！じゃあ来週行きます〜！」 〜LIG訪問日前日、夜〜 「それでは明日、取材に行かせて頂きます〜」 「はい、かしこまりました〜。何名様くらいでお越しですか？」 「全部で9名です。」 「無理ｗｗｗｗｗｗ」 「人数的に厳しい場合、カメラマンとライターは置いていきます。」 「いや、切り捨てる人材のチョイスおかしいでしょう。」 「てへぺろ」 「可愛い…。じゃあ、全員で来て下さい。」 こんなやりとりから、ウルトラテクノロジスト集団teamLabの方達がLIGに遊びに来る事になりました
CSSを編集して自動保存できるChromeの拡張機能「DevTools Autosave」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。 突然ですが、皆さんはどうやってWebページを組んでますか？ 僕は、HTMLの骨組みをひと通り書き終え、それからChromeで直接CSSを書いていきます。個人的には、ChromeはCSSをリアルタイムでいじれるので便利です。 しかし、この手法で組むと、CSSを追加、編集するたびに、いちいちコピペを連発しなければならない。しかもその後ちゃんとコピペしきれているか別タブで確認して・・・。 これは、NO GOODです！ 「編集したCSSをそのまま保存できたらなあ。」と誰もが思うことでしょう。ブラウザのセキュリティ上、そのような機能は永遠に提供されないと思われますが。 と、思ったのは誤算でした！ なんと、Chromeが開発者向けに「Chrome DevTools Autosave」という名の拡張を出しているんです！これを使えば、編集したCSSがそのまま保存されます！
試す価値あり!?Firefox開発ツールの使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
初めまして！デザイナーのハルエです。 LIGに入社して1週間。現在私は自分を開花させる機会をうかがっている最中です。 ところで皆さんはWEBサイトの制作中、どの開発ツールを利用していますか？ おそらくお使いのメインブラウザによって大きく分かれるのではないでしょうか。 Firefoxの方はアドオンの「Firebug」。 ChromeとSafariの方は標準搭載されている「デベロッパーツール」など。 私自身はずっとFirefoxにお世話になっていたのでFirebugを愛用していましたが、速さと快適性に衝撃を受け2年程前にメインブラウザをChromeに切り替えました。 開発ツールもChrome版のfirebugからChromeのデベロッパーツールに変えたりと、ここ最近ふらふらしてたわけです。 ところが・・・なんか聞けばFirefoxに標準搭載された調査機能が進化しているそうで。 さらっと乗り換え
伝説のウェブデザイナー | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
伝説のウェブデザイナーを探して 西暦2012年 株式会社LIGは深刻なデザイナー不足に見舞われていた。 そんな中、過酷な労働を強いられるデザイナー達が限界を迎えようとしていた。 「もう15時か。あー、今日もよく働いた」 「おい、お前達、しっかり働けよ。俺はもう上がるからな」 「ヴぇっ！？」 「な、なにをする！」 「うっ…ぐ…」 「……………………」 ～～～～～～～～ 「……………………」 「えっ？」 「ふふふ、社長…ようやく目が覚めたみたいね」 「！？ なんのつもりだ！さっさとここから出せ！」 「社長。俺達の言う事さえ聞いてくれたらすぐにでも出しますよ。」 「お前達の言う事だと…一体何が望みだ？」 「新しくウェブデザイナーを雇うこと。それが望みよ」 「ウェブデザイナーを雇うだと？！…だからって、何故こんな事を…！！」 「………………」 「クズどもが！早くここから出せ！」 「黙って聞いていれ
ケツメイシの「さくら」のPVを、結婚式のためにLIGメンバーで再現してみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
弊社エンジニアの「鳥よし」が先日結婚したのですが、その際に余興として、ケツメイシの「さくら」のPVを完コピしてみました。 新郎「よしひろ」、新婦「さやか」の二人の出会いから結婚までを再現しています。PV自体は予想以上のシンクロ率で、かなり本物のケツメイシのPVに近づけることができました。撮影している時も一瞬、「あれ？俺ケツメイシだっけ？」と錯覚してしまうくらいでした。 それではどうぞ、ご覧ください。 さやかさん役について 主演のさやかさん役にはLIGのお友達、後藤麻依さんに演じて頂きました。 『煮干しってそのまま食べても美味しいんです。よしひろさん、さやかさん、お幸せに。』 雨の降る寒い3月上旬、薄着で震えながら撮影にご協力いただきました。 麻依さん、本当にありがとうございました！ よしひろ役について 主演のよしひろ役にはLIGが誇る男優であるジェイを起用しました。 『カメラを向けられると
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
