タグ

ブックマーク / blog.htmlhifive.com (11)

  • GoではじめるWebAssebmly その3「GET系ネットワーク処理」

    WebAssebmlyはWebブラウザ上でバイナリファイル(テキスト形式もあり)を実行できる環境です。JavaScriptと異なりコードの漏洩がなく、実行速度も高速というのがメリットです。 WebAssebmlyは元々Rustで開発することが多かったですが、最近では様々なプログラミング言語が対応しています。その一つがGoです。Go 1.11からWebAssembly向けにもコンパイルできるようになっています。 一般的なWebAssemblyはDOMやネットワーク操作が行えません。それに対してGo 1.11ではJavaScript APIを使えるようにした syscall/js パッケージを用いることで、DOMやネットワーク操作を可能にしています。 そこで今回はネットワーク処理(GET処理)の書き方を解説します。 使いどころ GET処理の使いどころはもちろん、Web APIからのデータ取得に

    GoではじめるWebAssebmly その3「GET系ネットワーク処理」
  • カレンダー表示を行うカレンダーコンポーネント(その2)「特定の年月にジャンプする」

    カレンダーコンポーネントの使い方、第二弾です。今回は特定の年月を指定して、その月のカレンダーを表示する方法です。 実際に動いているデモはこちらにあります。また、動いている際には次のようになります。 使い方 HTMLは年月を指定するタグを追加しただけです。

    カレンダー表示を行うカレンダーコンポーネント(その2)「特定の年月にジャンプする」
  • PDFをコントロールするJavaScriptライブラリ×4選

    PDFはビジネスの基フォーマットになっています。閲覧するだけという方が多いかと思いますが、もっと活用できます。PDFから必要な情報を抜き出したり、システムから出力したりできれば、業務がもっと改善できるはずです。 そこで今回はPDFをWebブラウザ上で扱えるライブラリを紹介します。 paperai/pdfanno: Linguistic Annotation and Visualization Tool for PDF Documents PDFに注釈を入れられます。表示されている文字列を選択して注釈を入れられるようになっています。他にも四角で囲んだり、注釈同士をリンクさせることもできます。 paperai/pdfanno: Linguistic Annotation and Visualization Tool for PDF Documents instructure/pdf-anno

    PDFをコントロールするJavaScriptライブラリ×4選
  • 無料で使えるプッシュ通知サービス5選

    プッシュ通知といえば、スマホアプリ用のものというイメージが強いかもしれませんが、ChromeがWebサイトを閉じていてもプッシュ通知ができる機能をリリースしたりと、Webサイトにも広がってきています。今回は、プッシュ通知サービスを気軽に試して検討できるように、数多くあるプッシュ通知サービスの中から無料で始められるものをまとめました(トライアル期間制限や回数制限があるものも含みます)。 プッシュさん アプリがなくてもwebサイトからプッシュ通知が送れるサービス。Google Chromeの新しいプッシュ通知機能を利用したもので、Chromeのバージョン42以上が対応。Androidに対応しています。シンプルな操作画面でありながら、A/Bテストやセグメンテーション配信、配信予約など高機能なところも注目点です。 pushnate 日時指定や毎日・毎週など希望のタイミングで定期配信ができます。また

    無料で使えるプッシュ通知サービス5選
  • 電子書籍風Webアプリケーションを作るのに使えるJavaScriptライブラリまとめ

    電子書籍コンテンツはここ数年で一気に増えています。Eコマースサイトで販売されるものだけでなく、スマートフォンアプリでも提供されています。さらにコンテンツさえ作れば業務システムのヘルプなどで提供するのも良いでしょう。 今回はそんな電子書籍風のUIを実現できるJavaScriptライブラリを紹介します。 Laker compendium 動画を埋め込んだり、タップアクションなどのイベントも使えるので、かなりインタラクティブな電子書籍が作成できます。単なる書籍の置き換えではなく、電子書籍ならではの価値が提供できそうです。 Laker compendium – Designing digital publications in HTML5 Turn.js ページをめくったり、拡大/縮小する機能が備わっています。ページの形もカスタマイズできるので、書籍風以外でも使えるようになっています。 blast

    電子書籍風Webアプリケーションを作るのに使えるJavaScriptライブラリまとめ
  • コンポーネントの充実したデザインフレームワーク8選

    昨今、スピード重視の開発を実現する上で欠かせなくなったデザインフレームワーク。デザインフレームワークとは、ボタンやフォームのデザインなどが定義されたライブラリのことです。 デザインフレームワークと一言で言っても、シンプルなデザインセットから動的なコンポーネントを導入できるものまで様々あります。今回は自分で作るには骨の折れるコンポーネント(例えば、グリッドや、ドロップダウンなど)を画面に簡単に配置できるもの8個紹介します。 Bootstrap Bootstrapもっともメジャーなデザインフレームワークです。開発はTwitter社で、日語のでのリファレンスが多いことから初心者にもやさしいフレームワークであるといえます。 Twitterでも使われていることからどのようなデザインのフレームワークかは想像しやすいかと思われます。例えば、Bootstrapを使えば画像のようなデザインを当てることがで

    コンポーネントの充実したデザインフレームワーク8選
    clavier
    clavier 2016/07/07
  • Bootstrap4対応のサービス、ライブラリまとめ

    思いついたWebサイトのアイデアを簡単に、かつすぐに実用的な形にする際に非常に便利なのがCSSフレームワークです。その中でもっとも主流と言えるのがBootstrapですが、2015年の12月にBootstrap v4が正式リリースされました。バージョンアップに伴い、bootstrap4で対応しているサービスも続々リリースされています。そこで今回は、bootstrap4に対応したサービス、ライブラリーそしてテーマを中心に9つほどご紹介したいと思います。 reactstrap reactstrapは簡単にReactBootstrap 4を簡単に使うことのできるコンポーネントです。 nmp経由でのインストールは、以下のコードで出来ます。 npm install --save reactstrap react-addons-transition-group react react-dom たとえ

    Bootstrap4対応のサービス、ライブラリまとめ
  • Seleniumをサポートするツールの紹介

    Seleniumを使ってテストを行う際に役立つツール群を紹介します。これらを使うことでテストコードを書く手間が大幅に軽減されるはずです。 Selenium Builder Selenium IDEと並ぶレコーディングツールです。Firefoxのプラグインとして動作しますが、最新のバージョンでは再生にSelenium Serverを利用するため、IEやChromeでも再生可能になりました。 次に、簡単に操作方法をご紹介します。 操作方法 対象のページを開き、FireFoxのオプションから、開発ツール「Launch Selenium Builder」を選択します。 記録ボタンをクリックして記録が開始されます。なお、左下より言語を選択できますので、好きな言語を選べます。 記録しているウィンドウは、タブのバックグラウンドカラーがグリーンに変わっています。 記録画面ではリアルタイムで、動作が表示され

    Seleniumをサポートするツールの紹介
  • オンラインのJavaScript学習サイトまとめ

    JavaScriptはWebブラウザさえあればはじめられるという手軽さの反面、学習しようと思った際のステップはあまり用意されていないように見えます。しかしJavaScriptの入門になる学習サイトも増えてきています。 そうしたオンラインサイトを使ってJavaScriptの学習をはじめてみるのはいかがでしょう。 ドットインストール 3分動画を通じてプログラミングを学べるドットインストールのJavaScriptタグでは多くのJavaScriptを使ったレッスンが登録されています。入門から実際にWebアプリケーションを作ってみる実践的なレッスンなどレベルも幅広く用意されています。 CodeStudy CodeStudyではWebブラウザ上でゲーム感覚でJavaScriptが学べるようになっています。シェアする機能を通じて友達と学習レベルを競ったり、分からないところを聞いたりすることもできます。

  • Bootstrapの画面を手軽に作れるツールまとめ

    業務システムの画面やWebサービスの管理画面にBootstrapを採用するケースが増えていますが、それでもBootstrapならではの書き方を覚えないといけません。バージョンが上がるごとに書き方が変わるので習得が面倒と感じる人も多いでしょう。 そこで使ってみたいのがBootstrap用のUIビルダーです。ドラッグ&ドロップで画面が設計できれば作成も簡単ですよね。 lollytin beta 1.4 – A yummy HTML5 blockouterer! Bootstrapのデザインをドラッグ&ドロップで作っていくのですが、見た目はデフォルメされています。その分、細かいところにこだわりすぎずにさくさくと作っていくことができます。 Pingendo – web authoring with comfort PingendoはBootstrap専用のオーサリングソフトウェアです。Mac OS

    Bootstrapの画面を手軽に作れるツールまとめ
  • Pitaliumを使ってスクリーンショットベースのユニットテストを書こう(実用編)

    Pitaliumを使うとSeleniumのテストが画面の表示結果ベースでの確認になるので、DOMやテキストのように一つ一つ指定して確認する必要がありません。さらにスクリーンショットを保存しますので、画面のデザイン崩れについても確認ができます。 今回はそんなPitaliumをさらに活用できるテクニックについて紹介します。 IDを指定してDOM比較 これは画面の一部について確認を行いたい時に使えるコードになります。ヘッダー、フッターは変化せず、メインコンテンツだけを比較したいといった使い方が考えられます。 コードは例えば以下のようになります。 import java.util.ArrayList; import java.util.List; import org.junit.Test; import com.htmlhifive.pitalium.core.PtlTestBase; impo

    Pitaliumを使ってスクリーンショットベースのユニットテストを書こう(実用編)
    clavier
    clavier 2015/08/05
  • 1