画像を読み込んでクライアントサイドでGIFに変換·gif.js MOONGIFT
gif.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 画像は高品質でサイズが大きければ良い、なんて思われがちですが決してそれだけでは価値ははかれません。そう感じさせてくれるのがアニメーションGIFの存在です。今回はクライアントサイドだけでGIFを生成するgif.jsを紹介します。 表示されているのはGIF画像ですが、実際の元画像はJPEGになります。しかも複数の画像を組み合わせてアニメーションGIFを生成する事もできます。 上の写真と比べてちょっと動いているのが分かるかと思います。速度だって自在に変更できます。 こちらはクオリティを変更できるデモ。品質を落とせばファイルサイズも小さくなります。 品質を高くすればちょっとしたノイズが目立たなくなりますが、それでもGIFの限界はあると言えるでしょう。 GIFの生成処理は重たいため、Web Worke
最低限おさえておくべき「プライバシーポリシー」のポイント（前編） | 良いウェブサービスを支える「利用規約」の作り方
プライバシーポリシーの2つの役割とはプライバシーポリシーとは、個人情報およびプライバシー情報の取り扱い方針（ポリシー）を定めた文書です。利用規約とプライバシーポリシーは、いずれもサービス提供に関する条件などを記載した文書であるため、理屈のうえではプライバシーポリシーの内容を利用規約の中に埋め込むこともできます。 しかし、個人情報やプライバシー情報を取り扱うウェブサービスは、ほとんど必ず、独立したプライバシーポリシーを用意しています。これは、それだけ情報の取り扱いに慎重さが求められていることの表れと言えます。 また、個人情報保護法においては、「利用目的」「第三者提供」「保有個人データに関する事項」などに関する規制があり、ユーザーから個人情報を収集し、また利用等をする際には、一定の事項について公表することが義務づけられています。プライバシーマークを取得している会社では、さらに法律よりも厳しいル
Erdal Inci
prostheticknowledge: InventoryProject from Oddviz is a collection of images composed of various 3D scanned objects arranged in visually satisfying compositions: Our ongoing series ‘Inventory’ is a cultural project where we dig the ephemeral characteristics of the public space and street furniture. Photogrammetry enables us to collect objects in detail and it is possible to create compositions usin
工業製品風の出力をWebに·Industrial.js MOONGIFT
Industrial.jsは体温計やタンクなどでの進捗表示ができるライブラリです。 処理の進捗を表すのにプログレスバーがよく使われますが、今回はメータグラフを使った手法を紹介します。利用するライブラリはIndustrial.jsです。 メーター表示です。液体や温度計風で面白いです。 その他LED、電光掲示板風もあります。 Industrial.jsではタンク、温度計、LED、電光掲示板、ゲージと種類が用意されています。いわゆる工業系の計測機器、出力機器を模しています。それぞれJavaScriptで指定するだけで使えるので手軽です。素材などを用意する必要もないので、プログレスバーの代わりに適用することも考えられるでしょう。 Industrial.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る リアル、ネットに限らず顧客がい
次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック集
CSSやjavascriptを利用してサイトをよりリッチな表現に変えていくというのは、WEB制作の現場では常に行われていて、様々なスニペットやライブラリが日夜リリースされています。今日紹介するのは次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック「CSS and JavaScript tools to take your website to the next level」です。 Countable.js 様々なCSSやjavascriptによるテクニックがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 iCheck クリックしたラジオボックスやチェックボックスから、返り値をとれるjavascript。それをキーにして何かを動かしたいときに。 Almost Flat UI フラットデザインUIを簡単に実装で
rel=canonical 属性に関する 5 つのよくある間違い
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
スマホサイト検索最適化の注意事項：Vary HTTP headerは別URL運用時に必要？不要？ ::SEM R (#SEMR)
スマホサイト検索最適化の注意事項：Vary HTTP headerは別URL運用時に必要？不要？ スマホサイト検索最適化において、グーグル公式の文書を読みますとスマホ版をデスクトップ版とは別のURLで運用している場合においても Vary HTTP header が必要なように解釈できますが、実際は不要です。 alternate / canonical で両版の関係性を明示している場合、Vary HTTP header はなくても問題はありません。 公開日時：2012年07月21日 01:59 今回もGoogleが発表したスマートフォンサイト構築の最適化に関する、ドキュメントに明記されていない注意事項についての話題を扱いたいのですが、本題に入る前に、私の意見を少し述べておきます。 各種アノテーションは本当にウェブマスターの役に立っているの？ 一昔前のGoogleを含む検索エンジンのオーガニッ
Should I use the Vary HTTP header on URLs that redirect based on user-agent?
What's Google's position about continuing to recommend the HTTP Vary: User-Agent header for specific mobile websites after big players like Akamai said they don't cache the URLs that include it? Would you still recommend using it? Christian Oliveira, Madrid More about redirects and user-agent detection: https://developers.google.com/webmasters/smartphone-sites/redirects Have a question? Ask it i
PhotoshopでのRetina対応リソースの生成を自動化·Retinize It MOONGIFT
Retinize ItはPhotoshop用アクションで、Retina対応のリソースを作成する作業を自動化します。 iPhone 4S以降、Retinaディスプレイに対応したリソースの作成が求められるようになりました。都度2倍にして@2xをつけて保存が面倒に感じているデザイナーの方はRetinize Itの利用をお勧めします。 Photoshopアクションが登録されました。 元画像。 保存ダイアログが出ます。この後、2倍の画像も保存確認されます。 2倍の画像が保存されました。 こちらは等倍。都度拡大して保存といった手間がなくなります。 Retinize ItはPhotoshopのアクションです。元の画像に対して等倍の画像をWeb用として保存させ、次に2倍に拡大したものをまた保存させます。繰り返しの作業は面倒ですが、F6がショートカットキーとして登録されていますので、作業負担が楽になるのでは
Treehouse Blog
January 11, 2024 in Career Advice Why Pitch Videos Unlock Career Opportunities In the ever-evolving landscape of job hunting, candidates are constantly seeking innovative ways to stand out from the crowd. One powerful tool that has gained momentum in recent years is the pitch video. Today, a well-crafted pitch video can be the… Artificial Intelligence (AI) is reshaping our world. From self-driving
FlatなUIが美しいWEBサイト２５:phpspot開発日誌
25 Best Examples of Flat UI Design Websites | The Design Inspiration FlatなUIが美しいWEBサイト２５がまとまっていました。 GoogleやMicrosoftのWindows8といいフラットなデザインが流行っています。 この背景には、作り手にとっては作りやすくて、見る側には見やすく好き嫌いがなさそう、っていうところがありそうですが、フラットなデザインでも綺麗にデザインされたサイトがあってフラットなサイトを作る際に参考にできそう。 関連エントリ HTML5を使ったクールなサイトデザイン集２１ モダンなサイトデザインのPhotoshopテンプレート１３ Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」
A/Bテストよりすごい？バンディットアルゴリズムとは一体何者か - Qiita
オバマ大統領の再選に大きく寄与したことで大きな注目を集めているA/Bテスト。A/Bテストを導入した、することを検討している、という開発現場も多いのではないだろうか。 そんな中、Web上で次のような議論を見つけた。 20 lines of code that will beat A/B testing every time Why multi-armed bandit algorithm is not “better” than A/B testing 一言でまとめると「A/Bテストよりバンディットアルゴリズムの方がすごいよ」「いやいやA/Bテストの方がすごいし」ということだ。 で、バンディットアルゴリズムとは一体何者なのか？ そこでBandit Algorithms for Website Optimization (O'REILLY)を読んでみた。その結果分かったことを踏まえてざっくりと
ソートやフィルタにも対応したレスポンシブなテーブル·FooTable MOONGIFT
FooTableはレスポンシブなテーブルデザインを行うライブラリです。 レスポンシブWebデザインにおける最大の難関はテーブルかも知れません。PCならば幅広く表示できたカラムがスマートフォンではうまく表示しきれません。そこで使い勝手を維持しつつ見栄えもいいテーブル表示にFooTableを使ってみましょう。 PCで表示したテーブル。 スマートフォン向けに縮めた場合。+記号が表示されています。 +記号をクリックすると、追加情報が表示されます。 HTMLを組み合わせた行。 こちらでもスマートフォンで表示できます。 タブレットでも調整されて表示されます。 ソート機能版。 もちろんスマートフォンでもソートが使えます。 フィルタリング。インクリメンタルに適用されます。 PCでももちろん使えます。 ソートとフィルタリングは同時に使えます。 FooTableを使う際にはタブレットやスマートフォンで表示する
A/Bテストとユーザビリティテストの使い分け
A/Bテストは、用意した複数のデザインのどちらの成果指標がよりよいか、という結果を定量的に比較検討するための手法です。いくつかのデザインの選択肢があった場合に実際にユーザーに利用してもらうことで、どのデザインが最も数値目標達成率が高いかを把握するのには有効ですが、なぜその結果になったのか、という理由を把握することはできません。デザイナーの発想の域を越えることはできず、変更すべきデザイン要素が別のものだったとしても気づくことができません（例：真の問題は、色ではなく配置だった）。 一方、ユーザビリティテストは、ユーザーの利用状況を観察することで、目的達成を妨げる問題など、定性的な洞察を得るための定性的な手法です。まだ開発途中である場合や、リリースしたあとに、ターゲットとしたユーザーがどのように思考し行動するかを把握するのに有効ですが、定量的な指標による評価にはあまり向きません（それをしようとす
25+ awesome redesign concepts
Not every designer gets the chance to work on a high-profile redesign. In fact, the vast majority will never have that chance. At least not officially. But that doesn't mean they don't have some amazing ideas about how sites like Facebook, Twitter, CNN, and other big-name sites should look. That's why a lot of designers take on conceptual redesigns of high-profile sites as personal projects. Desig
ディレクター向け、2013年ウェブデザインのトレンドのまとめ
フラット、サークル、ブラック、ブラー、写真・動画の背景、などビジュアル的なトレンドではなく、どちらかと言えば全体を包括するディレクター向けのウェブデザインのトレンドを紹介します。 コンテンツはウェブにとって非常に重要です。今後数ヵ月にわたり、コンテンツをどのようにユーザーに提供するのがよいか、スマフォ・タブレット・デスクトップなどのさまざまなデバイスにどのように適合するのがよいか、さまざまな討論がおこるでしょう。いずれにしても、これは非常に関心の高いことです。 効率的で、検索可能で、アクセシブルで、マルチプラットフォームに対応したコンテンツを作成し、最も良いインタラクションを備えてユーザーに届ける必要があります。 2. デザインとコンテンツのシンプリシティ シンプリシティは新しい方法論です。シンプリシティとは、コンテンツをアクセシブルで読みやすく、最も良いユーザエクスペリエンスを提供するも
Fast & Secure Free Premium VPN Service | Free VPN Portugal
PALADIN VPN Free VPN for Portugal to protect your privacy Why use a VPN? There are many reasons to use a VPN below we summarized the most important reasons. Protect your privacy and identity Security on public wifi Security when working remotely Access any content from anywhere Protect your data from governments, service providers, and apps According to Wikipedia A virtual private network (VPN) ex
Webサービスにおける利用規約の作り方 | PLUS
利用規約は、運用者と利用者がスムーズに利用するために必要なものですが、実際にどんなポイントを抑えて作るべきなのか、参考になる記事と実際の利用規約を見て調べてみましたので情報を共有します。WebサービスやWebサイトの利用規約作成に役立つと嬉しいです。 利用規約を作る際に参考になる記事 サイト利用規約の作成の仕方｜井藤行政書士事務所 ・サイト利用規約とは、利用条件や取引条件を示すもので、その掲載の有無は任意なもの ・契約書としての法的拘束力を確実に持たせたい場合は後者の「承諾」クリック式が有効 インターネット情報提供サービスの利用規約作成のポイント｜MBR Consulting ・利用規約の書き方の解説が丁寧でわかりやすい エンジニアも避けては通れない「安全な利用規約」の作り方 ・話題になった利用規約のケーススタディ スクウェア・エニックス、Google、Instagramなど
オフラインファーストの思想と実践
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like databaseyoshikawa_t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ANAサイトでコンバージョンを25%以上改善させた多変量テスト、そのROIは広告と比べるとどうなのか? | 事例
