はてなブックマーク

DockerでWordpressが簡単に構築できるということでMacでやってみたらわりとスムーズにできたのですが、Windowsで構築してみようと思ったらわりとつまずいたので細かく手順をまとめてみたした。 関連 【Docker入門】コンテナ型仮想化技術Dockerを使ってみた Windowsシステム要件 システム要件は公式のページに記載してあります。 https://docs.docker.com/docker-for-windows/install/ Windows 10 64-bit: Pro, Enterprise, 又は Education (Build 15063 以降) SLAT対応64-bitのプロセッサーが必要 4GB以上のメモリ Hyper-V と Containers を有効化する必要がある BIOSレベルでVirtualization を有効化する必要がある システム

様々なサービスでAIが導入されている今日此頃ですが、Webにも期待感を持たせてくれるようなFrontyのサービスが登場しました。 Frontyとは？ Frontyは、Webページのデザイン画像をアップロードするだけでAIが画像をHTMLにコンバートしてくれるWebサービスです。 複雑なレイアウトのコーディングはできませんが、ガイドラインに沿ってデザインをしておくだけで、たったの数分で簡単にHTMLコーディングしてくれる魅力はあります。もちろん、画像からコーディングした場合でもブラウザ上で簡単に修正ができるようになっています。 無料の場合には、Frontyのサブドメインに公開されますが、有料プランの場合には独自ドメインの利用もできるようになっています。 Frontyの使い方 さくっと使い方を紹介したいと思いますが、AIがコーディングしてくれるものの、複雑なレイアウトはやはり現状では難しいです

今回はマウスオーバー時のアニメーションに関する良さげなものをまとめました。 hover cssエフェクトの中から、コピペで使えるものをピックアップしています。 これまでのCSSに関するエフェクトの記事はこちら 関連 使える！CSSアニメーション 20選 様々なボタン用ホバーエフェクトHover.css 2D、ボーダー、影、吹き出し、めくり等、ボタンに使えそうな様々なhover cssエフェクトがまとめられています。 スライドするButton Hover Effects これもボタンに関する様々なhover cssエフェクトです。 グラデーションなAnimated Gradient Buttons グラデーションを使ったホバーアニメーションです。 様々な画像用ホバーアニメーションCSS Image Hover Effects ズーム、ズームアウト、スライド、回転、ぼかし、グレースケール、セピ

Adobe XDがアップデートされてどんどん使いやすくなっていますが、XDを使っているとどのように書こうかと少し迷うのが仕様書・指示書の書き方です。社内だけで共有するなら、アートボード外にでも仕様を書き込めばいいのですが、ブラウザ上で仕様をクライアントにも共有する場合にはこの方法だと機能しません。 そんなわけで、XDの仕様の書き方についていくつかの方法についてのメリット・デメリットについてまとめてみました。 関連：Adobe XDのキートリガーでプレビュー画面の移動を爆速にする方法 アートボード外に書く 一番思いつくのは、このアートボード外に仕様や指示を書き込むことでしょう。 メリット 手軽に書き込める 社内で共有しやすい デメリット ブラウザで共有した場合やプレビューでアートボード外の仕様が表示されない PC向けデザインで画面内のボタンなどの要素が多い場合には、細かく指示しづらい場合があ

以前にAdobe XD用のUI Kitをまとめましたが、今回は管理画面やダッシュボードに使えそうなテンプレートをまとめてみました。 関連：無料で利用できるAdobe XD UIKit 15選 充実したFREE Dashboard UI Kit for Adobe XD https://www.behance.net/gallery/60714355/FREE-Dashboard-UI-Kit-for-Adobe-XD サインアップ画面や、カレンダーパーツ、ラジオボタン、ステッパーなどのアイテムがかなり充実しているUI Kitです。これさえあれば、大体の管理画面は作成できるのではないでしょうか。 120以上のUI要素があるMiro FREE Dashboard UI Kit for XD https://www.behance.net/gallery/80314909/Miro-FREE-D

最近はギガ単位のデータをダウンロードすることもさほど珍しくはなくなってきましたが、ネット上の大容量のデータを受信してサービスが動作するまでに欠かせないのがローディング・アニメーションだったりします。 今回はこのローディング・アニメーションについて良さそうなものをピックアップしてみましたので、ぜひともチェックして使ってもらえればです。 関連：使える！CSSアニメーション 20選 ちょっとクール CSS loading animation 12 CSSだけで描かれたものです。 ゲームで見かける Rotate / Pulse Loading Animation ゲームで見かけそうなローディングです。 ヘキサゴンアニメーション overwatch loading by css3 ローディングでなぜか見かけることの多いような気がする六角形のアニメーションです。 CSSのみ Cube Flipping

