例えばHackerNewsのような海外のWebサイト。 英語が得意ではない僕は、タイトルだけでも読むのにメッチャ時間がかかる。 なのでそれらのサイトを定期的にスクレイピングして、その中身を翻訳して、メールで送ってくれるシステムを作ってみた。 作るにあたり使ったもの ・GoogleAppsScript ・kimono(http://www.kimonolabs.com/) kimonoは登録したWebサイトをスクレイピングして、JSONやらCSVやらXMLで返してくれる素晴らしいWebサービス。 import.ioと同じ? 仕組み 1.kimonoでWebサイトをAPI化 2.GASでそのAPIからデータを取得 3.データを翻訳してメール送信して完了 具体的な方法 kimonoでWebサイトをAPI化する方法 まずはkimonoに会員登録してこんなショートカットをブラウザにセット 次に対象の
Di era digital 2025,Mawar189 hadir sebagai pilihan cerdas bagi siapa pun yang mencari hiburan ringan namun penuh potensi keuntungan. Dengan konsep platform modern, Mawar189 memadukan kenyamanan beraktivitas online dengan fitur-fitur yang dirancang untuk membuat setiap pengguna merasa betah dan percaya diri dalam menjelajahi setiap peluang yang ditawarkan. Keamanan dan kenyamanan adalah dua pilar u
2日で作った。昨日から無職なので手が空いてたのもある。 こんなの mizchi/my-feed-reader 概要 nodeでクローラ100行、サーバー40行、クライアント400行ぐらい。テストはない。cssもない。 認証とかなくて、ローカルで動かすの前提。LDRのexport.xml(opml)を読み込む。詳しくはREADMEで。 jksaでフィードを移動する。sで飛ばした時に未読フラグつけてる。oでバックグラウンドで開く。 大事なことなんだけど、マウス操作は一切対応してない。 データベースは使ってない。サーバーでインメモリで抱えてる分だけ降ってきて、既読管理は最後に読んだフィードの更新日時をlocalStorageで持ってて新規フィードもらうたびに比較してる。雑な設計。 技術的な話 Koa, React, Generatorとか自分が使いたい技術を適当に使った。 Reactで雑に作るの
2018年6月6日追記:ここに掲載されている情報は古くなっています。現在は公式な方法が利用できます。→Google Maps API で場所アイコンのポップアップ (POI) を消す (v3.26) 地図を使った Web ページを作るときに便利な Google Maps JavaScript API だが、自分で用意したマーカなどの要素とは別に、主要なスポットがアイコンとラベルで示され、クリックするとその説明が出るようになっている。(このスポットを point of interest; POI と呼ぶ) ただ単に地図を見るときには役立つが、API を使って何か作ろうという場合は邪魔になることがほとんどだ。 デモ:Google Maps の邪魔なポップアップを消す方法 (元となるコード) 解決法は二つある。 POI アイコン自体を消す 一つ目は POI のアイコン自体を非表示にする方法だ。も
demo 3: チェックボックス Hide/Show Passwordsの使い方 Step 1: 外部ファイル 外部ファイルに当スクリプトとjQuery、またはZepto.jsを外部ファイルとして記述します。 ※jQueryとZeptoの兼用プラグインとなっています。 <script> document.write('<script src=vendor/' + ('__proto__' in {} ? 'zepto.custom' : 'jquery') + '.js><\/script>') </script> <script src="hideShowPassword.min.js"></script> Step 2: HTML HTMLは通常通りのフォームの作成です。 <div class="login"> <input type="text" placeholder="Usern
最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。 Off Canvas Menu Effects デモページ メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。
十二章第三回 History APIこのページの最終更新日:2018年7月29日 次に紹介するのがHTML5 History APIです。Historyとは履歴のことです。履歴関係のことは、historyという名前のオブジェクトから利用可能です。 古典的な履歴操作実はこのhistory自体は昔からあって、いくつかメソッドを持っていました。 history.back(); 例えばhistory.backメソッドは、いわゆるブラウザの「戻る」ボタンと同じ動きです。 実際にやってみましょう。 このボタンは次のようにできています。 <input type="button" value="戻る" onclick="history.back()"> このボタンを押すと、ブラウザの「戻る」ボタンを押したときと同じように前のページに戻ります。 逆に「進む」はhistory.forward()です。他に、「
戻るボタン対応 これ自体はいろんな 対応方法 があると思うのですが、今回は 戻らせない を目的としています。(戻っても大丈夫とか、戻るボタンを効かなくするとかではありません) PC や Android Chrome の場合 よくある対応として以下のようなものがありますね。PC 、Android 4.1.2 Chrome ではこの対応である程度要件を満たす事ができました。 <script type="text/javascript"> window.onunload = function() {}; history.forward(); </script> 参考 ブラウザの戻るボタンを無効にする方法 - 自由が丘で働いていたWeb屋のブログ ブラウザの戻るでJavaScriptの効果が残っている時の対処法 - webbibo Mobile Safari の場合 Mobile Safari に
おそらく、JavaScript を使いこなす肝は setInterval、setTimeout、イベントによる関数の実行を理解することだと思う 例えば 次のコードの結果を考えたとき document.write("hoge\n"); setTimeout(function(){ document.write("fuga\n") }, 1000); document.write("piyo\n");普通に JavaScript を使いこなしてる人なら、hoge → piyo と表示して、 1 秒後に fuga が表示されるな。って思うはずなんです。 でも、 JavaScript を始めたばっかりの人の中には、 hoge と表示したあと 1 秒後に fuga → piyo と表示するな。って思ってる人が非常に多い。(経験的に) 何故か? たぶん、どのサイトの setTimeout の説明を見て
最近よく見かける垂直に配置した複数のパネルそれぞれをブラウザいっぱいに表示し、CSS3のかっこいいアニメーションでスクロールさせるjQueryのプラグインを紹介します。 デスクトップだけでなく、スマホ・タブレットのスワイプ操作にも対応している優れもの! デモページ:2ページ目 ホイール操作時には、ちょうどいい位置に自動で移動します。 FSVSの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="/assets/js/fsvs.js"></script> </head> スワイプ対応にするには、スクリプトを加えます。 <script src="/assets/js/jq
divなどで実装したパネル、複数の画像やエレメントを配置したスライダーなどにさまざまなアニメーションを適用できるjQueryのプラグインを紹介します。 ↓は、エレメントのデモです。 demo: エレメントのエフェクト Pogo Sliderの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="pogo-slider.min.css"> </head> <body> ... <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.pogo-slider.min.js"></scrip
(150522追記)本稿の続編としてAngularJSモダンプラクティスを掲載しました。本稿は2014年9月に執筆し、情報がかなり古くなっています。続編では、AngularJS 1.4やAngular 2に関する情報をまとめ、入門者への新鮮なチュートリアル、熟練者の移行手引として作成しました。どうぞご覧ください。 この記事は記録のため残します。 AngularJS歴1年の筆者による個人的なAngularJSアンチパターン集です。自分のための戒めとメモを兼ねています。個人差があると思いますので、参考程度に。 また、筆者はTypeScriptで書いています。 Components ComponentsのDI数が6以上になる 危険度★★★ angular.module('myApp') .service('FooService', [ '$q', '$resource', '$rootScope
ブログの記事本文を読むのにかかる目安時間を表示すると読者に親切かも。JavaScriptで作ったので、PHPを使えないサーバーを利用しているウェブサイトやブログに組み込めるよ。このjQueryプラグインを「読了予測時間」と命名。 読了予測時間のデモ画像 読了予測時間が表示されるページ 各記事ページで読了予測時間が表示される。下図で黄色の枠で囲った部分が読了予測時間。下図をタッチで別タブで拡大表示可能。 記事ページとは、はてなブログでいえばURLに/entry/が入っているページ。たとえば次のURL。 http://www.hapilaki.net/entry/jquery-plugin-dokuryo-yosoku-jikan 読了予測時間が表示されないページ 記事ページ以外の記事一覧ページやカテゴリページでは読了予測時間が表示されない。需要があるならアップデートして表示されるようにするか
「UserAgent での判定」、「サポートしている機能での判定」、「使いたい機能が機能するかでの判定」などがあるので用途に合わせて利用。 UserAgent での判定 UserAgent の文字列からブラウザを判定する方法。バージョンが新しくなったりすると UserAgent の値も変更されるようでこれがどのぐらい使えるかは不明(確実性に疑問)。 UserAgent と そのバージョン等は以下で取得できる。 //ユーザエージェント var userAgent = window.navigator.userAgent; //バージョン var appVersion = window.navigator.appVersion; //名前 var appName = window.navigator.appName; //プラットフォームのタイプ var platform = window.n
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く