Google Mapをはじめ、YouTube, Vimeo, Vine, TEDなどの動画、SpotifyやSoundCloudなどの音楽、GitHub, CodePen, JS Binなどのコードなど、さまざまなメディアをWebページに簡単に埋め込むことができるスクリプトを紹介します。 :heart:（ハート）や:smile:（スマイル）などの絵文字を使ったテキストを埋め込めます。 リンクを検出して、bit.ly, buff.ly などの短縮URLに置き換えます。 Twitterのツイートを埋め込みます。 YouTubeやVimeoの動画をAPIから取得して埋め込みます。 dailymotion, vine, TEDなどの動画共有サービスもサポート。 SpotifyやSoundCloudなどの音楽サービスもサポート。 HTML5プレイヤーにサポートされた音楽ファイル（.wav, .mp3

Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...

Web制作の「時短」に役立つChromeデベロッパーツールの活用法を紹介する本連載。第3回は、「Elements」パネル、「Sources」パネルでサイトを検証する方法を解説します。 他人のコードを効率よく調べたい！ ディレクターやデザイナーから、「このサイトみたいなデザインにしたいんだよね」と言われることってよくありますよね。また、海外のかっこいいサイトを見ていると、使われているインタラクションを真似したいと思うこともあります。 そこで、Chromeデベロッパーツールを使って、他のサイトのCSSやJavaScriptを効率的に調査する方法を解説します。 1.背景画像を100%表示しているCSSの実装方法を調べる 背景画像の比率を変えずに高さと幅をフィットさせるデザインのページを例に、Chromeデベロッパーツールの「Elements」パネルで実装を調べていきます。Elementsパネルは

週刊Webテク通信 2015年5月第3週号1位は、気をつけるべき悪いUIデザイン15選 、気になるネタは、スマートウォッチの新たな活用法--東京ドームで売り子呼び出しサービス ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2015年5月11日～5月17日の間に見つけた記事のベスト5です。 1. 15 Worst UI Design Features to Watch Out For and Overcomehttp://www.onextrapixel.com/2015/05/13/15-worst-ui-design-features-to-watch-out-for-and-overcome/ 悪いUIデザインをまとめた記事です。 避けるべきUIデザインとして以下の15個が紹介されてい

Googleアナリティクス基本の見方第三弾は、行動編となります。ここで見れるのは、サイト上でどのページの人気があるかだったり、どのページから人が離れて行ってしまっているのか。 今までのユーザー＞サマリーや集客＞チャンネルは主にサイト全体のデータでしたが、行動で見えてくるのは、各ページのデータを中心に見れます。 【第二弾】 【集客篇】Googleアナリティクス基本の見方 - スキナモノート 【第一弾】 Googleアナリティクスの基本の見方 - スキナモノート 行動＞サマリー ここでは設定した期間内にどのページが一番見られているかをチェックする事が出来ます。画面左側の【サイトコンテンツ】から【ページのタイトル】をクリックすると、URL ではなく、タイトルで表示されるので分かりやすく確認をする事が出来ます。 各タイトルをクリックする事で、詳細なデータを見る事も出来ますが、次の所で説明する部分も

歌川広重による浮世絵木版画の連作「東海道五十三次」の画像データをマーユが著作権フリーで提供している。許諾も不要でWebからコピーして利用できる。 日本橋 「東海道五十三次」は当時の東海道の道中宿場53カ所と出発点の日本橋、終点の京都を含めた55枚の作品。提供されるのは500ピクセル72dpiの画像データとなる。マーユはこれら既に著作権の切れたものを再編集しデジタル化権物として収蔵・販売している。 三島 蒲原宿 三条大橋 advertisement 関連記事 「赤富士」を再現したアポロが登場　パッケージにも北斎「凱風快晴」が映える アポロにホワイトチョコをかけると、確かに赤富士っぽいぞ！ 江戸の「猫ブーム」からみるネコ好きの普遍性　「いつだって猫展」名古屋で開催 歌舞伎の化け猫、歌川国芳が浮世絵で描いたネコ、招き猫……江戸に訪れた「猫ブーム」のネコたちから、現代と変わらぬ猫愛を知ろう。 歌川

Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...

Dedicated to JavaScript and its awesome community since 2015