2018年12月頃にWebサービス「remove.bg」が、画像をアップロードするだけで簡単に人物写真などの背景を自動で切り抜いてくれる画期的なサービスとして注目を浴びましたが、それがPhotoshopの拡張機能としても使えるようになっています。 使い方をざっくりと紹介します。 関連：えっ、これだけ？Photoshopの切り抜きが爆速になる「選択とマスク」機能 Remove.bgの使い方 拡張機能Remove.bgのインストール まずは、下記のURLにアクセスして拡張機能をインストールします。 Remove.bg for Adobe Photoshop https://www.adobeexchange.com/creativecloud.details.101546.removebg-for-adobe-photoshop.html アクセスしたら、「Free」をクリックしてインストール

Androidキオスク端末化の背景 Android端末で特定のアプリ以外は一切使えないように制限したい、という場合、自作のアプリであれば、下記の記事のような作り方で実現できますが、 Kioskアプリと端末の作り方　～DroidKaigi2018発表内容の要約＋α～ ソースコードのいじれないGoogle Play Storeで公開されているアプリの場合、上記では対応できないため工夫が必要です。 そこで今回は、3rd Partyアプリでキオスク端末化する方法を紹介します。 概要としては、独自ホームアプリから特定のアプリ以外は起動できないようにします。 また、端末の設定変更もできないようにします。 キオスク端末とは？ 特定の機能に絞り込んだ情報端末機器のことで、コンビニのチケット発券機や、家電量販店の写真プリント機、回転寿司屋さんなどのタッチパネルなど操作できるものもあれば、単に情報を流すだけの

画像ギャラリーを見せる手法として使われるスライドショーですが、CSSのみを使ったものやjQueryなどを使ったものなどが色々とありますが、面白そうなものを集めてみました。 関連：イケてるローディング・アニメーション25選 一味違うスライダー Canvas image slider 初見で「おっ！？」と思わせてくれることは間違いないでしょう。 エフェクトがクール WebGL Distortion Slider これはかっこいいスライダーですね。 マスクを使ったスライダー Image Slider with Masking Effect マスクを使ったCSSスライダーで、動きがシャープ＆シンプルです。 サムネイル付き Gliding Gallery | Simple Image Slider Transitions 至り尽くせりなスライダーではないでしょうか。サムネイルがあるので視覚的にもユー

CSSファイルの読み込み ローカルで読み込む 下記リンク先からCSSファイルを保存して、ファイル名を「animate.min.css」と保存します。 https://raw.github.com/daneden/animate.css/master/animate.css ローカルで読み込む場合は下記のように記述します。

UI・UXデザインに欠かせないAdobe XD。そんなAdobe XDには予めAppleのiOSやGoogleのAndroid向けのUI Kitをダウンロードして利用できるようになっていますが、Web上には無料で配布されているUI Kitもあります。 そんなわけで、良さそうなAdobe XD用のUI Kitをピックアップしてみました。 関連 Adobe XDの共有機能を200%使い倒す方法 凝ったデザインSocial Meet Up UI Kit FREE https://www.behance.net/gallery/72907227/Meetio-UI-Kit 少し変わったサンプルデザイン、そして80以上の画面デザインがあり、しかもプレビュー時の画面の動きがけっこう凝った作りになっており、Adobe XDでここまでできるのかと思わせてくれます。 「Download .xd file」の

HTML5、特にCSS3では、色々と便利なプロパティ機能が追加されていてコーディングがだいぶ楽になった部分もあるかと思いますが、それでもブラウザによっては使えない場合もあるかと思います。 そんな時に役に立つのが、そのプロパティのブラウザ対応状況を簡単にチェックできるサービス「Can I use」です。 https://caniuse.com/ 目次 Can I useの使い方 Analytics連携でさらに便利に 終わりに Can I useの使い方 サイトにアクセスすると下記のようなメッセージが表示されますので、「Import」を選びましょう。これは、例えばFlexboxの対応状況の検索結果画面に、日本でのサポート状況もデータとして表示してくれますので、インポートしておくと便利です。 Detected your country as “Japan”. Would you like to

Chromeのブラウザにはデベロッパーツールというのがありますが、それを利用することでWebページのHTMLやCSSを書き換えて素早くコーディングをしたり、動作検証をすることができます。コーディングに使えるのはもちろんですが、うまく使えばデザインをあれこれと試行錯誤することもできます。 このデベロッパーツールに似たChrome拡張機能用デザインツールにVisBugというのがあります。 VisBugとは？ VisBugは、オープンソースによるChrome拡張機能用のデザインツールです。 下記のような主な特徴があります。 Webページの要素などをクリックすると、様々な情報を表示 アートボードのようにページを編集したり、スタイルを変更できる ホバースタイルやアクセシビリティの確認、要素配置の変更も可能 レイアウトとコンテントは、様々なデバイスサイズに対応 AdobeとSketchのスキルを活用

