Slackを外部ツールと連携させて可能性を広げる《Googleカレンダー編》
Slackは外部ツールと連携し、Slack上から情報を閲覧したり編集したりすることができる。本連載ではこれまで「Zoom」や「Dropbox」との連携機能を紹介してきたが、今回は「Googleカレンダー」と連携させてみたい。 SlackとともにGoogleカレンダーのブラウザタブを開きっぱなしにし、タブを切り替えながら使っている人は多いだろう。だが、Slackでメンバーから予定を尋ねられて、Googleカレンダーのタブに切り替えて予定を確認、またSlackタブに切り替えて返事をする――こうした一手間が毎日積み重なると、年間で考えれば無視できないほどの無駄な手間になるはずだ。SlackとGoogleカレンダーを連携させて、直接SlackからGoogleカレンダー上のスケジュールも管理できれば業務効率がアップするのでオススメだ。 さっそくSlackとGoogleカレンダーを連携させてみよう。ま
あなたが知らないJavaScriptの便利すぎるショートハンド19選
日頃書いているJavaScriptをもっと短く書く方法を知っていますか？ 目からうろこ、すぐに使えるJavaScriptのショードハンドを紹介します。 JavaScriptを使うすべての開発者に向けて、私が長年かけて身につけたJavaScriptのショートハンド（短縮記法）を資料にしました。コードの違いが分かるように通常の記述方法も併記しました。 1．三項演算子 if-else文を1行に収めた短縮記法です。 通常const x = 20; let answer; if (x > 10) { answer = 'is greater'; } else { answer = 'is lesser'; } ショートハンドconst answer = x > 10 ? 'is greater' : 'is lesser'; 従来のif文を1行に収めることも可能です。 const big = x >
Photoshopはもういらない？明度も彩度も超手軽に変えられるCSSフィルターがスゴい
明度や彩度の調整から、ぼかしやグレースケール化まで。CSSフィルターを使えば、Photoshopを使わなくても簡単なコードで画像の調整ができちゃいます。しかも動画にも使える……これは便利です！ フィルターはもともとSVG仕様の一部でしたが、使い勝手がよいので、W3Cは共通のフィルター効果をCSSにも追加する取り組みを始めました。CSSフィルターはとてもパワフルで、しかも信じられないほど簡単に使えます。CSSフィルターを使えば、画像のぼかし、明るさ・彩度の調整などのほかにもいろいろなことができます。CSSフィルターは単独で使っても、組み合わせて使ってもOKです。次の構文を使ってCSSにフィルターを追加できます。 filter: <filter-function> [<filter-function>]* | none では、CSSフィルターを簡単に説明します。 明るさ 明るさ（Brightn
招待制で話題！音声SNS「Clubhouse」 なにがおもしろい!? 基本機能を紹介 (3/3)
国内ユーザーの振る舞いに注目 Clubhouseが使われ出してまだ数日、どんな使い方が適しているのかまだユーザーも探っている状況ですが、こんな使い方があるのではないかと考えてみました。 まず、セミナーのように一人で話し、聴衆が聴くスタイル。Closedにしておけば、招待制にもできるので、課金システムと組み合わせれば有料セミナーもできます。音楽の演奏を聴かせたり、Podcastのようにラジオ番組形式にしたりしてもいいですね。また、複数人が話すパネルディスカッション形式。ある話題に関して議論を重ねるのも楽しいでしょう。途中、手を挙げるユーザーがいたり、突然誰かを壇上に上げたりして発言者を増やすとますます盛り上がりそうです。もちろん、仲の良い人達だけで会話を楽しむのも良さそうです。 今のところ、Clubhouseの使い勝手を話している人が多いようですが、「憧れのアーリーアダプターと話せた」と喜ぶ
Googleマップの劣化原因「地図」になにが起こったのか？
sponsored ファッショナブルなデザインに、ヘルスケアやワークアウトの機能が充実！ 「HUAWEI WATCH GT 4」はバッテリー長持ち＆デザイン色々、あらゆる人にオススメ可なスマートウォッチの本命！ sponsored 次回の試験前にぜひ学んでほしい傾向と対策 再起の時来たれり！ インテルPCマイスター上級試験・不合格者のための補講を受けた話【筆記編】 sponsored マザーの背面コネクターって実際どう？ASUS「BTF」で組んでみたら世界が変わった sponsored 知っておいて損はなし！ 耐久性◎なCrucialポータブルSSDの選び方・使い方を大紹介 sponsored クリエイターPCの選び方 写真、動画編集、3DCGのガチプロにオススメのWindowsノートはこれでした sponsored 新色ベージュが追加＆アップデートで待望のイヤホン単体でのボリューム調整に
Backlogの「親子課題」機能で細かいタスクをまとめて管理してみる (1/2)
プロジェクト管理サービス「Backlog」の3回目は、大きな課題の中に含まれる小さな課題を親子関係で管理したり、特殊な業務に関連する属性をカスタマイズしたり、メンバー間でファイルを手軽に共有する機能などを紹介する。さらに、プロジェクト管理で重宝するガントチャート表示もチェックしてみよう。 大きな課題を小さな課題に分解して管理する親子課題機能 課題によっては、もっと細かく分解できることもある。たとえば、飲食店のFacebookページを作成する、というタスクでも、写真や動画、テキストをそれぞれ準備しなければいけないし、広告のことも考えなければいけない。そんな時は、「親子課題」という機能が便利だ。 親課題の下に複数の子課題を追加でき、まとめて管理できるようになる。その課題の進捗状況が一目でわかり、管理がしやすくなるのだ。一覧表示で折りたたんだり非表示にできるので、細かいタスクがずらーっと並ぶのも
JavaScriptのコードをファクトリ関数でシンプルに保つ方法
関数やオブジェクトの習得なくして、JavaScriptプログラマーとして成功はできません。また、関数やオブジェクトは、コンポジションと呼ばれる強力なオブジェクトパラダイムを開始するために必要な土台となります。今回はファクトリ関数を使用して関数、オブジェクト、Promiseを生成する際によく使われるパターンを説明していきます。 関数が1つのオブジェクトを返すとき、その関数をファクトリ関数と呼びます。 簡単な例を示します。 function createJelly() { return { type: 'jelly', colour: 'red' scoops: 3 }; } ファクトリを呼び出すたびに、ファクトリは「jelly」オブジェクトの新しいインスタンスを返します。 重要なのは、ファクトリ名にcreateという接頭辞をつける必要はないということです。ただし、接頭辞をつけるとほかの人たち
知らないと損！CSSのvh/vwの使いこなしでレスポンシブなサイト制作が捗る
CSSの値に指定できる単位といえば、pxや%などがおなじみ。でもレスポンシブなサイト制作では、vhやvwといったViewport単位がとても便利です。基本と使いどころを解説します。 CSSにViewport単位（Viewport Uints）が導入されてから数年になります。ブラウザーのサイズが変更されるたびに値が変わるという意味で、真にレスポンシブな単位と言えます。Viewport単位について聞いたことはあるものの、詳しいことはまったく分からないという人は、この記事で理解を深めてください。 単位とその意味 CSSにはViewportを基準とした単位が4つあります。vh、vw、vmin、vmaxです。 Viewport Height（vh）：viewportの高さに基づく。1vhはviewportの高さの1%に相当する Viewport Width（vw）：viewportの幅に基づく。1v
Macで起動しているウインドウを一画面で確認するテク
Macはスマートフォンと異なり、1つのディスプレーに複数のウインドウを開いておけるのがメリットだ。しかし、各アプリでいくつもウインドウを開いていくと、「あれってどこにあったっけ？」とさまようハメになる。 ミッションコントロールはDockやLaunchpadで「Mission Control」アイコンをクリックするか、「F3」キー（F～キーを標準のファンクションキーとして設定している場合は、「fn」キー+「F3」キー）でも表示できる そんなとき、トラックパッドを3本指で上にスワイプ（「control」＋「↑」キー）で表示される「Mission Control」機能を使えば、目当てのアプリをすぐ見つけ出せて便利だ。ミッションコントロールはOS X 10.7「Lion」から搭載された機能で、Mac OS X v10.6「Snow Leopard」にあった「Spaces」の進化版と言える。 しかし
Android実機のデバッグが激しく捗る「Webインスペクタ」
Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第4回は、Android端末に表示しているWebサイトを、Chromeデベロッパーツールで検証する「Webインスペクタ」を解説します。 特定デバイスでのバグ、表示崩れの原因を調べたい スマートフォン向けにコーディングをしていると、特定の端末でしか発生しないバグや表示崩れがあります。「特定の端末」の場合、第1回で解説した「Device Mode」では問題が再現せず、原因の特定は困難です。 原因を特定するには、バグ、表示崩れが発生した端末でChromeデベロッパーツールの「Webインスペクタ」を使って、問題のWebページを表示しながら検証します。 Webインスペクタの設定方法 Webインスペクタに使用するAndroid端末の設定を変更します。設定画面を開き、「開発者向けオプション」を表示します。
ANA国内線 Wi-Fi無料化
sponsored Radiant GZ3500Z790/D5をカスタム BTOってマジ大事。16万円台のふつ～なPCが20万円のi5＆RTX 4060のゲーミングPCに sponsored 音を知る企業による自社ブランドの第一弾製品 一生使いたいヘッドホンを見つけた。その名は「The Industrial-ist Wired」だ！ sponsored 見た目スッキリでキレイなPCが誰でも簡単に組める 自作PCの配線ゴチャゴチャは過去の話、「PROJECT ZERO」製品一覧と作例を紹介 sponsored ファッショナブルなデザインに、カロリー管理や睡眠モニタリングなどの便利機能をプラス！ スマートバンドの着け心地とスマートウォッチの高機能が両方ある！ ファーウェイ「HUAWEI WATCH FIT 3」レビュー sponsored ゲームも作業もすべてがなめらか表示 ヌルヌル動くという
ついにWindowsへ導入が始まった「Fluent Design System」5つの基本要素
10月17日に配信が始まった「Windows 10 Fall Creators Update」に導入された、マイクロソフトの新しいデザイン言語「Fluent Design System（フルーエントデザインシステム）」。コンセプトと実装へ反映する方法を解説します。 独自のデザイン言語やGoogleのMaterial Design（マテリアルデザイン）など既存の言語を実装して、統一のとれた堅牢なユーザーエクスペリエンスを提供しているリーディングカンパニーが増えてきました。デザイン言語を、直感的・魅力的で見栄えの一貫したアプリやWebサイトを作成できる「確立されたガイドライン」と考えてください。 最近マイクロソフト社は、Windows 10ベースのデバイスにおける広範な使用（つまりユニバーサルWindowsプラットホーム（UWP）アプリ対応）を目的としたFluent Design System
フォームをぐっと使いやすくする！ウィザード型jQueryプラグイン6選【2017年版】
Webサイトのフォームの作成にはjQueryのプラグインが便利。中でも対話形式の使いやすいフォームを作成できるjQueryプラグインを厳選して紹介します。 ページの更新がなく、指示に沿って記入できるjQuery用のウィザード形式のフォームを作成するためのjQueryプラグインがあります。ユーザーデータを一度に入力させる大きなフォームなら、ウィザード形式に変えることで、小さなステップの入力に分割できます。これならユーザーが長い入力フォームにうんざりすることもなくなり、進行状況も示しせます。 この記事ではおすすめjQueryフォームウィザードを6つ、それぞれの特徴を踏まえて紹介します。有料版や自作する方法も少し触れます。jQueryのフォームウィザードを求めている人の助けになれば幸いです。 1．jQuery steps jQuery Stepsはウィザード型のインターフェイスを簡単に作れる気の
知ってた？ jQueryのready()メソッドはもう書かなくていいらしい
jQueryのコードといえば、$(document).ready(function() {}で書くのがお決まり。でもそのコードの書き方はもう古いかもしれません。 jQueryでreadyメソッドはDOMが完全にロードされたタイミングでコードを実行するように実装されていました。このメソッドはすべてのDOM要素が利用可能になった時点で所定の関数を実行するので、要素へ確実にアクセスしたり操作したりできます。 jQuery 3.0がリリースされるまでは、次のように無名関数で使うのが一般的でした。 $(document).ready(function() { // Handler for .ready() called. }); jQuery 3.0での「ready()」メソッドの変更 jQuery 3.0のリリースまでは、readyメソッドを呼び出す方法はいくつかありました。 document要素
さらばjQuery！アニメーションをサクサク処理できるVelocity.jsの使い方
「jQueryのアニメーションが遅い」「CSSアニメーションは使いにくい」。そこでアニメーション処理の定番ライブラリー「Velocity.js」の出番です。基本的な使い方を一通り紹介しましょう。 本記事ではJulian Shapiroにより開発された高速かつ強力なJavaScriptアニメーションエンジン、Velocity.js（以降、Velocity）を紹介します。記事のコードやデモすべてに目を通せば、Velocityを使って自分のアニメーションが作れるようになり、サイトはさらにインタラクティブで使いやすいものになるでしょう。jQueryには頼らず、すべて素のJavaScriptだけで作ります。 この記事は『CSSライクでデザイナーに優しい！anime.jsはDOMアニメーションの新定番だ！』『HTMLもSVGもテキストも自在！DOMアニメーションの決定版「KUTE.js」が登場』の続編
長すぎるスマホサイトをスマートにリデザインする6つのコツ
スマホ対応していないWebサイトはもはや少なくなりましたが、あなたのサイトはよいUXを提供できていますか？ 「長すぎるページ」を解決するデザインのコツを紹介します。 進化の早いデジタルの世界におけるデザイナーの役割は、ユーザーに無駄な時間を使わせないようなシンプルなインターフェイスを提供することです。デザインをシンプルにした分だけ、よい多くのコンバージョンを期待できます。とはいえ、市場の大半をモバイルデバイスが占めている現在では、シンプルなインターフェイスを提供するのは簡単ではありません。 なによりモバイルデバイス経由のオンラインショッピングが増えている中で、モバイルユーザーにとって使い勝手が良いWebサイトを構築することが欠かせません。そこで問題になるのがロングスクロールのWebサイトです。 ロングスクロールページの問題 モバイルユーザーはロングスクロールWebサイトへのアクセスを敬遠し
JSプログラマーのイラッとする「クセ」はESLintを導入して対処しよう
人によって異なるJavaScriptの書き方もチーム開発では揃っていないと気持ちが悪いし、バグのもとに…。構文チェックツール「ESLint」を導入すれば、スタイルガイドに合わせたチーム開発が捗るそうですよ。 「リンティング（linting）」という言葉に聞き覚えはありますか？ コードの潜在的問題を自動的に確認するためのツール（リンター）を使ったプロセスのことです。このようなツールを使用することで生まれる、重要なメリットがいくつかあります。 コードスタイルの一貫性を保つ：スペース、インデント、ブレース（波括弧）の配置などのコードスタイルの問題をリンターで確認できる。チームの同意を得たコーディングスタイルを設定ファイルに記述しておけば自動的に確認できる 潜在的エラーや良くないパターンを見分けられる：リンターは、重複変数、到達不能コード、無効な正規表現の可能性があるエラーを発見するため、より高度
面倒な作業も発狂しない！Web制作を超効率化するgulp.jsの始め方（2017年版）
面倒なWeb制作の作業を効率化できるタスクランナー。もう使っていますか？ 現在もっともポピュラーなタスクランナーであるgulp.jsの使い方を解説します。 開発者は、限りある大事な時間をコーディングに費やします。たとえ面倒な会議をさぼっても、仕事時間の大半は地味な作業に奪われています。 テンプレートとコンテンツファイルからHTMLを生成する 新しい画像と変更された画像を圧縮する SassをCSSコードにコンパイルする スクリプトからconsoleとdebuggerのステートメントを削除する ES6をブラウザーとの互換性が高いES5に変換する コードの埋め込みと検証 CSSとJavaScriptファイルの連結と縮小 開発サーバー、ステージングサーバー、運用サーバーにファイルを展開する なにか変更があるたびに、作業は繰り返されます。作業を繰り返すうちに、一番優秀なエンジニアでさえ画像のひとつや
Web制作者なら絶対押さえたい、HTML 5.1勧告で生き残った新機能7つ
11月1日にW3Cから勧告されたHTML 5.1。およそ2年ぶりのアップデートでどこが変わったのか？ 主要な変更点を押さえておきましょう。 HTML 5.1とは 2年ほど前のHTML5スタンダードのリリースは、Web開発界隈における大きな出来事でした。一連のすばらしい新機能が搭載されただけでなく、1999年のHTML 4.01リリース以降初のメジャーアップデートでもあったからです。「モダンな」HTML 5スタンダードを意気揚々と使ったWebサイトをいまでも見かけることがあります。 幸い、HTMLの次のアップデートまでそう長くはかかりませんでした。2015年10月、W3CはHTML5で未解決となっていたいくつかの問題の修復を目的としたHTML 5.1ドラフトの策定に着手しました。多くのアップデートを経て2016年6月に「勧告候補（Candidate Recommendation）」、2016
Webサイトをもっと楽しく！モダンでスタイリッシュなGIFアニメの使い方5つ
スマホの普及、マイクロインタラクションの導入と合わせて、再評価されているGIFアニメを使ったUIデザイン。Webサイトを楽しくする活用法を5つ紹介。 ユーザーエクスペリエンスとは、「使いやすさ」だけではなく、製品やWebサイトをより心地よく、そして楽しく使えるようにすることです。Webサイトをおもしろくする方法には、注意を引くトランジション、インタラクティブ性、ビジュアル要素を取り入れる手法がありますが、GIFとCSSを組み合わせることで実現できます。 この記事では、邪魔になったり、大げさになったりすることなく、ユーザーエクスペリエンスの向上を目的としたモダンでスタイリッシュなGIFおよびCSSの使用法について例を挙げます。GIFはもはや、ネコの画像を見るためや、サボっている同僚をからかったりするためだけのものではありません。 デザインや開発しているWebサイトの訪問者を、GIFやCSSを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
