サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
lab.syncer.jp
2017/08/15 はてなブックマークで、ユーザーが初めて付けたはてブを調べるサービスです。どんな記事をブクマしていたか久しぶりに思い出してみてはいかがでしょうか。 確認調べたいユーザーのidを指定して下さい。 結果をTwitterでシェア 埋め込み用コード下記のHTMLをコピー&ペーストすれば、結果をあなたのウェブサイトで表示できます。はてな公式の埋め込み方法です。 ヒント使い方フォームに初はてブを調べたいユーザーのidを入力して、「確認」をクリックして下さい。1〜25秒ほどお待ち下さい。下に結果が表示されます。ユーザーによっては時間がかかります。このウェブサービスは、はてなが提供するAPIを利用しています。はてなのサーバーが調子悪い時などは正常に取得できません。時間をおいて再度お試し下さい。結果のシェア「Twitterでシェア」というボタンから、結果をTwitterでシェアできます。
2017/08/05 JavaScriptで、スクロールを終了したタイミングで処理を実行したい時は、scrollイベントとsetTimeout()を利用しましょう。 サンプルコード下記は、スクロールを停止して500ms経った時に終了判定として処理を実行する例です。用途により、500の部分を調整しましょう。 var timeoutId ; window.addEventListener( "scroll", function () { // スクロールを停止して500ms後に終了とする clearTimeout( timeoutId ) ; timeoutId = setTimeout( function () { // 処理内容 }, 500 ) ; } ) ;デモスクロールを停止した時に、カウントが増加するのを確認して下さい。 var timeoutId ; var count = 0
2017/08/04 Twitterのユーザーのアイコン画像、背景画像、ヘッダー画像を保存できるサービスです。2017年のアップデートでアイコンが画像ごと丸められてしまい、四角い元画像を保存できなくて困ったのがきっかけで作成しました。 ユーザーの指定プロフィール画像を取得したいユーザーのスクリーンネーム(例: @arayutw)を入力して下さい。
2017/07/30 input要素やtextarea要素に値をセットするには、valueプロパティに代入しましょう。 サンプルコード目的のinput要素を取得して、そのvalueプロパティに値を代入して下さい。 // <input id="target"> document.getElementById( "target" ).value = "SYNCER" ;textarea要素の場合も同様です。innerHTMLやtextContentではなく、valueに代入しましょう。 // <textarea id="target"></textarea> document.getElementById( "target" ).value = "SYNCER" ;デモinput要素とtextarea要素、それぞれに値をセットするデモです。 input要素
2017/10/05 scrollRestorationは、Historyのプロパティです。「戻る」や「進む」などでブラウザの履歴エントリー間の移動があった時、スクロール位置を復元するか否かを指定できます。 概要名前scrollRestoration所属HistoryIDLattribute ScrollRestoration scrollRestoration; enum ScrollRestoration { "auto", "manual" };仕様書https://html.spec.whatwg.org/multipage/history.html#dom-history-scroll-restoration説明下記のキーワードを文字列で指定する。 auto初期値。スクロール位置を復元する。manualスクロール位置を復元しない。プロパティの値は、履歴エントリーごとに保持されます
2017/07/30 ラジオボタンを選択状態にするにはcheckedプロパティにtrueを、選択状態を外すにはfalseを代入します。 サンプルコード単一1つの要素を指定する場合です。 <input id="target" type="radio">// 要素を取得 var element = document.getElementById( "target" ) ; // 選択状態にする element.checked = true ; // 選択状態を外す element.checked = false ;グループラジオボタンのグループのどれが選択状態かを確認する方法です。 form要素内form要素内のラジオボタンのグループだったら、form要素を起点として要素を取得すると何かと手軽です。一般的なブラウザならRadioNodeList、Ie、EdgeならHTMLCollectionと
ヒント使い方グラフのタイトルを入力して下さい。不要な場合は空白にして下さい。各データの「項目名」「値」「色」を入力して下さい。「項目を追加」のボタンを押すと、項目を追加できます。「この項目を削除」のボタンを押すと、項目を削除できます。「画像を作成」のボタンを押すと、下に画像が作成されるので、それを保存してご利用下さい。プライバシーグラフを作成する処理は、全てあなたの端末内(ローカル環境)で行なわれます。入力したデータなどが当サイトのサーバーに送信されることはないのでご安心下さい。スペシャル・サンクスグラフ作成のアルゴリズムは、Chart.jsを利用させていただきました。
2017/08/09 ユーザーの入力した値によって背景色を変更すると、文字色と重複して見えなくなってしまうケースがあります。背景色によって、文字色は白がいいか黒がいいかを判定するには、W3Cで公開されているアルゴリズムを利用しましょう。 サンプルコード背景色から適した文字色が白か黒かを判定する関数です。引数、返り値、共にhex(例: #ff0000)の値です。 function blackOrWhite ( hexcolor ) { var r = parseInt( hexcolor.substr( 1, 2 ), 16 ) ; var g = parseInt( hexcolor.substr( 3, 2 ), 16 ) ; var b = parseInt( hexcolor.substr( 5, 2 ), 16 ) ; return ( ( ( (r * 299) + (g * 5
2017/08/09 JavaScriptでその要素が、ある集合の中で何番目にあるかを知りたい場合は、配列メソッドのindexOf()を利用するのがお手軽です。HTMLCollectionから配列を作成してやる必要があります。 サンプルコード#targetのli要素が、何番目に配置されているかを取得する例です。番号は0から数えます。 <ul> <li>あ</li> <li>い</li> <li id="target">う</li> <li>え</li> <li>お</li> </ul>// 要素が含まれる集合オブジェクト (HTMLCollectionなど) var elements = document.getElementsByTagName( "li" ) ; // 番号を知りたい要素 var element = document.getElementById( "target" )
2017/07/31 表示されているサイズではなく、画像の本来のサイズを取得したい場合は、img要素のnaturalWidthとnaturalHeightを参照しましょう。 サンプルコード画像の読み込みが完全に完了していないとnaturalWidth、naturalHeightの値は取得できません。読み込みが完了してから処理が実行されるよう、工夫して下さい。 img要素から取得<img src="image.png" id="target">var element = document.getElementById( "target" ) ; var intervalId = setInterval( function () { if ( element.complete ) { var width = element.naturalWidth ; var height = element
2017/07/29 JavaScriptで、base64エンコードされたData URIの文字列からBlob(File)を作成する方法を紹介します。例えば、localStorageなどで画像をData URIで保存させて再訪時に取り出す時、Blobに変換して扱えたら何かと便利なことが多いです。 サンプルコード// 対象の文字列 var dataURI = "data:image/png;base64,iVBORw..." ; // "iVBORw..."をバイナリに変換 var byteString = atob( dataURI.split( "," )[1] ) ; // "image/png" var mimeType = dataURI.match( /(:)([a-z\/]+)(;)/ )[2] ; // バイナリからBlobを作成 for( var i=0, l=byteSt
2017/08/06 円周上の座標を求める公式を、JavaScriptで実装します。 サンプルコード原点A(x1,y1)、半径r、角度θとする時、円周上の座標B(x2,y2)は次の公式で求められます。 公式をJavaScriptで表現すると、次の通りです。角度はラジアン単位で取り扱う点にご注意下さい。 var x2 = x1 + radius * Math.cos( angle * (Math.PI / 180) ) ; var y2 = y1 + radius * Math.sin( angle * (Math.PI / 180) ) ;デモコードを編集して、値にどのように反映されるのか確認してみて下さい。 var x1 = 0 ; var y1 = 0 ; var r = 100 ; var a = 45 ; var x2 = x1 + r * Math.cos( a * (Math.
2017/09/15 a要素のdownload属性はハイパーリンクを、リンク先ファイルをダウンロードする仕様に変更する属性です。基本的に、JavaScriptなどで作成したBlobや、インラインのData URI、同じオリジンの元にあるリソースに対して有効です。 概要要素a要素DOM InterfaceHTMLAnchorElement.download仕様書https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-download値ローカルに保存されるファイル名を表す文字列。ただし、同じオリジン元のリソースでないと値は無効になる。値は省略でき、この属性を持つだけで、そのハイパーリンクはダウンロードする仕様になる。 <a href="./image.png" download>画像を保存</a> <a href="./
サンプルコード下記のHTMLCollectionを配列に変換します。 // HTMLCollectionを取得 var elements = document.getElementsByClassName( "hoge" ) ; // 配列じゃないので、配列のプロトタイプメソッドは利用できない elements.forEach( func ) ; // Error一般的なブラウザの場合Array.from()を利用します。Ie以外は対応しています。 // 配列に変換 elements = Array.from( elements ) ; // 配列なので、配列のプロトタイプメソッドを利用できる elements.forEach( function ( element ) { console.log( element.tagName ) ; } ) ;Ieに対応する場合何らかの事情でIeにも
2017/07/31 いわゆるズームです。タッチデバイスのピンチイン、ピンチアウトの動作を検出し、それによって画像を縮小、拡大してみましょう。難易度は高く、タッチした位置の取得方法など基本的な知識がある方を前提にしています。 サンプルコード要点はピンチイン、ピンチアウトを開始した時と、指を動かした時の距離の比率を求めることです。 基本の距離2本以上の指でピンチイン、ピンチアウトを開始した時の、2点間の距離を基本の距離(baseDistance)とします。touchstartイベントで距離を取りたいと思いがちですが、ここで重大な問題があります。2017年8月現在、Androidだとtouchstartイベントで1ヶ所のタッチしか受け取れません。だからtouchmoveイベントでまかないましょう。 JavaScript // 基本の距離 var baseDistance = 0 ; // 距離
2017/06/22 文字列の先頭、末尾、それぞれから指定した数だけ文字を取得します。 サンプルコードvar str = "あいうえお" ; // 先頭から2文字を取得 var a = str.slice( 0, 2 ) ; // 末尾から2文字を取得 var b = str.slice( -2 ) ;デモ先頭を取得先頭の1文字を取得する例です。1の数字を変更すれば、先頭2文字、先頭3文字というように調整できます。
2017/09/09 はてなブックマークで、今までで最もブックマーク数が多かった記事を、ランキング形式でまとめてます。過去の人気エントリーを振り返られるよう、年月日別にアーカイブをしています。 集計期間このページでは、歴代(2005年2月10日〜2023年7月26日)のランキングを表示しています。過去の集計を確認したい方は、下記のリンクからご覧下さい。 2005年2月 | 3月 | 4月 | 5月 | 6月 | 7月 | 8月 | 9月 | 10月 | 11月 | 12月2006年1月 | 2月 | 3月 | 4月 | 5月 | 6月 | 7月 | 8月 | 9月 | 10月 | 11月 | 12月2007年1月 | 2月 | 3月 | 4月 | 5月 | 6月 | 7月 | 8月 | 9月 | 10月 | 11月 | 12月2008年1月 | 2月 | 3月 | 4月 | 5月 | 6月
2017/07/31 2点の座標の距離を求める公式を、JavaScriptで実装します。 サンプルコードA(x1,y1)、B(x2,y2)の距離は次の公式で求められます。 公式をJavaScriptで表現すると、次の通りです。 var x1 = 10 ; var y1 = 20 ; var x2 = 30 ; var y2 = 40 ; var a = Math.sqrt( Math.pow( x2-x1, 2 ) + Math.pow( y2-y1, 2 ) ) ;デモ(x1,y1)と(x2,y2)の座標間の距離を計算します。 var x1 = 10 ; var y1 = 20 ; var x2 = 30 ; var y2 = 40 ; var a = Math.sqrt( Math.pow( x2-x1, 2 ) + Math.pow( y2-y1, 2 ) ) ;
2017/09/14 JavaScriptで、要素のclass属性値を取得したり、変更する方法をまとめています。 サンプルコード一連の説明には下記の要素と、element変数を用いてます。 <a class="hoge fuga piyo" id="target">リンク</a>var element = document.getElementById( "target" ) ;取得class属性値を取得するには、classNameプロパティを参照しましょう。 // <a class="hoge fuga piyo" id="target">リンク</a> var a = element.className ; // "hoge fuga piyo"一括編集class属性値の全体の内容をまとめて編集するには、classNameプロパティの値を変更しましょう。 // <a class="ho
2017/06/22 見出しと説明をペアで意味付けできるdl要素。dt要素の横幅がある程度揃っている場合は、dt要素とdd要素を横並びにした方がデザインがすっきりするでしょう。 サンプルコード基本的にdt要素にfloat: leftを設定するだけで横並びになります。 dt { float: left ; }Safariの場合、dt要素とdd要素の上下がズレてしまうため、高さを揃えておきます。24pxは大体の、行の高さです。 dt, dd { min-height: 24px ; line-height: 24px ; }デモ見出しを揃える場合dd要素のmargin-leftプロパティには、dt要素の横幅より少しだけ大きい値を指定しましょう。 <!-- このコードは編集できます。 --> <!DOCTYPE html> <html> <head> <style> dt { float: le
2017/06/22 画像などにホバーした時、回転させるにはtransformプロパティを利用します。その他諸々、回転を綺麗に見せるために調整しなければいけません。 サンプルコードホバー時に90度回転させる例です。 div:hover .target { transform: rotateZ( 90deg ) ; }デモZ軸Z軸を基軸とした回転をする例です。コンテナとなる要素(.container)で囲まないと上手く回転しません。2箇所あるrotateZの部分を、rotateX(水平方向)、またはrotateY(垂直方向)にすることで回転方法を変更できます。 <!-- このコードは編集できます。 --> <!DOCTYPE html> <html> <head> <style> .container { width: 100px ; height: 100px ; line-height:
@arayutwのTwitter歴は、2013年6月19日(水)に開始して10年4ヶ月(3,792日)です。 これまでの平均ツイート数は、9.8/日です。 結果をTwitterでシェア ヒント使い方フォームに、Twitter歴を調べたいユーザーのスクリーンネーム(例: @twitter)を入力して下さい。非公開アカウントも調べられます。「確認」をクリックすると、「登録日」「経過年月」「経過日数」「平均ツイート数」が表示されます。シェアTwitterにシェアすると、次のように取得したTwitter歴の専用画像がタイムラインに表示されます。 [@]arayutwのTwitter歴は4年3ヶ月で、平均ツイート数は19.5回/日です。 https://t.co/2lhVgdB6Jj — あらゆ (@arayutw) 2017年10月13日
公開日: 2016/03/09 | 更新日: 2017/08/10 WEBPコンバーターは、JPEGやPNGをWEBPに、WEBPをPNGに変換するウェブサービスです。画質を保ったまま、圧倒的に容量を圧縮できるWEBPをウェブサイトで活用していきましょう。Chromeにのみ対応しています。 ヒントJPG、PNGからWEBPに変換する「変換前の画像」という項目にある「ファイルを選択」を押して、PNGかJPGのファイルを指定して下さい。「変換後の画像」という項目に、WEBPに変換した画像が表示されるので保存して下さい。WEBPからPNGに変換する「変換前の画像」という項目にある「ファイルを選択」を押して、WEBPのファイルを指定して下さい。「変換後の画像」という項目に、PNGに変換した画像が表示されるので保存して下さい。プライバシーについてここで使用した画像は、当サイトのサーバーにはアップロー
2017/09/07 Twitterで、自分以外のユーザーとユーザー同士がフォロー関係にあるかなどを調べるサービスです。意外と調べるのが面倒なので作ってみました。 関係を調べる関係を調べたい2人のユーザーのスクリーンネーム(例: @twitter)を入力して下さい。非公開アカウント同士を調べる場合だけ、どちらかの関係者(本人、またはフォロワー)のログインが必要です。 ヒント使い方2つのフォームに、関係を調べたいユーザーのスクリーンネーム(例: @twitter)を入力して下さい。順番は関係ありません。「確認」をクリックすると、どちらがどちらをフォローしているか、フォローしていないかの関係が表示されます。ログインについて非公開アカウントAと、非公開アカウントBの関係を調べる場合にだけ、どちらかの関係者(本人、またはフォロワー)によるログインが必要です。どちらかが公開アカウントの場合はログイン
2017/10/20 createObjectURL()は、URLのメソッドです。Blob、Fileを参照するための一時的なURLを作成します。 概要名前createObjectURL所属URLIDLstatic DOMString createObjectURL(Blob blob);仕様書https://w3c.github.io/FileAPI/#dfn-createObjectURL説明引数(blob)には、URLを作成するBlob、Fileを指定する。作成したオブジェクトのURLを返す。 このURLはドキュメントが生きている間だけ有効であり、別ページに遷移するなどしてアンロードすれば無効となる。 作成したURLはrevokeObjectURL()で削除できる。不要になったURLはその都度、削除してメモリを解放するのが望ましい。 チュートリアルこのメソッドはコンストラクタ関数です。
公開日: 2017/06/22 | 更新日: 2017/07/14 文字列の先頭、末尾、それぞれから指定した数だけ文字を削除します。 サンプルコードvar str = "あいうえお" ; // 先頭から2文字を削除 var a = str.slice( 2 ) ; // 末尾から2文字を削除 var b = str.slice( 0, -2 ) ;デモ先頭を削除先頭の1文字を削除する例です。1の数字を変更すれば、先頭2文字、先頭3文字というように調整できます。
公開日: 2017/07/24 | 更新日: 2017/08/29 はてなブックマークのビューアーで、個人的に使いやすいと思うものを作ってみました。見たくないウェブサイトを、urlでフィルタリングできます。 カテゴリ総合世の中政治と経済暮らし学びテクノロジーおもしろエンタメアニメとゲームエントリー人気新着設定フィルタリング見たくないサイトのurl(例: https://syncer.jp/)を1行に1つ入力して下さい。パスは1つ目のフォルダ(例: https://blog.livedoor.jp/hoge/)まで指定可能です。一覧から非表示になります。フィルタリング処理はローカル環境で行なうため、増やしすぎると動作が遅くなります。嫌いなサイトは50個くらいまで厳選して下さい。設定の肥大化を避けるため、1ヶ月間、フィルターに引っかからなかったurlは設定から削除されます。 保存設定はローカル
ページ上部にある「小窓で開く」をクリックした時の画面サイズと位置を設定します。1つのパラメータはwidth=400、各パラメータの区切りは,です。例えばright=50,top=100なら「右から50px、上から100px」の部分に小窓が開かれます。利用できるパラメータはwidth(横幅)、height(高さ)、left(左)、right(右)、top(上)、bottom(下)です。
次のページ
このページを最初にブックマークしてみませんか？
『SYNCER | 知識と感動を同期するブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
