タグ

ブックマーク / liginc.co.jp (7)

  • 「RxJS」初心者入門 - JavaScriptの非同期処理の常識を変えるライブラリ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは、王です。 みなさん、「RxJS」をご存知でしょうか? すごく大雑把に言うと、RxJSとは非同期処理(マウスクリックなどのイベントベースの処理も含める)をするときに超絶便利なライブラリです! イメージしやすいように「便利」とは言いましたが、決して「便利」という言葉ではおさまらないくらいのインパクトがあると思います。ちょっとした「イノベーション」に近い感覚です。 今回は、RxJSを全く知らない初心者でもとっつきやすいように説明してみたいと思います。少し記事が長くなりますが、最後までお読みいただければ幸いです! 目次 ReactiveXについて 非同期処理の問題点 RXと「Observerパターン」 ウォーミングアップ イベントを配列のように操る? Stream(ストリーム) ストリームを操作する「オペレーター」 オペレーションチェーン ObserverとObservable Col

    「RxJS」初心者入門 - JavaScriptの非同期処理の常識を変えるライブラリ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 企画書に説得力を。Webディレクターが日々仕入れておきたい情報満載のメディアサイト私選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは、ディレクターのあゆみです。 「企画書に、あと一歩強い説得材料が欲しい!」「先方から追加で相談がきたけど、一口にディレクターといってもそこまでは知らないよ! でも頑張ってベストな提案で戻したい」っていうやきもきすることってありませんか? そんなとき、「ああ、このデータ最高!」「この考え方やそれに基づいた動き、むっちゃいい!」といったアイデアをくれる救いのサイトたちがあるんです。 わたしは「困ったら見る探す」というブックマークフォルダを作っています。 今回は、Webディレクターがさらっておいて絶対に損はないなと思ったお気に入りブックマークを、超私選ではありますがご紹介します。 01. DIGIDAY http://digiday.jp/ 特にこれ使えるー!って思った記事が2015年12月3日に公開された「日の10代、もっとも好きな情報源は「Twitter」 〜そのスマホ行動を示す

    企画書に説得力を。Webディレクターが日々仕入れておきたい情報満載のメディアサイト私選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 「Compass」、基礎から応用まで! | 株式会社LIG

    こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません! はじめに結論を言うと、CompassでCSSを書くと 早い! 見やすい! メンテしやすい! コード量がぐっと減る! 一度使い出したら最後、もう元には戻れない! 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず! 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください! Compassとは? Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh

    「Compass」、基礎から応用まで! | 株式会社LIG
  • Sublime Text3で構文エラーをチェック

    こんにちは、つい最近メディア事業部脱退を表明したデザイナーの王です。 PhpStorm、Aptana、NetBeansなど、大抵のIDEは、コードを書きながら構文エラーをリアルタイムでチェックしてくれるとても便利な機能がついていますよね。 個人的にはPhpStormが一番使いやすかったですが、IDEだと、プロジェクト単位で管理しなければならないので、小回りが効くSublime Textも以前から愛用しています。特にSublime Textの「Multiple Selections」という機能が凄く便利で、一旦慣れてしまったら、この機能が使えないPhpStormで作業するとストレスが溜まってしまいます!! でも、はやりIDEのリアルタイムコード解析は使いたいなぁ〜〜 でも…でも… こんな葛藤に苦しんだ結果、とある偉大なプラグインが誕生しました!!その名も「SublimeLinter」です!

    Sublime Text3で構文エラーをチェック
  • CSS3のFlexboxを基本から理解して、使い方をマスターしよう! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基から理解して、使い方をマスターしよう!」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ! デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい!」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術

    CSS3のFlexboxを基本から理解して、使い方をマスターしよう! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • Web屋ならチェックしておきたい!作業効率が激変するChrome DevToolsの便利な使い方まとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    Web屋ならチェックしておきたい!作業効率が激変するChrome DevToolsの便利な使い方まとめ こんにちは、デザイナーの王です。 今回の記事では、ChromeのDevTools(デベロッパーツール)について、「多分、周知されていないけど、使わないともったいない!」的な機能を紹介させて頂きたいと思います。 フロントエンジニアにも、デザイナーにも、きっと効率アップに繋がる小技が見つかるはずです。 開発者なら「Chrome Canary」を使おう! みなさんはChrome Canaryを使っているんでしょうか?一般向けにリリースされている安定版であるChromeより、ほぼ毎日アップデートしている「Canary」ビルトを選ぶ理由があります。 それは、開発者向けの新機能がいち早く利用できるからです!リリースがノロノロしているChromeを使ってたら、いつまでも最新の便利な機能の恩恵が受けられ

    Web屋ならチェックしておきたい!作業効率が激変するChrome DevToolsの便利な使い方まとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • まるで自分の意思があるかのよう!canvasサイトまとめ12選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは。たまです。 最近canvasを使用したサイトをちらほら見かけますね。サイトのコンセプトに合えば是非とも取り入れたい表現です。 今回は有機的な動きをcanvas+javascriptで展開しているサイトをまとめてみました。 インスピレーションが湧いてくるな〜。では行ってみよう! My Life in 20 Years https://www.mylifein20years.com/ ※現在はサービスを終了しています。 facebookと同期してみてください。他のユーザーとの関係を繋ぐラインや読み込み時のローディング等、所々canvasが使用されています LAMDASH DNA | メンズシェーバー ラムダッシュ | Panasonic https://panasonic.jp/shaver/lamdash/dna/index.html DNAがcanvasによって表現され、3Dの

    まるで自分の意思があるかのよう!canvasサイトまとめ12選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 1