サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
都知事選
blog.htmlhifive.com
脆弱性診断は色々な分類がありますが、今回はWebアプリケーション用でフリーの脆弱性ツールをまとめてみました。 尚、本記事内にあるツールはサイトを攻撃するツールとしても利用出来てしまうため、利用にあたっては許可を得ていないサイトへの接続を行わないように注意して下さい。 Javaベースの脆弱性スキャナ OWASP ZAP Javaベースで開発されたオープンソースのWebアプリケーション脆弱性検査ツールです。利用は無料です。 OWASP ZAP プロキシの自動スキャン、動的・静的スキャン、スパイダーなど多くの診断が可能です。 チュートリアルビデオもまとまっていて、その内容も初心者からセキュリティ専門家までカバーしています。 最初に導入する人が迷わないような仕組みと、UIにかなり力を入れているようで、ビデオ説明からもその部分がうかがえます。Ver2.4からメニューや操作部分などの日本語化も進んでい
JavaScriptはシングルスレッドで動作するので、ネットワーク処理などが非同期で行われるようになっています。そうしないとAjaxを使っている間、何も入力や画面スクロールなども受け付けなくなります。 しかし非同期実行のしわ寄せとして、コールバックが多くなってネストが深くなったり、Promiseでも処理が分かりづらくなります。例えば非同期処理を伴ったループ処理を書こうとすると、次のようになります。 loop([1, 2, 3, 4, 5, 6], function(key, value, promise) { value = value * 2; promise.resolve(value); }).then(function(results) { console.log(results); }) function loop(ary, call) { var results = {}; r
ここ最近、ドキュメントを作成するのに使うマークアップ言語としてMarkdownが人気です。少し前まで他にもフォーマットがありましたが、今はほぼMarkdown一色ではないでしょうか。 Webシステムの中でもMarkdownを採用し、ユーザにMarkdown記法に沿って入力してもらうものも増えています。そんな時にはツールバーをはじめ、Markdown記法をサポートするツールがあると便利です。そこで今回はWebブラウザ上で使えるMarkdownエディタを紹介します。 Editor Editorはツールバーが表示され、Markdownの各入力フォーマットをクリックだけで入力できるようにしてくれます。見た目はMarkdownのままですが、目のアイコンをクリックするとHTML表示に変わります。 woofmark woofmarkはWYSIWYGなエディタですが、HTML/Markdown/WYSIW
DevToolsはHTML5/JavaScript/CSSの開発に役立つツールですが、今回はさらに拡張してサーバサイドの開発でも役立ててしまおうという機能拡張を紹介します。 PHP PHP Console – Chrome ウェブストア サーバ側で発生したメッセージ、エラーなどをDevTools上で確認できるようになります。画面上に var_dumpなどを出力しないで済むのが良さそうです。 Clockwork – Chrome ウェブストア インストールするとClockworkというタブが追加されます。Laravel、SlimそしてCodeIgniter 2.1に対応しています。サーバサイドでもライブラリをインストールする必要があります。 Xdebug helper – Chrome ウェブストア PHPのXdebugと組み合わせて使います。通常、Xdebug向けにパラメータを追加したり、
インターネットが幅広く普及してきたことによって、あらゆる人たちに対して等しく情報が提供できなければなりません。政府、自治体系であればユニバーサルデザインが求められるようになっており、Webサイトにおいても多くのデバイスに対して見やすく、正しく情報が届けられるような機能、デザイン性が求められています。 今回はそんなWebアクセシビリティを高めるために使えるライブラリを紹介します。 tota11y – an accessibility visualization toolkit ブックマークレットとして提供されており、実行するとメニューが表示されます。そしてヘッダー情報であったり、リンクテキスト、画像のaltなどの一見すると見られない情報が表に出てきます。 Hurtak/toggle-css-bookmarklet: Toggle css with one click スタイルシートの有効、無
昨今、スピード重視の開発を実現する上で欠かせなくなったデザインフレームワーク。デザインフレームワークとは、ボタンやフォームのデザインなどが定義されたライブラリのことです。 デザインフレームワークと一言で言っても、シンプルなデザインセットから動的なコンポーネントを導入できるものまで様々あります。今回は自分で作るには骨の折れるコンポーネント(例えば、グリッドや、ドロップダウンなど)を画面に簡単に配置できるもの8個紹介します。 Bootstrap Bootstrapもっともメジャーなデザインフレームワークです。開発はTwitter社で、日本語のでのリファレンスが多いことから初心者にもやさしいフレームワークであるといえます。 Twitterでも使われていることからどのようなデザインのフレームワークかは想像しやすいかと思われます。例えば、Bootstrapを使えば画像のようなデザインを当てることがで
より大型なWebアプリケーションを開発する上でテンプレートエンジンの利用は欠かせません。テンプレートエンジンはビューとロジックを分離し、メンテナンス性の高いシステムを実現してくれるでしょう。 そこで今回は主なJavaScript(Webブラウザ)向けのテンプレートエンジンを紹介します。 Handlebars.js: Minimal Templating on Steroids ロジックは殆どなく、if文と繰り返し文くらいしかありません。テンプレートの仕組みとしてはパーシャルにも対応しています。ロジックがない分、ビューを適用する前のJavaScript側できちんとデータを整形した上で渡す必要があります。 {{ mustache }} mustacheもまたロジックの少ないテンプレートですが、JavaScript以外の言語にも対応しているのがポイントです。ロジックが複雑になるとJavaScri
HTML5でグラフを描く方法は幾つかあります。一つはCanvasを使った方法です。これは高度なグラフィックスが描ける一方、JavaScriptなどからインタラクティブに扱うのは複雑になっています。 そこで今回はSVGを使ったグラフライブラリを紹介します。SVGはXMLベースで軽量、かつJavaScriptとの親和性も高いものが多くなっています。 morris.js morris.jsは主に折れ線、棒、曲線、ドーナッツグラフをサポートしています。データをJSONで渡すだけで使えるので学習コストが低いのがメリットです。ライセンスは簡易BSD Licenseとなっています。 Chartist – Simple responsive charts Chartistはレスポンシブであることをメリットとしています。曲線、棒、円、ドーナッツグラフをサポートしています。ブラウザはIE9以降を対象としていま
IDEというと機能が多い分、ダウンロードサイズが大きかったり、動作がもっさりしているものが多いのではないでしょうか。そこで最近ではWebブラウザ上で動くIDEが増えています。今回はその代表例を紹介します。 Cloud9 – Your development environment, in the cloud 40以上の言語をサポートしたWeb IDEです。Dockerコンテナになっており、aptを使って自由にパッケージをインストールできるようになっています。Rails/Django、WordPressなど各種システムも利用できます。 Codeanywhere · Cross Platform Cloud IDE バージョン管理、ターミナルを備えています。書いたコードはFTP/SFPT、Dropbox、Google Driveなどに保存ができます。コラボレーション機能もあるので、企業でも利用
IDE(統合開発環境)というとVisual StudioやEclipseなど大きなアプリケーションというイメージがありますが、Web IDEはWebブラウザさえあればすぐに開発が可能になります。 今回はそんなWeb IDEを提供するオープンソース・ソフトウェアを紹介します。 Tern IDEというよりも任意のテキストエリアに対してIDE相当の入力補完機能や変数を探す機能を追加します。対応している言語はJavaScriptになります。自作のWebサービスにてJavaScriptのコードを入力しやすくしようと考えるならば導入してみると良さそうです。 nudgepad/nudgepad: Build working prototypes in your browser. Node.jsベースのコードをWeb IDE上で記述し、そのまま実行できるソフトウェアです。nodeやbashをWeb上で実行
思いついたWebサイトのアイデアを簡単に、かつすぐに実用的な形にする際に非常に便利なのがCSSフレームワークです。その中でもっとも主流と言えるのがBootstrapですが、2015年の12月にBootstrap v4が正式リリースされました。バージョンアップに伴い、bootstrap4で対応しているサービスも続々リリースされています。そこで今回は、bootstrap4に対応したサービス、ライブラリーそしてテーマを中心に9つほどご紹介したいと思います。 reactstrap reactstrapは簡単にReactでBootstrap 4を簡単に使うことのできるコンポーネントです。 nmp経由でのインストールは、以下のコードで出来ます。 npm install --save reactstrap react-addons-transition-group react react-dom たとえ
思いついたWebサイトのアイデアを簡単に、すぐに実用的な形にする際に非常に便利なのがCSSフレームワークです。その中でもっとも主流と言えるのがBootstrapですが、2015年の12月にBootstrap v4が正式リリースされました。どのように変更が加わったのか気になっている方も多くいるかと思います。そこで今回はバージョンアップの詳細を紹介します。 Bootstrap 4で大きく変わった点をBootstrap 4 alpha · Bootstrap Blogを参考に記載していきます。 CSSプリプロセッサーをLESSからSassへ変更 これにより、Libsassを使っていた時よりもコンパイルが速くなり、Sassの開発者たちにも幅広く利用してもらえるようになりました。コンパイラにはLibSassが使用されています。 グリッドシステムの改善 「Extra large」が追加され、より細かく
業務システム開発においてCI(継続的インテグレーション)サーバは欠かせなくなっています。自動テストを行ったり、開発用サーバにデプロイするなどといった手順が自動化できるのが魅力です。 今回はそんなCIサーバの中でもオープンソース・ソフトウェアのものをまとめて紹介します。オープンソース・ソフトウェアの場合、特定のプログラミング言語についてサポートされているものが多いので、自分たちのプロジェクトで使っている言語に合わせて選択するのが良さそうです。 Jenkins CI 最も有名なCIサーバです。Javaで作られていますが任意のプログラミング言語に対して自動テストが可能となっています。 Welcome to Jenkins CI! | Jenkins CI Integrity Ruby製のCIサーバです。バージョン管理はGitのみサポートしています。 Integrity | Continuous
Bootstrap オープンソース・ソフトウェア(MIT)。BootstrapはWebサイト、Webアプリケーションを開発する際のベースデザインとして使えるデザインフレームワークです。プログラマでも手軽に使える反面、カスタマイズの自由度があまり高くないのでデザイナーには嫌がられます。管理画面などに使うのが最適です。以下はボタンなどの画面パーツです。 サポートされているUIパーツが非常に多く、 グリッド 引用(コード) テーブル メニューバー フォーム ボタン 角丸、丸形などの画像表示 ボタングループ パンくず ページネーション バッジ プログレスバー アラート などが提供されています。また、JavaScriptと組み合わせることで、 カルーセル ドロップダウン モーダル タブ ツールチップ なども標準で提供されています。カラーテーマやカスタマイズを行うサイトもあり、情報も充実しています。以
d3.js オープンソース・ソフトウェア(BSD)。データの可視化ライブラリです。HTML/SVG/CSSを使ってアニメーションもサポートしたグラフ/チャートを表示します。jQueryと同じような使い勝手で高度なチャートを描けるのが特徴です。 以下はサンプルのコードで、指定されたSVGタグの色を変更します。 d3.selectAll("p").style("color", function(d, i) { return i % 2 ? "#fff" : "#eee"; }); SVGによる表現は多彩なので、単純なグラフやチャートと言った枠を越えた表現が実現できます。 使いこなすのはそうそう簡単ではありませんが、SVGを素のまま使うのに比べると大幅に手間は軽減されるでしょう。その上でjQueryライクにプログラマブルにSVGを扱うと言った目的に最適な選択になるはずです。 three.js オ
HTML5-Webプラットフォーム部の勉強会第11回勉強会 jsアプリ怪獣エレクトロンの育て方と倒し方に参加したので、そちらの内容をレポートします。 実際にElectronで開発を行うにはどのように開発を行うべきかという内容の古川陽介さんによる「Electron アプリの作り方」、古川さんの講演を受けて便利なのはわかったけれど、セキュリティーリスクはどの程度あるかについての内容のはせがわようすけさんによる「Electron の倒し方」、そしてそれらの内容を踏まえた上で実務にElectronを用いた例を示す酒巻瑞穂さんによる「エレクトロン 対 エンタープライズ光線」の3セッションになります。 以下ではこれらについて詳しく内容を紹介します。 Electron アプリの作り方 登壇者:古川陽介さん(Node.js 日本ユーザーグループ代表) ElectronのできあがるまでのElectronの概
Seleniumを使ってテストを行う際に役立つツール群を紹介します。これらを使うことでテストコードを書く手間が大幅に軽減されるはずです。 Selenium Builder Selenium IDEと並ぶレコーディングツールです。Firefoxのプラグインとして動作しますが、最新のバージョンでは再生にSelenium Serverを利用するため、IEやChromeでも再生可能になりました。 次に、簡単に操作方法をご紹介します。 操作方法 対象のページを開き、FireFoxのオプションから、開発ツール「Launch Selenium Builder」を選択します。 記録ボタンをクリックして記録が開始されます。なお、左下より言語を選択できますので、好きな言語を選べます。 記録しているウィンドウは、タブのバックグラウンドカラーがグリーンに変わっています。 記録画面ではリアルタイムで、動作が表示され
JavaScriptはWebブラウザさえあればはじめられるという手軽さの反面、学習しようと思った際のステップはあまり用意されていないように見えます。しかしJavaScriptの入門になる学習サイトも増えてきています。 そうしたオンラインサイトを使ってJavaScriptの学習をはじめてみるのはいかがでしょう。 ドットインストール 3分動画を通じてプログラミングを学べるドットインストールのJavaScriptタグでは多くのJavaScriptを使ったレッスンが登録されています。入門から実際にWebアプリケーションを作ってみる実践的なレッスンなどレベルも幅広く用意されています。 CodeStudy CodeStudyではWebブラウザ上でゲーム感覚でJavaScriptが学べるようになっています。シェアする機能を通じて友達と学習レベルを競ったり、分からないところを聞いたりすることもできます。
JavaScriptで常に頭を悩ませるのが非同期処理ではないかと思います。非同期処理を幾つも実行したりすると、思ったタイミングで処理が走らないといったことが多々あります。 そんな中でループ処理になると、特に厄介ではないでしょうか。そこで今回はPromiseを使ったループ処理について紹介します。 0から10まで順番に処理をしたら抜けるループ 非同期処理でない場合は次のように書けます。 This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more
業務システムの画面やWebサービスの管理画面にBootstrapを採用するケースが増えていますが、それでもBootstrapならではの書き方を覚えないといけません。バージョンが上がるごとに書き方が変わるので習得が面倒と感じる人も多いでしょう。 そこで使ってみたいのがBootstrap用のUIビルダーです。ドラッグ&ドロップで画面が設計できれば作成も簡単ですよね。 lollytin beta 1.4 – A yummy HTML5 blockouterer! Bootstrapのデザインをドラッグ&ドロップで作っていくのですが、見た目はデフォルメされています。その分、細かいところにこだわりすぎずにさくさくと作っていくことができます。 Pingendo – web authoring with comfort PingendoはBootstrap専用のオーサリングソフトウェアです。Mac OS
WebAssembly自体はプログラミング言語ではありません。対応した各種言語から変換します。そのため、採用する言語によって利用できる機能や開発効率が異なるでしょう。 今回は生成されるバイナリをプログラミング言語ごとに見てみます。 GoとRust 利用したのはGoとRustです。RustはWebAssemblyで最初に採用されているプログラミング言語であり、サイズも最適化されているのではないかと予想されます。対してGoはWebAssemblyを目的としてはいませんし、標準ライブラリなども多数入りそうな予感がします。 どちらもHello Worldを出力するだけのWebAssemblyファイルを作った場合のサイズです。 Go : 1,301,957 byte Rust : 1,981,246 byte となり、意外にもGoのが小さくなります。 Rustのサイズを軽減する Rustはデフォルト
JavaScriptタスクランナーを広めた Grunt grulnt GruntはRuby製のGuardに影響を受けて、後のタスクランナーに影響を与えました。 grantの設定ファイルは、初期化部分と実行タスクに別れ、それが故にコードが大きくなると可読性&メンテナンス性が悪くなると言う弊害があります。しかし、タスクの責任範囲が明確になっているので、大きなプロジェクトでは各担当の管理部分がわかりやすいというメリットがあります。 1. グローバルにgruntのCLIパッケージをインストールします。 $ npm install -g grunt-cli 2. プロジェクトのディレクトリに移動し、npmコマンドでpackage.jsonを生成します。 $ npm init 2. gruntのパッケージをインストールします。 $ npm install grunt-contrib -save-dev
IoT機器とHTML5を融合させればWebブラウザの画面上からIoTデバイスを操作したり、IoTからあがってくる数値をリアルタイムにレンダリングしたりすることができます。HTML5の新しい可能性が見えてくる気がしないでしょうか。 IoT機器が使うプロトコルとして注目されているのがMQTTです。最小ヘッダサイズが2byteという小ささでネットワーク帯域を浪費しないこと、相互通信が可能な仕組みがあることからIoT分野において知っておきたいプロトコルです。 そんなMQTTなのですが、PubSub型であることやTCP上に流れるとあって、WebSocketに似たような仕組みとなっています。そこで作られているのがMQTT over WebSocketで、MQTTとWebSocketを相互通信できる仕組みになります。 今回はMQTT over WebSocketに対応したMowsを使って手軽にMQTTと
最近IoTが話題になっています。マイコンデバイスと言うと、C言語や専用のプログラミング言語で書く必要があるように感じますが、最近ではJavaScriptでも書けるようになっています。そこで今回はIoT用に作られたJavaScriptライブラリを紹介します。 IoT.js サムスンが開発しているライブラリで、これと合わせたJerryScriptというJavaScriptエンジンも提供されています。特にJerryScriptは64KBのRAM上でも動作するくらい軽量な作りになっており、組み込み系にJavaScriptを活かせるエンジンとなっています。IoT.jsはnode.jsと後方互換性があります。 deviceJS deviceJSはIoTにおけるjQuery的位置づけを目指しています。他のデバイスを特定する、イベントフックなどが手軽に実装できるようになっています。x86とARM両方に対応
ブラウザベースでJavascriptのプログラミングができるエディタをまとめて紹介します。何かと話題のES6の対応状況や、コード補完、シンタックスハイライトなどもチェックしてます。 Codiad Codiad Codiadは、ダウンロードしてオンプレミスで利用出来るWebベースのIDEです。PHPで作られていて、データベースも不要ですので導入にあたっての敷居は低いでしょう。高速な開発をサポートする、シンプルなエディタを目指しているとあります。デモで実際に操作できますので、本格的な利用を前に確認して見てはいかがでしょうか。 主な機能 40を超える言語のサポート シンタックスハイライト コード補完 複数ユーザーのサポート 編集画面の分割 リアルタイムの共同編集 ES6対応状況 ES6にも対応していて、シンタックスハイライトやコード補完も可能でした。 Codiad Web Based IDE b
※ Google Chrome/Chromium限定です Google ChromeのDevToolsにはWorkspaceという機能が備わっています。フォルダを指定してDevTools上に登録し、編集できるようにする機能です。 使い方は Sources タブで Add Folder to Workspaceを選択します。 ディレクトリへのアクセス権限が求められますので、許可します。 フォルダを読み込んだら、さらにファイルを選択して Map to Network Resource を選択します。 そして現在開いているURLと関連づけます。 これでSourcesタブの中からWorkspaceに登録し、ネットワークアクセスしているファイルは一覧から消えます。なお登録後は一度リスタートする必要があります。 後は通常のエディタのようにファイルを編集して保存ができます。 ファイルのネットワーク読み込
古いIEのサポートが停止されたため、できることならばIEを刷新したいところですが実際にはそうそう簡単に移行は進んでいません。未だにIE8以降から対応を願われる案件も多いようです。 そこで今回は企業においてレガシーなIEを捨てきれない理由をリストアップしてみました。 ハードウェア問題 ブラウザの前に最新版に変えなければいけないのはOSです。今なおWindows XPが使われている企業も存在します。そのマシンに最新版のOSに差し替えたとしても、メモリやCPUが貧弱でまともに動かないでしょう。そうなるとOSの入れ替えコストだけでなく、ハードウェアの購入費用まで発生します。人数の多い企業では大きなコスト負担になってしまうことでしょう。 また、ハードウェア問題はオフショアにおいても起こりえます。東南アジアをはじめとする経済が大きくない地域では最新のハードウェアを用意するのは困難です。そのため、日本で
前回のGoogle Chrome DevToolsに続いて、今回はFirefoxの提供する開発ツールについて見ていきます。元々この手のツールが注目を浴びたのはFirefoxアドオンだったFirebugが最初だったのではないでしょうか。それもあってかFirefoxの提供する開発者ツールは細かい点まで気が配られた、とても使い勝手の良い機能となっています。 Firefox Developer Edition — Mozilla Firefoxの種類について Firefoxには2つの種類があります。一つは一般ユーザ向けのFirefoxで、もう一つはWeb開発者をターゲットにしたFirefox Developer Editionになります。Firefox Developer Editionは標準のFirefoxをベースに、開発に役立つアドオンがインストールされているものになります。今回はそのFire
XAMLは.NET Framework(WPF)を使ったアプリケーションやSilverlightアプリケーションを開発する際に使われる言語です。「C#とXAML」の関係はWebにおける「JavaScriptとHTML」の関係に似ていて、画面構造をタグベースで記述できる利点があります。しかし出来上がるアプリはあくまでWPF/Siverlightアプリであるため、あくまでもWindowsアプリケーションとして、あるいはSilverlightプラグインをインストールしたブラウザでのみ動作します。そのため、HTML5の普及が進むにつれ(プラグインベースの)Webアプリとしての利用は減ってきています。 そんな中、Userware社(2014/12/8 20:30修正:Microsoft)が開発しているのがC#/XAML for HTML5です。その名の通り、C#とXAMLの組み合わせでHTML5のW
次のページ
このページを最初にブックマークしてみませんか?
『hifive開発者ブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く