2つのプルダウンリストを連動させる 動的に選択肢を出すなんて、難しい数式が必要なんじゃない？と思うかもしれませんが、そんなことないんです！ 以前紹介した「名前」という機能を使って、簡単に2つのプルダウンリストを連動させてみましょうー。 1. 表を作成する たとえば、こういう感じの表を作成するとします。 この表のなかで、「ユニット（職種）」と「担当者」の2か所をプルダウンで選びたい！　選んだユニットと連動して、担当者の選択肢が変わるようにしたい！とします。 2. リストの元データに「名前」を付ける まず、選択肢の元となるリストを作ります。 例の場合ですと別シートで作成していますが、同じシート内でも大丈夫です^^ タイトルを付けて表形式にすることで、編集をする場合や他の人が見る場合にわかりやすくなります。 ここで活躍するのが前回説明した「名前」の機能です。 プルダウンリストは、「名前」を使って

どうもですよ、はやちですよ٩( ᐛ )و ここ最近「刀剣乱舞」のキャラクターが揃いつつあり、あと二振りでコンプリートしそうです٩( ᐛ )و＜残りおじいちゃんと明石 だが何百回出陣してもおじいちゃんが来ません。 ください( ˇωˇ )＜おじいちゃんどこ そんなことはどうでもいいですね( ˇωˇ ) ソーシャル系やサイトのキーカラーをうっかり忘れてしまうので、Sassの変数でまとめてみました。ご紹介します( ˇωˇ ) カラーまとめ よく使うソーシャルサイト Facebook

こんにちは、店長です。 最近は実案件でAngularJSを使う機会が増えてきました。 そこで導入しているのがAngular Materialという、Googleが提供するAngularJS用のUIコンポーネントです。 Angular MaterialのLayoutコンポーネントはflexboxを使用したものになっています。 Angularと書きましたが、AngularJSらしいことは今回出てきません……。 どのようにLayoutにflexboxが使用されているのか、詳しく解説していきたいと思います。 今回のDEMOはこちらからご覧になれます。 flexboxについて まず、Angular MaterialのLayoutコンポーネントを使用する前に、簡単にflexboxのレイアウトについて解説したいと思います。 flexboxレイアウトは、以下のように親要素のflexコンテナと子要素のfle

こんにちは。 6月から役職が変わりフロントエンドリーダーからCTOになりました、先生です。 もうAngular1.4にアップデートしましたか？　Angular1.4になりマテリアルデザインを意識したアニメーション関連の変更や実装がおこなわれました。その分Breaking Changesもあるのでアップデートには注意する必要があります。 今日はそんなAngularJS 1.4を使って、マテリアルデザイン風にページ遷移するアニメーションを作ってみたいと思います。 今回のデモ デモは下記リンクになります。 各メンバーをクリックするとスムーズにアニメーションして詳細ページに遷移します。まずは触ってみてください。 http://frontainer.com/ligblog-sample/angular-morphing-animation/#/ 必要なもの AngularJS1.4 – https:

