はじめに 数理情報工学実験第二という演習で、Raspberry Piをつかって何かを作ることになりました。そこでAMATERASUという自動ノート取り装置を作ったので紹介します。 そもそもRaspberry Piって? Raspberry Pi3 Model B ボード＆ケースセット (Element14版, Clear)-Physical Computing Lab 出版社/メーカー: TechShareメディア: エレクトロニクスこの商品を含むブログ (3件) を見る これです。安くて小型で色んなセンサーをつけて遊べるコンピュータです。今回はカメラモジュールを使いました。 自動ノート取り装置とは 自動ノート取りの目標は、講義を撮影した動画*1を処理することで、ノートの代わりとして使える画像を出力することです。具体的には次のgifのような画像を次々出力していくのを目標にしています。黒くな
はじめに 「新はてなブックマーク」になったということで、とっても便利になったのですが、ブックマーク一覧ページ*1が若干 JavaScript に時間が掛かっているみたいです。 というわけで 調査してみたいと思います。調査して、改善できそうなところは後で纏めて「はてなアイデア」にでも登録しようと思います。 この日記は調査しながら、過程を書いていくつもりです。 準備 まずは、人のサイトの JavaScript を書き換えて試してみるための環境を作ります。 作業用ディレクトリを作る とりあえず、ホームに HatenaJS というディレクトリを作ります。 $ mkdir HatenaJS $ cd HatenaJS CocProxy をダウンロードしてくる 以下から CocProxy というツールをダウンロードしてきます。 http://coderepos.org/share/wiki/CocPr
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph
iOS Advent Calendar 9日目担当のntakuです。 もし、iOS開発する上で一番大変なことはなんですか？と聞かれれば間違いなくUIの開発！と答えます。同じ価値や機能を提供するにしても、使っていて気持ちが良いUIであるかどうかでアプリの評価は大きく変わってくると思います。 何がベストなのか、はやはり実際にプロトタイプを作ってみないと分からないわけですが、あのアプリのUIをちょっと真似してみようと思ったり、このアプリと同じように作ってくださいと言われるとそれだけで数日かかってしまうこともざらにあります。 そんなことを繰り返していると中々アプリが完成しないわけなのですが、その期間を少しでも短縮するために、私が開発する際に活用しているのがCocoa Controlsというサイトです。 Cocoa Controls Cocoa ControlsはiOSやMax OS X開発者が開発
export const FirstVideoConfig: VideoConfig = { sections: [ { title: 'イントロダクション', bgmSrc: '/audio/bgm/honobono-wartz.wav', backgroundVideo: '/video/cyber-bg.mp4', afterMovie: '/video/yukkuri-opening.mp4', talks: [ { text: 'ねえねえ魔理沙', speaker: 'reimu', id: '59f8c2cd81334be5ab5cdc7899fad286', audioDurationFrames: 25, }, { text: 'なんだ霊夢', speaker: 'marisa', id: '0ba332a465c3404a870de15cad021407', audioD
// 👀 https://docs.microsoft.com/ja-jp/windows/terminal/customize-settings/global-settings { "$schema": "https://aka.ms/terminal-profiles-schema", "defaultProfile": "{574e775e-4f2a-5b96-ac1e-a2962a402336}", "theme": "dark", "copyOnSelect": false, "copyFormatting": false, // ダブルクリックでパスを丸ごと選択したいため "wordDelimiters": " ", // 👀 https://docs.microsoft.com/ja-jp/windows/terminal/customize-settings/profi
svg要素の基本的な使い方まとめ
この文書ではsvgをhtml埋め込みデータとして扱う際の覚書として作成した．svgの要素と属性は実際の例を踏まえて説明したつもり． 注意事項 仕様はここを参照のこと． 本文書では実際の挙動を調べつつ自分なりの解釈が入っているため，多々間違いが入ってしまうかもしれないが，気にしない． スクリプトを使ってsvg要素の中身(ソース)を出力しているため，一部実際のコードと表示されるコードとの間に差異があるが，予めご了承いただきたい． 目標は見栄えのする図形をsvgの手入力でサラっと記述できるようになることなので，複雑な図形は素直にinkscape等専用のツールを使うと良い．ただ，ここで示したことはツールを使う上でも役に立つと思う．特にアニメーションなど． svg:ベクター画像のカンバスの定義，title:タイトル，desc:説明 html文書においてsvg画像を挿入したい場合,embed要素を用い
SVGMagic
div要素の背景画像としてSVGを使用します。 SVGMagicの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。 <head> ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="SVGMagic.min.js"></script> </head> SVG画像をPNG画像に変換するのには、PHPを使用しています。 converter.php（ダウンロードファイル一式に含まれています） SVGMagic.min.js内では、配布元のサーバーのファイルを参照してい
こんにちは。id:nagayamaです。 現在僕は、はてなブックマークのディレクターという仕事をしています。Webサービスを提供するディレクターたるもの、新しいデバイスやプラットフォームがどういった仕組みになっているのかを体系的に理解しておくのは大事な事です。 今回ははてなブックマークからWindows ストア アプリがリリースされたのをきっかけに、そのアプリの開発に携わったid:nobuokaの力をかりつつ、簡単なはてなブックマークのアプリを実際に作りながら、その仕組みを学びました。 その一連の流れをチュートリアルのような形でまとめたものを公開します。実際のソースコードはGitHubでも公開しています。ぜひ最後までお読みいただき、興味がでた方は手許にcloneして遊んでみてください。 Windows ストア アプリについて Windows ストア アプリの概要は UWP アプリの概要 -
http://code.google.com/p/mobile-bookmark-bubble/ こいつを使うことでiPhone表示時に画面下側へ下記のように出せる。 1. ソースのダウンロード[Source]→[Browse]のページを開き、「bookmark_bubble.js」を落とす。 左側の「example」を開き、「example.js」を落とす。 2. HTMLへ組み込む下記の感じで組み込む。 <script type="text/javascript" src="js/bookmark_bubble/bookmark_bubble.js"></script> <script type="text/javascript" src="js/bookmark_bubble/example.js"></script> 自分の場合は整理のため「bookmark_bubble」というフ
Collie - High Performance Animation Library for Javascript
Collie is a Javascript library that helps to create highly optimized animations and games using HTML 5. Collie runs on both PC and mobile using HTML 5 canvas and DOM. Collie can stably process multiple objects using rendering pipelines and supports useful features including sprite animation and user events. Stably supports iOS and Android, and renders with an optimized method for each platform. Al
JavaScript の不思議な面白さ - 第二回
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 前回の記事「JavaScript の不思議な面白さ」はお楽しみいただけたでしょうか？ 一例として正攻法で突入していった例については賛否両論あるようです。確かに結果としてできたプログラムは見た目にも美しくなく、目を覆いたくなるばかりでした。 今回は解答編として JavaScript ならではといえる "奇妙な" 例をひとつお見せしたいと思います。ヒントは前回もちらっとお話させていただいたものです。 コード改善に向かって その前に前回の問題はなんだったのかをプログラマ視点で見ていきます。 コードが美しくないと感じるのはなぜでしょうか？ 改善するならどうすればよいのでしょうか？ ひとつの方法は "隠す" ことです。関数化・クラス化・ライ
Google Readerを使い始めました。まだまだなイマイチなところはあるけれど、Labs入りなのでお試し中ですね。 で、 Google Readerにはてなブックマーク件数とブックマークアイコンを表示(改良版) - ヒビノキロク 色んなところにfaviconを - cameraLady にインスパイアされて、Google Readerでfaviconを表示させるGreasemonkeyスクリプトを作りました。 faviconwithgooglereader.user.jsをインストール 『no title』の改良 - ドレッシングのようなを参考に、faviconが無い場合にデフォルトアイコンを表示できるようにもしました。 var showBlankIcon = true; にしてください。 上記の3名様、Google Reader開発者、Greasemonkey開発者、Firefox開
CSSでテキストに下線を引く場合、皆さんはどのプロパティを使いますか？ text-decorationかborder-bottomか、はたまたbackground-imageプロパティか…。いろいろな方法で下線を引けるために、どれを使えばよいのか迷った経験がある方もいるでしょう。 この記事ではテキストの下線を引く方法を場面別に紹介します。 たくさんの下線を引く方法があってどれが良いのかわからない方。シンプルな単語の装飾でも、3点リーダーがある場合でも、アニメーションさせる時でも、どんな時でも下線を引く方法を探している方。装飾に使えるCSSを広くサラッと知りたい方。王道の内容をおさらいしたい方。本記事は、そんな皆さんに向けた内容となっています。 場面別に下線を引く方法まとめ ▲場面別に下線を引く方法まとめ。クリックで拡大してご覧ください。 いきなりですが、場面別に最適だと考えられる下線の引
Selfkleptomaniac — 【Titanium Advent Calendar 2011：18日目】Titanium MobileでAndroid
そこで、リリースの際はTitanium Mobileのソースコードに手を入れて、直接動画プレーヤが起動するように変更して対応していたのですが、その後モジュールが書けることがわかったので、今ではMIMEタイプを渡すと適当なIntentが起動するこちらのモジュールを使って回避しています。とっても簡単なものなので、PDFビューワなどにも応用できると思います。 いずれにせよ、Android案件ではこんな苦労はしょっちゅうです。また、特に困るのがUI設計の問題です。例えばiOSでは上の画像みたいにナビゲーションバーが表示されて、その左側には何もしなくても戻るボタンがあり、また必要に応じて画面下部にタブを表示する、みたいな画面設計になるのが一般的なのですが、Androidだとナビゲーションバーというものは存在せず、タブも画面上部に並んでしまうので、どう転んでもiOSと同じものにはなりません。Andro
転勤・単身赴任というライフ・イベントがあり、すっかり更新が止まっていましたが、前回 に続き、「Rendering: repaint, reflow/relayout, restyle」から後半のレンダリング負荷を測るツールの使い方をお届けします。記事中の リフロー や リペイント といった用語は、前回記事「用語の定義」 を参照してください。 元記事は初稿が2009年12月でツールのバージョンも古いため、現時点の最新バージョンで記事を再構成しています。また実行環境によって観測結果が異なるため （非力なマシンの方がレンダリング負荷の割合が高いけど、サンプルとしては分かりやすい）、以下に本記事で試した環境を記しておきます。 dynaTrace AJAX Edition バージョン：Version: 2.1.0.603, built on 2010-12-15 ブラウザ、PC：IE8 / Wind
A sense of movement is often the differentiator between Flash-heavy web sites and standards-based sites. Flash interfaces have always seemed more alive—responding to the user’s interactions in a dynamic way that standards-based web sites haven’t been able to replicate. Lately that’s been changing, of course, with a resurgence in dynamic interface effects, helped along by JavaScript libraries that
antipop - "どこでも YouTube" を実現する Greasemonkey スクリプト YouTube Anywhere
YouTube の動画を鑑賞・収集する上で便利で素敵なサービスがいろいろと登場しています。 Qooqle Video Qooqle Video Clippers! Tubeちゃんねる: ２ch風YouTubポータル YouTubeブラウザβ＠tubeちゃんねる HATENA-TUBE ただまぁ僕の Web ブラウズのやり方は「livedoor Reader + YouTube + はてなブックマークで最速動画ウォッチング」で紹介したように、厳選したサービスを使い込む感じで、それ以外はまぁひと様のリンクとか、自分とこのブックマークに蓄積したもの経由でしか YouTube の動画を見ないだろうな、とか思うわけです。 そんな折り、かせいさんとこ - del.icio.us上のYouTubeへのリンクを直接見たりダウンロードできるGreasemonkey にて公開されていたスクリプトに触発されて、
はじめに 複数のファイルをアップロードする件でググっていたところ，SWFUpload なるライブラリの存在を知りました． SWFUpload News | SWFUpload 公開自体はもう 2年くらい前みたいですね．私は昨日初めて知りました ＞＜ Flickr や 30days Album を使って，複数ファイルのアップロードやその際のプログレス表示がかなり快いことを身をもって知りましたが，そんなことをこのライブラリで実現できるっぽいです． 使ってみようと思って ドキュメント を眺めましたが，導入のフローのイメージをつかめなかったので，サンプルをベースに組み立てて行くことにしました． サンプルには数パタンありますが，待機リストやプログレス表示のある 「Simple Demo」 が個人的に望むものに近かったので，これを選びました． This page demonstrates a simp
In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display. I'll present them in the form of an annotated HTML example to make it easy for folks to reproduce the results. Some of these techniques are more established, while others are somewhat novel. Ideally, your favorite mechanism for pub
[デブサミ関西2013] JavaScript Security beyond HTML5 Presentation Transcript JavaScript Security beyond HTML5 ネットエージェント株式会社 長谷川陽介 Developers Summit 2013 Kansai Action! #kansumiB5 NetAgent http://www.netagent.co.jp/Developers Summit 2013 Kansai Action! #kansumiB5 自己紹介 長谷川陽介 - はせがわようすけ ネットエージェント株式会社 株式会社セキュアスカイ・テクノロジー 技術顧問 セキュリティ・キャンプ Webセキュリティクラス講師 Microsoft MVP for Consumer Security Oct 2005 -
uupaa.js 0.7 の概要を、1分でざざーっと分かるように書きました。 これ自体10分で書いてるので、ノープラン・ノーチェックでお届けします。 uupaa.js のビルド uupaa.js というファイルはありません。 必要な機能を組み合わせ、ユーザがビルドして作ります。 ビルドコマンド ビルド方法を説明したスライド: http://handsout.jp/slide/1909 b.php がビルドコマンドになります(要PHP)。パッケージ名のほかに、-m -y -g -j などのオプションを指定できます。 build/b.php パッケージ名 -m -m, -y, -g は MS, Yahoo, Google 製のコンパイラで Minify します。 -j はコメントの削除とファイルの結合だけを行います。 ビルドに成功すると、 uupaa.js と build/mini.パッケージ
asこんな記事を見つけたけどそんなことないよ。Flash上でキー操作をするにはFlashにフォーカスが当たっていなければならない。フォーカスが当たっていない時にJavaScriptからフォーカス出来るか実験してみた。http://codefairy.org/etc/focus-swf.html結果。Firefox 3: 一度手でフォーカスを当てる操作をした後だとフォーカス出来るSafari 4: 無理Chrome 2: 無理IE 8: 無理むり！ less - JavaScriptからFlashにフォーカスを与えられるかこの記事ではフォーカスを得られるかどうかを MXML の Application.focusIn イベントで判別してるんだけど、ここに問題がある。簡単にまとめると、Flash を扱う場合にはフォーカスといってもブラウザが管理しているフォーカスFlash が管理しているフォー
JavaScriptのIntersection Observerでスクロールに合わせてグラデーションの色を変更する
2023年2月7日 JavaScript 新しいMacbook Proが発売され、特設ページが公開されています。そのページの中で私の目に止まったのは、Macbook Proのスペックではなく、スクロールに合わせて動くグラデーションカラーのテキストでした。今回はこれをJavaScriptの Intersection Observer を使って実装した例を紹介します。 ↑私が10年以上利用している会計ソフト！ この記事は動画でも紹介しています。動画派の方はこちらを御覧ください！ このテキストを実装したい！ Macbook Proの紹介ページにあるグラデーションカラーのテキストです。スクロールするとグラデーションの位置も変わるのがわかりますね！ Intersection Observerとは？ 従来、スクロールに合わせて要素を操るには scroll というイベントを利用していました。ただ、それだ
こんにちは。前回に引き続き、JavaScriptでUIを実装する方法を紹介していきます。 要素のドラッグ ウェブアプリでよく使われるインタフェースのひとつ、ドラッグを実装してみます。ドラッグを使用するケースは幾つかありますが、今回は投稿用フォームをドラッグで移動できるようにするという使い方を想定してみます。 投稿フォームで入力する際、そのページのコンテンツを見ながら入力したいということはよくあります。フォームを好きな位置に移動できればそれが実現できます。 ドラッグの基本HTML <div class="js-drag" id="js-drag-1"> <form class="js-drag-form" onsubmit="return false;"> <textarea></textarea> <input class="submit" type="submit" value="送信"
JavaScriptでモジュールを作ろう！ - kaz_konno's blog: walkthisway
マーケットプレイスを良く見て行くと、様々なモジュールやテンプレート、デザインなどが揃っています。英語が分からない人でもスクリーンショットなどを見ればどんなものなのか分かるはずなので、是非じっくり回遊してみてください。 さて、Titanium Mobile用のモジュールを作るには、通常Objective-CやJavaで書く事になりますが、実はJavaScriptでもモジュールを作ることができます。実際、マーケットプレイスにJavaScriptで書かれたモジュールもいくつか見つかります。 これまで自分には無関係と思っていた人も、アイデア次第ではJavaScriptベースのモジュールで小遣い稼ぎができるかもしれませんよ〜！ モジュールの一番の目的は、Titanium Mobileに足らない機能をモジュールによって拡張することです。しかし、それ以外にライブラリ的などのように、開発の効率化を図るため
画像周りの速度メモ - #生存戦略 、それは - subtechの件。 最終手段として、CSSを使う。 .hatenastar{ display:inline-block; width:11px; height:10px; background:url('http://s.hatena.ne.jp/images/star.gif'); } (function(){ var now = new Date*1; for (var i = 0; i < count; i++) { var span = document.createElement('span'); span.className = 'hatenastar'; container.appendChild(span); } document.title += ' css:' + ((new Date*1) - now); })();
「"どこでも YouTube" を実現する Greasemonkey スクリプト YouTube Anywhere」で公開したスクリプトを、せっかくなので、LDR にも対応してみました。「livedoor Reader + YouTube + はてなブックマークで最速動画ウォッチング」と「"どこでも YouTube" を実現する Greasemonkey スクリプト YouTube Anywhere」を足して 2 で割らない感じ。つってもまぁ、最低限 LDR 上で動くようにしただけなのがアレ。それなりに動くので、まぁいいや。あと、ついでにnirvashの日記に触発されて、Qooqle Video Clippers! と HATENA-TUBE のフィードにも対応。 使いかたを再度説明。 LDR 上では、YouTube, Qooqle, HATENA-TUBE の動画エントリを見てる時に、シ
『http://kengo.preston-net.com/archives/002866.shtml』経由 はてブと Google のリストに favicon を表示できる Greesemonkey スクリプトがあった]ので導入してみました．そこのコメントで議論されているように，favicon.ico が存在しないサイトがあるとガタガタになってしまう欠点があります．製作者の jun29 さんと同じく，私も favicon があると楽しいですから，それで全然問題無いです． でもやっぱり，favicon.ico が無いサイトには Firefox のデフォルトアイコンを表示させたいですよね．そこで，スクリプトを改良しました． 改良版スクリプト それぞれのスクリプト名には 2 って付けて違うものにしてあります．同時にインストールした場合は，どちらかを Disable にしましょう． まず Goo
アイキャッチ画像とは 、読者やユーザーの目（アイ）を引きつける（キャッチ）ための看板です。アイキャッチ画像に惹かれて、記事を読むことも多いですよね。 Canvaというアプリでアイキャッチ画像を作る具体的な方法と、ブログのトップ画面に出てくるアイキャッチ画像が見切れる問題に悩まされていたのですが、こちらも解消したのでそれについても書きたいと思います。 Canvaでアイキャッチ画像を作るスマホアプリ出なくてもパソコンでももちろん使用できます。 Facebook、Google、メルアドのどれかで登録します。 今回、作成にほんの少し時間のかかったこの記事のアイキャッチ画像を見本に説明していきます。 ホーム画面の右下にあるプラスマークをクリック。 サイズを選択、Blogバナーを選んでいます。 また右下のプラスマークをクリックします。 画像をクリック。 自分が撮った写真を使用したいならギャラリーを、C
Titanium MobileはJSでネイティブアプリが作れる開発環境です。 Titanium Mobile Application Development | Appcelerator 正確にはJSで記述したコードをAndroidやiPhone等のネイティブコードへ変換し、それらをコンパイルすることでネイティブアプリ開発を実現しています。 一つのコードでiPhone、Android等のアプリを作れるのでとても便利そうです。 以前僕が書いたListViewをカスタマイズするをTitaniumで実装してみて、実際に何がどのように違うのかを試してみたいと思います。 開発環境 開発するマシンはWindowsでもMacでもどちらでもOKですが、iPhone用アプリも作りたい場合はMac環境が必須になります。 Titaniumの開発環境構築については、既に多くの優良記事が公開されているので、今回
画面の下からフィードバックフォームをスライド表示して固定する - fixedUI プラグイン - Postal Search Ajax API with jQuery - Postal Search APIs & Solutions
WEB ブラウザの画面下に指定したブロック要素を固定して表示する jQuery プラグインです。ページをスクロールしても、指定したブロック要素を常に WEB ブラウザの画面下に表示します。 また、固定したブロック要素は表示や非表示の指示ができます。表示を指示すると、画面下からブロック要素をスライドしながら表示します。非表示を指示すると、画面下にブロック要素をスライドしながら隠します。 同じ効果のある jQuery Catfish Advert Plugin という jQuery プラグインもあるのですが、配布していたサイトが休止?していて入手できなくなっています。今後、再開してメンテナンスするのかもかわかりません。それじゃということで jQuery Catfish Advert Plugin と同じ振る舞いをするプラグインを自ら作ってみたわけです。 ダウンロード jquery.fixedU
InDesign Hacking with JavaScript Adobe 社の DTP ソフトウェア「InDesign」 (Amazon) は、JavaScript (および macOS 版では AppleScript、Windows 版では VBScript) を使って内部オブジェクトにアクセスできるようになっており、手動では面倒な作業を自動化することができます。 バージョン CS2 以降では XML 処理の機能も向上しており、ますますの自動化を期待できます。 このページでは、kmuto が作成したスクリプトを公開しています。ファイルをアプリケーションの指定のフォルダに置くことで、Windows/macOS の両方で動作します。 CS2: アプリケーションのPresets\Scriptsフォルダに配置します。 CS3 Windows版: ユーザのApplication Data\Ad
SpriteMachine - Create css sprite images easily! CSSスプライトをドラッグ＆ドロップで生成できる「SpriteMachine」。 簡単な設定の後、ZIPファイルをブラウザにドラッグ＆ドロップすればスプライトファイルがダウンロードできるというもの。 お手軽で便利ですね。 ただ、個人的には、毎回全部アップロードするのは面倒だと感じるので、画像を新しく追加したい場合に、それまでの画像はそのまま使えて新しい物のみのCSSを表示してくれるなんていうツールがあったらよく使いそうだなと思いました。 関連エントリ CSSスプライトをブラウザにD&Dで速攻作れる「Instant Sprite」 サーバ側でCSSを保存したら直ぐにCSSが反映されるようにできる「CSSreflesh」 BackgroundImageでスプライトアニメーションさせるjQueryプ
IntersectionObserverではてなブログ記事内のApple Musicを自動再生する - Log
Twitterに要件定義が転がっていたのでIntersectionObserverを用いて実装しました。 github.com 以下のコードを記事のどこかに貼り付けると、画面右下に自動再生ボタンが表示されます。自動再生ボタンを押すと、画面で見えている「iTunes商品紹介」を自動で再生するようになります。 <span></span><style> #autoplay-btn{color:gainsboro;background-color:#fff;background-size:cover;position:fixed;bottom:5%;right:10%;width:60px;height:60px;border:5px solid currentColor;border-radius:100%;cursor:pointer;z-index:10000}#autoplay-btn.d
How to Generate Noise with Canvas デモページ（当方作成） [ad#ad-2] JavaScript function generateNoise(opacity) { if ( !!!document.createElement('canvas').getContext ) { return false; } var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), x, y, r, g, b, opacity = opacity || .2; canvas.width = 100; canvas.height = 100; for ( x = 0; x < canvas.width; x++ ) { for ( y = 0; y < canvas.heigh
If you have a home page you might like to show images in an image gallery. There are numerous of different solutions for this on the web. In this guide you will learn to create your very own script for a image gallery using JavaScript and the open source free jQuery library.These are the basics of the image gallery: No server-side scripting Super-fast browsing without fades Dead-simple HTML with a
Ajax » jQuery plugin » ナビゲーション、メニュー | PHP & JavaScript Room
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説どのイベントが発生した時にアニメーションを開始するかを指定します。指定しない場合は、すぐにアニメーションが開始されます。2つのイベントを指定すると、1つ目のイベント発生時に現在のスタイルからホバー時のスタイルにアニメーションし、2つ目のイベントで元のスタイルにアニメーションしながら戻ります。 設置イメージ 設置サンプルサンプルを見る<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml
はてなブログProでトップページを一覧表示できるようになったので、それを使ってカード型のレイアウトにするカスタマイズを考えてみました。残念ながらcssだけでは思うようになりませんが、いくつかのコピペだけでできます。 今回は例として、多くの人が使っているテーマ「Brooklyn」で試しています。ほかのテーマでも、多少の調整は必要だとは思いますが、概ね同じようにできると思います。 一覧表示にする まず、ブログのトップページを今回追加された「一覧表示」にしてみましょう。 ブログの設定から詳細設定→トップページの表示形式で「一覧形式」を選択すればOKです。 これでトップページが一覧表示になりました。一覧表示と言うかarchiveページとほぼ同じです。同じではつまらないので、これを「ZENO-TEAL」のようなカード型にしてみます。 javascript はてなブログのデザインカスタマイズから、ヘッ
#WWDC21cafe iOSの新しい技術の情報交換をするWWDC2015 情報共有会に行ってきた！ - もぐめぽろぐ
complicationとは watchOS2に搭載されました ClockFace上に配置される領域に情報を表示できる 表示内容はカスタマイズが可能 表示内容にはtextとImageが使用可能 過去と未来の状態を確認できる「Timetravel」機能がある 用語解説 complicationの表示パーツ(PlaceHolder)は、CLKComplicationTemplateで構成する CLKComplicationTemplateの表示情報の中に、CLKImageProviderとCLKTextProviderで作成する。 UIImageとNSStringじゃないです。 CLKImageProvider backgroundImageやbackgroundColor, foregroundImage, foregroundColorを指定できるが、backgroundImageは必須
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Raspberry Pi3で自動ノート取り装置を作った - いきるちから
はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ | Blog hamashun.com
そのUI, まずはCocoa Controlsで探してみよう - プログラミングノート
React で作るゆっくり解説 feat. Remotion
Windows TerminalとPowerShellでクールなターミナル環境をつくってみた
Windows ストア アプリの作り方 - Hatena Developer Blog
iPhoneの「ホーム画面追加」を促す | Agnist.code
Google Readerでfaviconを表示 - 札幌市西区
CSSで下線を引く方法まとめ - 様々な装飾方法とアニメーションに適した指定まで - ICS MEDIA
ブラウザ動作の理解－レンダリングの負荷を測る | ゆっくりと…
CSS Sprites2 – It’s JavaScript Time
複数ファイルのアップロードを可能にしてくれるSWFUploadを今さらながら触ってみた « 岩家ぶろぐ
Maximally optimizing image loading for the web
[デブサミ関西2013] JavaScript Security beyond HTML5
uupaa.js 基礎知識なんちゃってマスター - latest log
JavaScriptからFlashにフォーカスを与えられるよ - てっく煮ブログ
第22回 JavaScriptによるUIの実装：ドラッグ | gihyo.jp
大量に同じ画像を表示したいとき - os0x.blog
antipop - Update LDR で最速動画ウォッチング YouTube Anywhere
『 色んなところにfaviconを - cameraLady 』の改良 - ドレッシングのような
アイキャッチをCanvaで作る！ブログのトップ画像が見切れる問題も解消 - 白い平屋の家を建てました
巷で噂のTitanium MobileでAndroidアプリを作る | Android Techfirm Lab
Hacking InDesign with JavaScript
CSSスプライトをドラッグ＆ドロップで生成できる「SpriteMachine」:phpspot開発日誌
[JS]画像を使用せずに、canvasでテレビの砂嵐を描くチュートリアル
Lightweight Image Gallery with Thumbnails | David’s kitchen
はてなブログProでトップページを一覧表示にして更にカード型にするカスタマイズ - FOXISM