以前にUI/UXデザイン制作の参考に！見てるだけでも楽しいアプリデザインのギャラリーサイト９選という記事でアプリに関連するUI UXの参考サイトを紹介しましたが、今回も個別に紹介したいと思います。 目次 Collect UI UI UXデザインサンプル Collect UI Collect UIは、Ahmet Sülek氏によるサイトで、Web及びアプリの様々なデザインやイラスト、およびUI / UXをパーツ別にコレクトしたギャラリーサイトです。 ざっとですが、こんなパーツデザインがまとめられています。 サインアップ チェックアウト ランディングページ 計算機 アプリアイコン ユーザープロフィール 設定 404ページ ミュージックプレイヤー SNS共有 カウントうダウンタイマー オン・オフスイッチ 検索パーツ http://collectui.com/ UI UXデザインサンプル いくつか

CSSを使ったアコーディオンと言ってもシンプルなものもあれば、ちょっとした動きを取り入れることでまったくもって違ったものになり、表現力が増します。そんなわけで今回はCSSアコーディオンで表現力をあげるためのサンプルをまとめてみました。 ファンキーなFunky Pure CSS Accordion アニメーションがファンキーなアコーディオンです。この画面で見づらい場合はリンク先にアクセスしてみてください。 多段構造によるMulti-level Accordion 多段構造によるアコーディオンメニューです。 動きがオシャレCSS + HTML only Accordion Element シンプルですが、全体的に動きがオシャレな印象を受けます。 シンプル＆安定なAccordion Menu 左サイドにアイコン、右サイドには開閉のための矢印でナビゲーションしているシンプル＆安定のアコーディオンで

デザインしている時にフォントの元データがない状態で、それに似たフォントを使ってデザインをせざるを得ない時や、偶然見つけたフォントに似たフォントを使いたい場合に役立ちそうなツールを紹介します。 関連：世界のブランドロゴのフォントが簡単に探せるFont In Logo 2024年最新版→フォント検索できる便利なツール７選〜フォントの謎を解明しよう〜 目次 Adobe Capture CC What Font Is Identifont Adobe Capture CC 最近、何かと話題のAdobeさんがiPhone、Androidアプリとして提供しているアプリの1つにAdobe Capture CCというのがあります。 これは、デザイナーの心をくすぐるような機能がいくつあり、その中の1つにフォントをカメラで撮影した写真などから文字を認識して、それと同じフォント、または似たようなフォントをピック

ブログやメールなど業務で文字入力をしているとメールアドレスや住所、メールの署名など決まりきった定型文を入力することが多々あるかと思いますが、その場合に文字入力を支援してくれるスニペットツールを使うと文字入力が格段に向上します。 関連 Windowsで複数のファイル名を一括変更できるPowerRename スニペットとは？ スニペットは英語のsnippetで「切れ端、断片」という意味を持ちますが、IT業界においてはHTMLやJavaScript、PHPなどマークアップやプログラムを書いていると同じようなコードを繰り返し書くことが多々あり、それらを再利用できるように登録を行い、簡単な入力で呼び出すことをいい、文字入力の効率を格段に向上させることができます。 簡単に言うと「定型文を呼び出す」と捉えると分かりやすいかと思います。 プログラムを書くためのエディタには標準機能として備わっているものも多

Slackではボットを追加することで、様々な機能が使えるようになりますが、機能として使いたいものの1つにアンケート投票機能があります。投票機能を持ったボットの中でもわりと目に入ってくるのがPollyです。今回はこのPollyについての使い方を紹介したいと思います。 Pollyのインストール 下記ページにアクセスしてSlackのアカウントでサインインします。 https://slack.com/apps/A04E6JX41-polly そしたら、インストールをポチッとクリック。 アクセス許可を求められますので、許可を出します。これで準備は完了です。 基本的な使い方 投票アンケートの作成 簡単な使い方を見てみましょう。 「投票」項目を作成するには、チャンネルの投稿画面で下記のように記述します。 /polly 投票アンケートタイトル 「/polly」と記述した後にスペースを空け、投票アンケートの