こんにちは、おじいちゃんです。 Webサイトを作っていると、デザインによってはCSSを使って三角形を作るときがあります。便利ですよね。画像だとhover時に色が変えられなかったり、作ったとしてもアニメーションがつけられなかったり、かといってSVGにするほどでもない。 CSSのborderを利用することで、三角形は比較的簡単に作れますし、アニメーションもできる。それではなぜborderを利用することで三角形が表現できるのか、考えてみたことありますか？ 今回はborderを利用して、三角形を表現できるCSSの挙動について紹介したいと思います。 まずは書いてみる 黒で塗りつぶされた三角形を書いてみます。 <span>タグに任意のクラスを当てたHTMLを用意して、下記プロパティを当てることで三角形が表現できます。 <span class="triangle"></span> .triangle{

こんにちは、まろCです。 幼い頃から本が嫌いで、読み始めると数ページで眠くなってたんですが、最近読めるようになりました。なんと、Kindleで読むと眠くならないのです！ もっと言うと、Kindleで行間を空けて、文字を大きくし、1ページで見える文字数をなるべく少なくしたら睡眠魔術が効かなくなってきたのです。 それはさておき、今回は最近話題のMQTTについて、MQTTブローカーサービス「sango」を使ってチャットツールをつくってみたので、そのことを書きたいと思います。実装はフロントのみ！ MQTTとは https://sango.shiguredo.jp/mqtt 一言で言うならば、「あらゆるモノをつなぐ軽量プロトコルで、パブリッシャー（送信者）とサブスクライパー（購読者）の間に位置するMQTTブローカーサーバーを介して、メッセージをやりとりする」といったところ。 ちなみに、Faceboo

こんにちは。 先日ng-japanにスポンサー企業として参加してきました、先生です。 本日は、すごくマジメに資料を作ったのに爆笑に包まれてしまったLTで発表した内容を、整理してお送りします。なぜ爆笑されたかについてはここでは語りませんので、直接聞くか動画をご覧ください。 One-time Bindingとは 「バインディングを1度しか評価しないようにする機能」です。 通常のバインディングは値が変更されると画面の値も変更されますが、One-time Bindingを使うと描画された以降は再評価されなくなります。 サンプルで実際の動作を見てみましょう。 One-time Bindingのシンプルな例 ソースは至ってシンプルです。 <div id="demo" ng-controller="RootCtrl"> <div>{{count}}</div><!-- いつものバインディング --

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

こんにちは、エンジニアの王です。 今回はデザインパターンと、デザインパターンの中の「Strategy」について紹介したいと思います。 デザインパターンとは？ 端的にいうと、「よくある問題へのよくある解決策」です。 ここでは、あくまでもソフトウェア設計の場合に限定しているのですが、さまざまなコンテキストで活かせる概念です。 「今までの経験上、この手の問題なら、この方法（パターン）でやればうまくいくよ！」という経験則は誰にでもあると思います。それがゲームの場合なら「攻略法」、料理の場合なら「レシピ」、語学の場合なら「定型文」だったりします。 ソフトウェア設計の場合、特にオブジェクト指向プログラミングにおいて言うなら、「デザインパターン」とは、過去のソフトウェア設計者が失敗に失敗を重ね、試行錯誤の中から導き出した再利用しやすいノウハウの集大成のようなものです。 そう、要するに、柔軟性、拡張性、再

こんにちは！　LIGフィリピン支社代表のせいとです。 最近のブログではまとめ記事中心に書いていたのですが、このまえ編集担当の朽木に「最近エンジニアっぽい記事書いてないよね。」というグサっとくる一言をもらったので、今回はそれっぽい記事を書いてみようと思います。 はじめに モダンブラウザでは、CSS3のanimationプロパティ、@keyframesの2つを使ってイケてるアニメーションがJS抜きで実装できます。 そいつあすごいぜって話なんですが、1つ心配なことが。 それは、アニメーションのバリエーションが複数ある場合、コード量が長くなりがちという問題。 ただでさえ各ブラウザのベンダープレフィックス付ける必要があるので、その上アニメーションパターンをいくつも書こうとしたらもう…（´Д`） 実践その1 というわけで、Sassを使って簡潔に書くことにしましょう。 試行錯誤を繰り返し、いろんなサイト

こんにちは。づやです。 さて、要素をドラッグアンドドロップさせてなんかしたいっていう要望は割とあると思うのですが、個人的には5年くらいその処理が必要とならず、あまり考えることがありませんでした。 そこで最近はどんな感じでできるのかなあ、と思っておりまして、ちょっと調べてみたことをまとめます。 5年前はprototype.jsとプラグインを利用していたのですが、今回はjQueryとプラグインで実装してみたいと思います。 便利なjQuery UIのDraggableを利用します と言っても、jQuery UIを利用すれば超簡単にできる模様なので、まずは作ってみました。 ※コードは大事な所だけ抜粋しています <html> <head> <!-- まずjQueryとjQuery UIを読み込みます。今回はCDNから読み込んでます --> <script src="//ajax.googleapis

チャットツールが流行したことにより、電話をする機会が少なくなりました。そのため、会社での電話応対に不安を抱いている人も多いのではないでしょうか。 今回は、あまり電話応対したことがない若手社員に向けて電話応対に関するビジネスマナーを手順ごとに解説します。また、上手くなる方法も紹介していますので、電話応対に不安がある方はぜひご覧ください。 ※編集部注：この記事は2022年6月に更新しました。 【重要】電話応対のマナーの基礎と心構え 会社の代表として応答する 電話応対の心構え 自分は「会社の代表」と意識する 電話応対をするときは会社の代表という意識で臨みましょう。電話相手にとっては、電話応対をする側が、経験が少ない新人社員とはわかりません。電話応対の印象が、その会社の印象になるので、マナーをしっかりと守りましょう。 「もしもし」はNG 電話にでたときの第一声 「お電話ありがとうございます。株式会

こんにちは。LIGブログ編集部です。いつも「時間が足りない！」「忙しい」「寝たい……」と思っているWebデザイナーの皆さん、Photoshop作業の時間短縮をしていますか？ Photoshop作業の効率化すれば、余った時間でやりたいことができますよね。そこで今回は、Webデザイナーさんならぜひ使ってほしい、Photoshop作業を効率化する方法をまとめました。Photoshop初心者の方も、そうでない方も、時短できる要素がないかぜひ確認してみてください。 1. ショートカットを使い倒そう 作業時間の短縮を考えたときに、まず思い浮かぶのがキーボードショートカットですよね。知ってるか知らないかで大きな差が出てしまうところでもあります。 ひとつひとつ説明すると長くなってしまうので、おすすめのショートカットについては、かなり詳しく解説されているこちらの記事「Photoshopの効率化におすすめのシ

こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは

はじめまして、新人デザイナーのほっしゃんです。 LIGに来る前はフリーでイラストやグラフィックデザインや美術作品を作っていました。最近ハマっているものは詰め将棋。好きな棋士は谷川浩司です。よろしくおねがいします。 今日は初心に返ったつもりで、ロゴやフォントのデザインの際に覚えておきたい「ベジェ曲線」の基本をおさらいします。実際にロゴを作っていきながら覚えましょう。 ロゴ作りから学ぶライブトレースとベジェ曲線 1. 下絵を準備する まずは作りたいロゴやフォントを考えます。 ロゴ作りの際、作り慣れていない方が一から作ろうとすると大変なことになってしまうので、下絵となるものを準備しましょう。バレンタイン＆ホワイトデーシーズンということで、あの有名な文字を作ってみたいと思います。 それがこれ。 ロバート・インディアナ『LOVE』です。日本だと新宿のアイランドタワーにあります。NYほか各地に置かれて

こんにちは。デザイナーの白浜です。 今回はPhotoshopでギザギザしたアイテムを作る方法をご紹介します。 ジグザグラインの作り方 まずはジグザグミシンで縫ったようなジグザグラインの作り方です。 ラインツールや長方形ツールで細長い線をひきます。 次に「フィルタ」→「変形」→「波形」ツールを使います。 ※この時パスはラスタタイズ化されてしまうので注意。 波型のオプションを上記のように設定します。ポイントは波数を1にすることと、三角波にチェックを入れること。これで均等で角がとがったジグザグになります。 上の設定でできたジグザグはこんな感じです。 このツールの困った点は、ご覧のとおりプレビュー画面に拡大機能がないのでプレビューが意味をなしていないことです。（CS6使用。CCだとどうにかなってたりするかな？） 白色だとよりわかりづらいですね。 一部を新規レイヤーにコピーして、線だけにしてからフィ

こんにちは。 戦：54　僧：59　魔：53　武：60　盗：60　旅：55 レン：60　パラ：54　マ：51　ス：49　賢：40 バ：25　CSS：2 鳥よしです。 (あ、一応ちゃんと仕事もしてます) 今日は、iPhoneのsafariでリンクを長押ししたときに出る ↓コイツ（アクションシート）を消し去る方法を書きます。 <img loading="lazy" class="size-medium wp-image-18740" src="https://liginc.co.jp/wp-content/uploads/2013/03/toriyoshi_test-168x300.png" alt="例のヤツ" width="168" height="300" /> 例のヤツ[/caption] ほとんどの方がご存知なのかもしれませんが、 僕はこれを知ったときウレしょん寸前でした。 今までは、

こんにちは、デザイナーの花ちゃんです！ Webサイトのデザインをしていると、アイコンを取り入れる場面がよくあると思います。アイコンには文字だけではわかりにくい情報を、ユーザーに対して直感的に素早く伝える効果があります。また、モチーフを簡略化しているので、限られたスペースでもしっかりその機能を果たしてくれます。 今回は、Webサイトはもちろん、図版や資料作成にも欠かせない、無料で使えるアイコン素材サイトをテイスト別にまとめてみました！ 独学でつまずいていませんか？ Illustratorの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2