IFTTTにGoogle Apps Scriptを混ぜたらヤバい化学反応が起こった件 - もぐてっく
はじめに 2010年12月に彗星のごとく現れたWebサービス同士のマッシュアップサービスIFTTT。 「if (this) then (that)」と言うシンプル極まる構文で手軽にWebサービスが連携出来るのが特徴です。 IFTTTは様々なWebサービスをサポートしており、ちょっと挙げるだけでもTwitter、Evernote、Google Drive、Skypeなどの有名どころから、ナニコレ？ってものまで実に多彩です。 加えて、IFTTT独自のサービス群も魅力的です。 スマホ通知、Alexa・Google Homeの音声入力、スマホのウィジェット（メモ、ボタン、写真）など。 それらを前述のシンプルな構文で自由に組み合わせられるのが、IFTTTの魅力だと思います。 IFTTTの弱点 シンプルさが売りのIFTTTなのですが、それがそのまま弱点にもなっているという印象です。 例えば「為替の情報
VBA-Web - VBA用のWebライブラリ
今はWeb APIやRESTfulといったキーワードを無視できなくなっています。それはExcelやAccessでも同じです。しかしVBAでやったことがある人は分かりますが、XML HTTP Requestで作るのはなかなか面倒です。 そこで使ってみたいのがVBA-Webです。VBAがインターネット上のリソースとデータの送受信をするのに最適なライブラリです。 VBA-Webの使い方 例えばGoogleマップの機能を使って二点間の距離を算出します。 他にもGoogle Analyticsのデータを取得することも。 VBA-WebはGET/POSTだけでなく、PUT/DELETEも使えます。Cookieにも対応し、JSONも扱えます。OAuth2認証にも対応していますので、最近のWeb APIであれば問題なく利用できるでしょう。 VBA-WebはVBA製のオープンソース・ソフトウェア（MIT L
de:code2018セッションフォローアップ「進化する Web ～ Progressive Web Apps の実装と応用 ～」 | Microsoft Docs
de:code2018セッションフォローアップ「進化する Web ～ Progressive Web Apps の実装と応用 ～」 07/03/2018 7 minutes to read ひさびさにブログを書く時間が取れたので、今ごろですが de:code 2018 で私が担当した AD09「進化する Web ～ Progressive Web Apps の実装と応用 ～」のについてのフォローアップ記事を書きます。 二日目の最終セッションにもかかわらず、ご参加くださいました皆様、誠にありがとうございました。 アンケートの内容を見るに、多くの方にご満足いただけたようで非常にうれしく思います。 この記事では、同セッションの内容について記述していきます。 進化する Web ～ Progressive Web Apps の実装と応用 ～ 進化する Web ～ Progressive Web Ap
PatternFly - Red Hat製のWeb UIフレームワーク
HTMLは自由度が高い反面、何でも自分でイチから作らなければならないイメージがあります。そのためUI、JavaScriptフレームワークは貴重です。それらを使うことで効率を大幅に高められます。 今回紹介するPatternFlyはUIフレームワークで、Red Hat社によって開発されています。 PatternFlyの使い方 例です。データテーブル。 管理画面。グラフも多数用意されています。 スライダー。 カード。 コメント。 通知。 ウィザード。 グラフ。 フォーム。 日付ピッカー。 テキストボックスフィルター。 パンくず。 ページネーション。 アコーディオン。 アラートとバッジ。 ツリービュー。 PatternFlyはjQueryを使っており、企業などのWebシステム開発において活躍しそうです。ウィジェットやデザインのパターンも多数用意されていますので、管理画面の作成など、様々なシステムに
Framework Inspector - Webサイトがどのライブラリで作られているのかチェック MOONGIFT
Webサービス、Webサイトを支える技術は無数に存在します。トレンドの移り変わりも激しく、どれを選んだら良いのか分からないという方も多いでしょう。そんな時、有名なサービスで使われているものを選ぶという選択は決して間違いではありません。 そこで使ってみたいのがFramework Inspectorです。気になるサイトがどんなCMS、フレームワークを使っているのが分かります。 Framework Inspectorの使い方 hifiveの例です。jQuery/Facebook/Twitter/Apacheなどが検出されています。 Drupalの場合。CMSとしてDrupalは当然として、nginxで動いているのも分かります。 Ruby on Railsのサイト。SPDYが使われています。 もちろん検出できないサイトもありますが、多くのサイトでアイコン表示が有効になるでしょう。そういったサイトが
コーディングをするときに鼻血がでるほど便利なwebツールリスト - Qiita
普段お世話になっているwebツール達の紹介です。 以下のサイトはすべて 無料 & 登録不要 です。 正規表現 regexper 正規表現を可視化してくれます。 複雑な正規表現を書くときやコードリーディングのお供に重宝します。 Rubular Rubyの正規表現をテストできます。 JSON JSON FORMATTER & VALIDATOR JSON系のツールが集まったサイト。 それぞれ、サイト名とドメインが違うのでリンクはそのうちの１つになっています。 (画像クリックでそれぞれのツールに飛べます。) ひとつずつ紹介します。 JSONをフォーマットしてくれます。 出力結果は折りたたむことができるので、長いJSONを読むときにも便利です。 JSONを含めた様々なデータ形式を変換できます。 Inputの以下に対応。 CSV INI JSON XML YAML Outputは以下に対応。 JSO
GoでWebアプリを作ろう 第一回 : Goで簡単なCRUD - Studio Andy
こんにちは、Andyです。 普段はフロントエンドチームでJSばかり書いているのですが、せっかくGoの会社に入ったので良い機会だと思いGoに入門してみました。「Goの作法」を知ればより裏側のシステムについての理解が深まり、フロント側も良いプロダクトが作れるんじゃないかなと期待しています。 せっかく新しい言語を学ぶので、学習の中でやった事や詰まった事を文字で残そうというのが本記事の目的。 とてもじゃないですが1回で全てをカバーできないので数回に分けてチャレンジします。 手探りで自分なりのベストプラクティスを模索している最中なのでマサカリ大歓迎です。 現在のスタック 学習を始めるにあたって、自分のエンジニアとしてのスタックはこんな感じ。 Ruby on Rails, ES6 (業務レベル) PHP, Perl, Python (趣味レベル) ちなみにgolangの経験値はA Tour of Go
WebSlides - 多彩な表現が可能なHTMLプレゼンテーションフレームワーク MOONGIFT
プレゼンテーションというとPowerPointやKeynoteで作ることが多いですが、HTMLでのプレゼンテーションも使われるようになっています。しかし表現力があまり高くなく、シンプルなスライドが多かったように思います。 そこで使ってみたいのがWebSlidesです。これまでにないほど表現力の高いHTMLスライドが作れるフレームワークです。 WebSlidesの使い方 例えばこんな表示。大きな画像を背景に当てています。 クラスも多数用意されています。 2つのカラムでの表現。ソースコードをハイライトできます。 上下左右、どこでも自由に記述できます。 左寄せ。 3カラムでのグリッド表示。 地図表示の例。 ナビゲーション。 Apple風のクラスが用意されています。 なんとなくそれっぽいですよね。 こんな表示も。HTMLならではですね。 Webサイトにも使えそうなデザインです。 表現という意味にお
超高速な静的Webページを作ろう！ - Qiita
PageSpeed Insights 計測結果 モバイル/パソコン 共に100点 速度という点に絞ると信用できるものではないかもしれませんが、100点という数字は単純にうれしい:) それでは！以下が私のやったことです リクエスト数を極限まで減らす CSSはstyle属性やstyleタグで設定 複数箇所で使う場合はstyleタグに、要素固有のスタイルはstyle属性で設定してしまいましょう。 style属性で設定する場合はセレクタでの捜索が発生しないので、ごく僅かながら速くなると思います。 画像はbase64で埋め込む こことかでデータURIスキームに変換してhtmlに埋め込みます。 base64エンコードすると容量が1.3倍くらいに増加するため大きな画像には向かない方法ですが、小さなアイコン程度ならリクエスト数減らすほうが効果的な場面があります。 複数箇所に使う画像の場合はCSS変数でba
2017年11月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン Adobe XD 11月アップデートリリース！デザインスペック追加で開発者への受け渡しをもっと簡単に #AdobeXD | Adobe Creative Station デザインスペックはAdobe MAXでも話題になっていましたね。かなり期待されている機能だと思います。 もっと楽するweb制作！Illustrator & Photoshop 動画解説 – のんびりデザインしているような。 Adobe MAXでの北村さんのセッションの動画や補足がまとめられています。 知財教材「デザイナーが身につけておくべき知財の基本」 | 経済産業省 特許庁 デザインと知的財産権などについてまとめられ
nezumi - Google Chromeのフォーム入力からCapybara/RSpec対応のテストコードを生成 MOONGIFT
テストコードを書くのは面倒です。特にWebブラウザの表示を再現するような類のものは面倒に感じるでしょう。面倒だとどうしても記述が疎かになったり、テストが不十分になったりします。 そこで使ってみたいのがnezumiです。Google Chromeの入力内容からCapybara/RSpec対応のテストコードを生成します。 nezumiの使い方 Google ChromeのDevToolsにnezumiというタブが追加されます。そこを表示したままフォームに入力を行うとCapybara対応のコードが作れます。 入力する度にコードが追加されていきます。フォームに入力したら、後はCOPYボタンを押すだけです。 nezumiを使うことで実際に動いているフォームに対して本物に近い入力を試せるようになります。作られたコードをコピペするだけなので、後はちょっと入力を変えてテストすると言ったこともできるでしょう
Selenium IDEの代替を目指すソフトウェアまとめ
Seleniumがこれだけ使われているのはSelenium IDEの存在がとても大きかったと言えます。普通にブラウザを操作するだけでコードが生成でき、それを編集することで様々に値を変更したテストが実現できます。 そんなSelenium IDEは最新版のFirefoxではAPIの互換性がなく、動かなくなっています。そんな中、幾つかのソフトウェアが代替を目指して開発されています。 SideeX (An Extended Version of Selenium IDE) 最も有力と思われる代替ソフトウェアです。Firefoxの他、Google Chromeでも動作します。複数のテストを一つのウィンドウの中でまとめて管理できるようになっています。現在はテストコードの出力機能がないなど、まだ足りない機能も多いですが、開発が活発に行われています。 SideeX (An Extended Version
訪れたサイトからどんな第三者サイトに接続しているかが一目でわかるアドオン「Firefox Lightbeam」
我々がウェブサイトを訪問すると、そのウェブサイトに埋め込まれたコードが実行されて、訪問したわけではないサイトに接続しているケースがあります。時には行動監視(トラッキング)のためだったり、あるいはその他の目的だったりして、必ずしも悪意がある事例ばかりではありませんが、見えないところでどこへ接続されているのかは気になるもの。いったい、ブラウジングの中で、我々はどれぐらいの第三者サイトに接続してるものなのか、「Firefox Lightbeam」というアドオンを使って確認してみました。 Firefox Lightbeam https://addons.mozilla.org/en-GB/firefox/addon/lightbeam/ Remaking Lightbeam as a browser extension ★ Mozilla Hacks – the Web developer blo
UI Recorder - node.js製のSelenium IDE代替 MOONGIFT
Selenium IDEが最新のFirefoxで動かなくなりました。これに伴い、新しいAPIで動くIDEも開発がスタートしたようですが、それを待つのも辛いでしょう。かといって旧バージョンを使い続けるのも問題です。 そこで使ってみたいのがUI Recorderです。新しく登場したSelenium IDEライクなWebブラウザの操作記録ソフトウェアです。 UI Recorderの使い方 UI Recorderではまずディレクトリを作って初期化します。 $ uirecorder init __ ______ ____ __ / / / / _/ / __ \___ _________ _________/ /__ _____ / / / // / / /_/ / _ \/ ___/ __ \/ ___/ __ / _ \/ ___/ / /_/ // / / _, _/ __/ /__/ /_/
SQLite Web - SQLiteをWebベースで管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発時においてSQLiteを使うケースが増えています。MySQLなどと比べても大差ない使い勝手ですし、わざわざサーバを立ち上げることなく使えるのが手軽です。O/Rマッパーを使っているならばデータベースの違いを意識することもないでしょう。 そんなSQLiteにWebベースの管理画面を提供するのがSQLite Webです。コマンドラインから任意のデータベースを指定できるのが便利です。 SQLite Webの使い方 SQLite Webの実行はコマンドラインでできます。 sqlite-web /path/to/sqlite.database そうするとWebページが開いてデータベースの内容が確認できます。 データベース構造の確認。 内容の確認。 任意のSQLを実行できます。結果をJSON
サーバPUSHざっくりまとめ
ポーリング、Ajax、Comet、Server Sent Events、WebSocket サーバPUSH方式の大雑把な比較 Read less
webのプロジェクトフォルダ直下のファイルの意味をまとめてみた - Qiita
(2017/06/02) package-lock.jsonについて追記しました。 昨今のweb開発では、プロジェクト直下に多くのファイルが配置されます。 本エントリーでは、1つ1つのファイルがどんな意味を持つのか、どんな技術で使われているのかをまとめました。ピックアップしたのはGoogleのWeb Starter Kitの一部と、筆者がよく使う技術です。 次のファイルについて紹介します(随時更新中)。 package.json .gitignore webpack.config.js gulpfile.js .eslintrc tsconfig.json tslint.json yarn.lock package.json npmの設定ファイルです。 npmとは、Node.jsのパッケージを管理するためのツール。Node.jsのパッケージとは、Sassを使うためのnode-sassパッケ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
任意のWebページのデータ等を自動でスプレッドシートに挿入、Excelファイルとしてダウンロードできる・「Listly.io」
Web Push Notifications - DZone
知っているようで知らないWebサーバアーキテクチャ