iPhoneやAndroidなどの端末画像にPhotoshopでデザインしたスマホの画面やキャプチャ画面をはめ込んでデザインに活かせるモックアップですが、ネット上で検索すれば無料でPSDデータとして探すことができます。 ただ、Photoshopを持っていない人にはそれは使えないものだったり、Photoshopの知識がないと使えなかったりします。そこでもっと手軽に使えるshotsnapの紹介です。 関連記事 便利すぎ！Android、Surface等のあらゆるモックアップがあるFacebook Design Devices iPhoneだけじゃない！様々な素材がモックアップとして使えるMockupWorld shotsnapとは？ shotsnapは、Gaddafi Rusli氏によるオンラインで無料で利用できるモックアップ作成サービスです。 iPhone（SE、8、X）やGalaxy S8

フロントエンドエンジニアのまめ太です。 僕の自作デスクトップアプリの一つに、起動履歴をGoogleスプレッドシートに送信し、記録しているアプリがあります。このシートでは、毎月1日に、いつの記録かをファイル名に含めてシートを別名保存したのち、コピー元のシートをクリアして新たにデータを記録できるようにしています。 この作業は、GoogleスプレッドシートとGoogleドライブ上で手動で行っているので、やっぱり面倒です。 というわけで、「一定期間おきに特定のスプレッドシートのコピーを取ってGoogle Drive上のフォルダに別名保存し、コピー元のスプレッドシートの内容をクリアする」という作業を自動化してみました。 利用した技術と構成 今回は、AWSのLambda関数として用意したNode.jsのスクリプトをCloudWatchのスケジュールトリガーで定期実行する形で自動化を行いました。 Lam

CSSフレームワークと言えばBootstrapが有名だと思いますが、今回は【軽量】なものに少しフォーカスして探してみました。言うまでもありませんが、軽量なデータはユーザーがページへのアクセスした時のストレスを軽減してくれるメリットがあります。 こちらのランディングページ用テンプレートもチェックしてみてください。 【無料】高品質でおしゃれなランディングページテンプレート10選！ FlexboxがベースのSPECTRE https://picturepan2.github.io/spectre/ GZIP圧縮で10KBという軽量なCSSフレームワークです。レスポンシブでFlexboxをベースに組み込まれています。 GZIP圧縮で6KBのMustard-UI https://mustard-ui.com/ これもGZIP圧縮で6KBの超軽量なCSSフレームワークです。オープンソースで作成されてい

新入りフロントエンドエンジニアのまめ太です。 静的サイトジェネレーター群雄割拠の時代、ホスティングサービスにも選択肢がたくさんあります。今回は、静的サイトでCMSが使えるようになるNetlify CMSと連携するNetlifyを使って、静的サイトを作ってみます。 Netlifyとは？ Netlifyは、GitHubやGitLabのリポジトリを静的サイトとして公開してくれるホスティングサービスの一つです。HTTP/2に対応し、独自ドメインやSSLなどが無料で使えて高機能ですが、一番注目すべき機能は、リポジトリに新たなプッシュがあると、webhookを受け取り、自動で更新されたサイトをビルド、デプロイしてくれる機能です。ローカルでビルドしたり、他のCIサービスを探したりする必要はありません。 https://www.netlify.com/ Netlify CMSとは？ Netlify CMS

動きがシャープなStylish Social Buttons マウスオーバー時の背景の動きがシャープです。 送信完了が分かりやすいSend button with a transition クリックして送信完了するまでの過程が分かりやすいです。 視覚をさらにプッシュするMaterial Button Hover マウスオーバーでさらに視覚に対してプッシュしてくれます。 広がるメニューAnimated Material Design Button マウスオーバーでメニューが広がります。 tの文字にも注目Twitter Button Concept 遊び心があるボタンです。 隠しボタンHidden door twitter button ツイッターフォローボタンで動きを付けたい時にオススメです。 立体的なボタンSquishy Toggle Buttons CSSだけでの表現でこんなボタンも。

前回の記事脱パワポ！Adobe XDでアプリのワイヤーフレーム作成のすすめでAdobe XDでワイヤーフレームの作成方法を見てきましたが、今回はAdobe XDの共有機能を見ていきたいと思います。 Adobe XDではプロトタイプとデザインスペックの2つの共有機能があり、それぞれの主な用途の違いは下記のようになっていますが、今回はプロトタイプの共有機能を見ていきたいと思います。 プロトタイプ 画面遷移の確認、コメント機能など デザインスペック マージンやカラー情報など Adobe XDの共有機能のいいところ 個人的に感じた良いところです。 画面単位で共有できる これもパワーポイントでワイヤーフレームや画面遷移図などを作った場合と比べてしまいますが、パワーポイントの場合、ファイルを修正したらそのファイルごとを共有することになりますが、どこを修正したのかを探すのが大変だったりします。 Adob