NEditorJS - ビジュアルプログラミング環境の基盤にどうぞ MOONGIFT
ビジュアルプログラミングの多くはノードがあり、それらをマウスでくっつけて処理を繋げていきます。各ノードには機能があり、必要に応じて処理判定を行うノード、繰り返し処理を行うノードを選択します。 そういったビジュアル化された環境を提供するのがNEditorJSです。工夫次第で様々な使い方が考えられるでしょう。 NEditorJSの使い方 NEditorJSのメイン画面です。 ノードはマウスで接続できます。 実際に操作しているところです。 NEditorJSでは、まずアウトプット側の黒丸をクリックして、その後インプット側の黒丸をクリックします。自動的に線が伸びていくので分かりやすいでしょう。ノードはマウスでドラッグ&ドロップできます。 ユーザ向けにビジュアルプログラミング環境やデータ処理環境を提供する際に使えそうです。NEditorJSはHTML5/JavaScript製のオープンソース・ソフト
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
Evernoteの全ノートのテキストをBeautifulSoupとSQLAlchemyを使ってSQLiteに保存する - Qiita
evernoteの全文を抽出する必要がありその時に使った方法を公開します。 EvernoteAPIを使えばできそうですが、それほどのことでないので面倒ですよね。 そこで、全ノートをhtml形式で出力してBeautifulSoupでスクレイピングする方法を紹介していきます。 Evernoteの全ノートをhtml形式で出力する まず、Command + Aで全ノートを選択します。そこからノートをエクスポートします。 出力する形式はhtmlを選択してください。 今回はこれをmynoteとしてデスクトップに保存します。 mynoteのindex.htmlには出力したファイル全てのノートの目次になっていて、各htmlファイルへのリンクがあるのでそれを利用します。 手順としては index.htmlから出力するノートのurlを抽出する。 url先からテキストを抽出する。 それをSQLiteに保存する。
To do notifications – Webブラウザ向け通知を使ったTodoアプリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5の進化は目を見張るものがあります。特にスマートフォンの登場によって、ネイティブでサポートされるような多くのAPIが実装されています。作り込めばネイティブアプリに負けないくらいの機能が実装できるでしょう。 今回はその一機能である通知機能を使ったTodoアプリ、To do notificationsを紹介します。この使い方は他にも応用が利きそうです。 To do notificationsの使い方 タスクを作成する際に何時何分まで指定を行います。 最初は通知の許可が必要です。 時間になるとローカル通知が出ます。 通知が出るとタスクは消されます。 ブラウザがバイブレーションをサポートしている場合、通知と一緒に震えてタスクが期限を迎えたことを教えてくれます。なお、このWebサイト
もう逃げない。HTMLのviewportをちゃんと理解する
<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
どこでも活躍できるテンプレートエンジン「Mustache」 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 世にテンプレートエンジンは多くあれど、 これ程多くの場所で活躍出来るテンプレートエンジンはなさそうです。 本稿はそんなテンプレートエンジン「Mustache」の試用レビューです。 Mustacheについて {{ mustache }} “Mustache”というのは口ひげを指す言葉で、「ますたっしゅ」とか発音する様です。 テンプレートタグに使用されている「{」が口ひげに似てるので、そこらへんが由来っぽいです。 公式を見れば分かるとおり、Mustacheは1言語にとどまらず、 様々な言葉で開発されているテンプレートエンジンです。 知らない言語も入ってたりしますね…。 Available in Ruby, JavaScript, Python, Erlang, PHP, Perl, Go, Lua, ooc, C++, Action
普及して欲しくないアンチスクレイピングサービス - happyou.infoのブログ
スクレイピングとは、ウェブページから情報を取り出す処理を指します。そのためのプログラムやツールが存在します。 さて、ここで立場を変えて、情報を取り出されてしまうウェブサイト側の立場になって考えてみますと、スクレイピングはあまりうれしくない存在であることがわかります。 ニュースサイトは、コストと時間をかけて書いた記事をコピーされ転載されてしまう。 オンラインショップは、ライバルの他社に商品リスト、価格、在庫の変化、顧客の評価等を把握されてしまう。 インターネット広告は、自社が出している/仲介している広告の種類と量をライバルに把握されてしまう。 他社の情報は把握したいが、自社の情報は把握されたくないと考えるのは自然なことのようです。その証拠として、スクレイピングの普及に合わせて、自分のサイトがスクレイピングされることを防ぐための「アンチスクレイピングサービス」なるものが世に広まりつつある点を挙
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
WebブラウザベースのIDE「Eclipse Orion 5.0」が登場 | OSDN Magazine
Eclipse Orion開発チームは3月3日、Webブラウザ上で動作する統合開発環境（IDE）「Orion 5.0」をリリースした。外観が一新されたほか、Cloud Foundry APIサポートなど多数の新機能が加わっている。 Orionはシンタックスハイライト付きのコードエディタやファイルマネージャ、Git/FTP/SFTPクライアントなどの機能を備えたIDE。JavaScriptで実装されており、Eclipse Foundationの下オープンソースで開発されている。ライセンスはEclipse Public Licence（EPL）。また、自分のサーバーにOrionをインストールすることなしにOrionを利用できるクラウド型サービス「OrionHub」も提供されている。 Orion 3.0ではルック＆フィールが新しくなった。変更点の例としては、メニューバーにコンテキストメニューの要
Webアプリをいまどきの手法で爆速開発した — KaoriYa
外道はるかぜちゃんジェネレータというWebアプリを いまどきな手法を用いて爆速で開発した話を紹介します。 先の3連休中、外道はるかぜちゃんジェネレータというWebアプリを開発&公開しました。ここで採用した開発手法がいまどきな爆速開発でしたのでちょっと紹介&ステマします。使った技術は以下の通りです。 AngularJS: Googleが開発しているViewModelなWeb開発ライブラリ(MVW: Model View Whateverだったかな?w) Github pages: スタティックサイトのホスティングに最適 Kii Cloud: mBaaS (mobile backend as a service) で共有データの保存に利用 HTML5 Canvas: 画像生成に。サーバサイドではなにもしてない! サービス概要 外道はるかぜちゃんジェネレータはベースとなる画像があり、そこに面白い
Javaで使える、HTML5パーサ - CLOVER🍀
ちょっと大量のHTMLファイルをチェックする作業があって、grep／Perl One Linerで頑張るのも厳しいよなぁと思い、HTMLファイルをJavaでパースしてどうにかしようと思い立ちました、今日。 で、JavaでHTMLパーサといえば、個人的にはパッと思い浮かぶのがNekoHTML。 CyberNeko HTML Parser http://nekohtml.sourceforge.net/ が、いかんせんこれは古い。HTML5にも対応していませんし。 よって、他のパーサを探してみました。2つほど見つかったので、ご紹介します。 HTMLをパースするので、以下のような閉じタグがないHTMLもパースできなければなりません。 index.html <!DOCTYPE html> <html> <head> <title>タイトル</title> </head> <body> <div i
Web開発者に革命をもたらす！「Web Components」超入門 | 株式会社LIG
こんにちは。デザイナーの王です。 Webアプリはデスクトップアプリとは違い、まだまだ発展途上の技術のため、色んな所でまだ未熟な部分があります。デスクトップアプリでは当たり前のことでもWebアプリではできなかったりすることも多いのです。中でも、UIのコンポーネント化問題が以前から指摘されてきました。 通販サイトにある「購入ボタン」を例に説明すると分かりやすいと思います。 この手のボタンを作るには以下の手続きを要すると考えられます。 外観を整える CSS HTMLマークアップ クリックした際の挙動 JavaScript 何が厄介かというと、「再利用」が難しいというところなんですね。 例えば、同サイトの別のページで同じボタンを使いたい場合、js、CSS、HTMLを再度記述しなければなりません。しかも場合によってはHTMLのマークアップが非常に冗長化していることもある。 「購入ボタン」はあくまで一
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
HTMLをDBみたいに使えるスゴイライブラリ『htmlSql』を CakePHPで使う - h2ospace - builder by ZDNet Japan
APIやRSSなどを提供しているサイトは、情報を簡単に扱うことができますが、例えば Yahoo!の検索結果とか、mixiのニュースとか、あるサイトの一部を取り出したいことってよくあります。（とはいえ、著作権違反には注意 そんな時、PHPのライブラリである「htmlSql」を利用すると便利。このライブラリに、ファイルでもURLでも文字列でも、HTMLで作られたものなら何でも与えると、解析して取り出しやすくしてくれます。しかも、その取り出し方はSQL！ 例えば、「id属性が’test’の p要素の内容を取り出したい」という場合には、次のようなSQLを使います。 SELECT text FROM p WHERE $id=="test" 超パワフル。ということで、これを CakePHPで利用するためのテクニック。 まずは、ダウンロードしたファイルの中から次のファイルを「app/vendors」フォ
yohei-y:weblog: 『Webを支える技術 ── HTTP、URI、HTML、そしてREST』という本を書きました
このブログ、1年近くご無沙汰していました。その間なにをやっていたかというと、実はずっと本を書いていました。『Webを支える技術 ── HTTP、URI、HTML、そしてREST』というなんとも挑戦的な題名の本です。技術評論社さんのWEB+DB PRESS Plusシリーズの11冊目で、来月発売される予定です。 Webを支える技術 ── HTTP、URI、HTML、そしてREST山本 陽平技術評論社 2010-04-08 この本は、WEB+DB PRESSで連載していた「RESTレシピ」という連載がベースになっています。実は連載が1年経ったくらいから、技評さんからは書籍化のオファーをもらっていました。ただ、その時点では書いた分量も少ないし、そもそも自分に雑誌記事とは比べ物にならないくらい分量のある本が書けるとは思っていなかったので、書籍ではなく連載継続という形でトータル2年間連載をしました。
MacRuby: The Definitive Guide
More than 5,000 companies count on our digital courses and more to guide their teams through the tools and technologies that drive business outcomes. We can help yours too. New AI policy for O’Reilly authors and talent O’Reilly president Laura Baldwin shares the company’s ethical approach to leveraging GenAI tools and ensuring O’Reilly experts are compensated for their work. See it now It’s time t
Jonathan Stark 著「HTML、CSS、JavaScript を使って iPhone アプリを作る」
Jonathan Stark 著「HTML、CSS、JavaScript を使って iPhone アプリを作る」 2010年3月11日 投稿者: shiro ［Jonathan Stark の本］ 去年から待ちかねていた Jonathan Stark の本がやっと届いた。 先に紹介した「HTML や CSS、JavaScript を使って iPhone アプリを作る」の作者が書いた本だ。 最初に知ったときはショックだった。 Objective-C や Cocoa を使わないで、 HTML や JavaScript だけで iPhone のネイティブアプリが出来るというのだ。もしそうなら、スタンフォード大の入門講座で四苦八苦したのはナニ？ Stark 本は、HTML、CSS、JavaScript というオープンソースの Web 技術の知識さえあれば、iPhone のネイティブアプリ作成が可能
[Think IT] 第1回：ベストなコーディングツールを探せ！ (1/3)
【即実践！HTML+CSS】私流、ツールの選び方 第1回：ベストなコーディングツールを探せ！ 著者：まつむらよしあき 公開日：2008/04/04（金） コーディングツールはどう選ぶ？ 2008年4月の特集「即実践！HTML+CSS」の金曜日では「コーディングのためのアプリケーションとツール」について取り上げます。 「Webサイトを作成するにあたって、どんなコーディングツール、アプリケーションを使えばいいの？」 これは、Webサイト制作の道に足を踏み入れる者にとって最初の関門です。大げさに聞こえるかもしれませんが、選んだツールによって生産性が大きく変わってくるのが事実です。自分にあったコーディングツール、アプリケーションを探すにあたって、まずはどんなツールがあるのか、またどんなツールが広く使われているのか紹介しましょう。 一般にコーディングツール、アプリケーションといってもかなりの数があり
[Think IT] 第2回：カラムを理解する！ (3/3)
【即実践！HTML+CSS】 テーブルレイアウトから脱出せよ！ 第2回：カラムを理解する！ 著者：米倉 明男 公開日：2008/04/08（火） float（フロート）を使った3段組カラム作成 次は3段組を作ってみましょう。「ナビゲーション」エリアを左に、「メインコンテンツ」エリアを真ん中、追加で「サブ」エリアを右側に配置します。 一見、複雑になったかのように見えますが、配置方法は先ほどの2段組と同じです。今回は「ナビゲーション」エリア<div id="navi">と「メインコンテンツ」エリア<div id="main">を包括する<div id="wapper">を作ります。ボックスを入れ子状態にするのです。 まず<div id="wapper">と<div id="sub">ボックスを左右にフロートします。次に<div id="wapper">の子ボックスにあたる<div id="ma
[Think IT] 第2回：カラムを理解する！ (2/3)
【即実践！HTML+CSS】 テーブルレイアウトから脱出せよ！ 第2回：カラムを理解する！ 著者：米倉 明男 公開日：2008/04/08（火） float（フロート）の概念 floatプロパティは、元々ボックスの外側にテキストを回り込ませるためのプロパティです。例えば<div>ボックスにfloat:leftと指定すると、そのボックスは浮動ボックスとなり、左端に配置され、その後に続くテキストが右側に回り込みます。 同様にfloat:rightと指定すると浮動ボックスは右端に配置され、続きのテキストは左側に回り込みます。 floatを使用する場合に注意する点は3つあります。 1つ目は、CSS2の仕様ではfloatプロパティを指定する場合に、そのボックス自身の幅を（width）を指定しておく必要があることです。この幅（width）を指定しないと一部のWebブラウザで回り込みが反映されない場合が
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