スマートフォン向けのWebサイトやWebアプリを中心に、「SVG」がいま再注目されています。単なる画像フォーマットを超えて、最近ではさまざまな表現に広く活用されるようになりました。 本連載では、SVGの概要から基本的な使い方、Web制作での活用方法までをじっくり解説。CSSによる装飾やJavaScriptとの連携など、すでに使っている人がもっと使いこなすためのテクニックも紹介します。（編集部） Webの表現を広げるSVGの魅力 SVGと聞くと、「単なるベクターの画像でしょ」と思う方も多いでしょう。確かにSVGは「Scalable Vector Graphics」の略なので、ベクター形式の画像フォーマットであることには間違いありません。 一方で、SVGには、PNGやJPEGといった、他の画像フォーマットとは異なる魅力があります。SVGをWebページに使うことで、これまでのHTMLやCSSだけ

>このコツを大いに活用してグラフィックデザインに挑戦してみてください！ ソーシャルメディア向けのデザインからイベント用の招待状まで、どんなデザインであろうと使えるグラフィックデザインのアプリはたくさんあります。 ペアリングフォントやスケールから行揃えやホワイトスペースまで、デザインの世界は複雑な面を持ちます。この25のグラフィックデザインのコツが、創作過程のあれこれを通してあなたの手助けになるでしょう。 各項目をイメージした画像をクリックして、 独自のデザイン に編集してみましょう。楽しいデザインを！ 01. フォント頼みをやめて、書体を制限してみる このデザインを編集してみる シンプルかつ効果的なグラフィックデザインのために読みやすいフォントを使いましょう。いくつもの書体を使用したデザインは読みづらいものです。統一されたフォントを使うようにしましょう。 ここではAileronのフォントフ

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

Webコンテンツ制作者とデザイナー・エンジニアが交流するためのイベント「Web Creator Conference」にLIG編集長・朽木誠一郎氏とサイボウズ式編集長・藤村能光氏が登壇。Webメディアの第一線で活躍する両者が、ライティング・編集のポイントやタイトルの付け方、そして今後求められる「人材」について意見を交わします。 ライターのマネジメントの難しさ 鳥井弘文氏（以下、鳥井）：次はライティング、編集のポイントや、Webメディアというものはメンバーで一緒に作っていくもので、そういった時にどういったポイントをチームのメンバーと共有して、やっているのかということを是非お話しいただければなと思います。まず、朽木さんからお願いします。 朽木誠一郎氏（以下、朽木）：はい、LIGブログはちょっと難しいところでですね。LIGの組織の話からなんですけれども、基本的にWeb製作をメインとしてやっている

IBM Developer is your one-stop location for getting hands-on training and learning in-demand skills on relevant technologies such as generative AI, data science, AI, and open source.

2014年 Webアプリケーションフレームワークトレンド（PHP / Java / Ruby / Python / Perl）JavaRubyPythonPerlPHP はじめに 一昨日、FIFA15 でサイドバックが前線に放ったフィードが直接入って80m強の超ロングシュートとなって困惑しました。 さて、話は変わりますが、2014年12月時点の TIOBE Programming Community Index によると、昨年と比較して最もランクアップしているプログラミング言語は、Visual Basic なんですね。 そんなプログラミング言語上位20位ですが、Webアプリケーションを構築するにあたって、どの言語を採用するかというのと同じく悩ましいのがどのフレームワークを採用するかということ。 フレームワークの選定基準はアプリケーションの要件はもちろんのこと、環境や開発者、その他にも様々な

『俺の勉カレ』でFacebookやTwitter、はていなブックマークのカウントを収集していたので、 その部分を『scouter』という名前でGem化してみました。 今回Gem化するときに次のサービスまで対応させました。 * Buffer * Facebook * feedly * GitHub * Google+ * Hatena Bookmark(はてなブックマーク) * Linkedin * Pinterest * Pocket * Twitter

By the way, the picture used in the test shows a lossless compression from 960x540 = 518400 pixels = 1555200 bytes of RGB24 data to 149321 bytes, i.e. ~10x lossless compression. I couldn't reach similar size with PNG even with special tools, and JPG at this size shows visible artifacts. General thoughts Although people keep repeating "Flash is slow" it's actually pretty fast. 1.67 times slower tha