画面がなくデータだけある状態からAWS LambdaでPDFのレポートを作成したくて方法を調査して最終的にWeasyPrint + Jinjaで生成したので手順をまとめてみた | DevelopersIO
Pythonコードなどを作っていきます。「コード」タブを開いてlambda_function.pyに下記コードを貼り付けます。 import boto3 import os import pandas as pd from jinja2 import Environment, FileSystemLoader from weasyprint import HTML data_key = 'securityhub_data.xlsx' bucket_name = 'weasyprint-test-a87wtg' s3 = boto3.resource('s3') bucket = s3.Bucket(bucket_name) data_path = os.path.join('/tmp', data_key) def get_report_data(): # intで欠損値を扱えるようにする
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
MJML - The Responsive Email Framework
Write less, save time and code more efficientlyMJML is responsive by design on most-popular email clients, even Outlook. Write less code, save time and code more efficiently with MJML’s semantic syntax. See templates « I love MJML, it has really good solid components and a fantastic documentation » Jason Rodriguez, Product Manager These days, we email everywhere - standing up, sitting down, sleepi
HTML5でファイルアップロードを多機能にしてくれるライブラリ×9選
HTML5で表現力が豊かになり、APIが多数追加されたとあってもそれを活かすコードを書かなければ従来のWebと何ら変わりません。特にフォーム周りは多数の機能が追加されています。これらを使うこなすことでユーザビリティの高いフォーム機能が実現します。 今回はファイルアップロードに注目して役立つライブラリを紹介します。 JeremyFagis/dropify: Override your input files with style — Demo here : http://jeremyfagis.github.io/dropify ファイルをローカルコンピュータからドラッグ&ドロップしてアップロードできます。画像の場合、サムネイルを表示します。マウスオーバーするとアニメーションがかかったりするのでユーザがファイルをドロップする場所を迷わないで済みます。 JeremyFagis/dropify:
フリーで使えるHTML/CSSテーマ100選
Noupeは3月15日(ドイツ時間)、「Best of 2016: 100 Free HTML/CSS Themes - noupe」において、フリーで利用できるHTML/CSSデータを提供している100のサイトを紹介した。Webサイトの制作を高速化するには、こうした既存のデータをどこまでうまく使い回せるかがカギとなる。多くの素材を知っており、そこから適切な素材を選定できるかどうかがエンジニアリングとしてのスキルの1つとなっている。 紹介されているサイトは次のとおり。 New Age Creative Story Dimension Editorial Forty Genius – Minimal HTML Theme Ultimate Multi-Purpose Bootstrap Site Template GerduKreatip - Agency Portfolio Theme 6
Web業務システムでも使えるWYSIWYGエディタ×10選
業務システムでは担当者にテキスト入力を行ってもらうのは良くあることです。そんな時、単なるテキストエリアでは書きたい内容が書き切れないのではないでしょうか。そこで使われるのがツールバーを備えたWYSIWYGエディタです。 かつてはCKEditorがよく知られていましたが、あまりに多機能であるために動作が重たく、使いこなせないケースがよくありました。そこでもっとシンプルに必要十分な機能を備えたエディタを紹介します。 wysiwygetize 単なるテキストエリアに見えますが、文字を書いたり選択するとフローティングのツールバーが表示されます。画像貼り付けの機能はありませんが、文字装飾と見出し設定ができます。 wysiwygetize demo bootstrap-wysiwyg Bootstrapと組み合わせて利用します。画像の埋め込み、リンク、文字の配置など十分な機能が備わっています。 Tin
Twitter BootstrapでさくさくWeb開発 : アシアルブログ
新年度です！ 新入学、新入社を迎えるみなさん、おめでとうございます。 エンジニアのみなさんがWebアプリケーションを作るとき、一番悩むのはデザインではありませんか？ カッコよくって統一的なデザインがほしい！でもデザインセンスないし…実は私もそうでした。 ですが、2月にメジャーバージョンアップしたTwitter Bootstrapを使うと、簡単にカッコいいサイトが作れます！ Twitter Bootstrapとはなにか Twitter Bootstrap CSSのフレームワークです。 Web上に使ってみた！スゲー！等、たくさんのドキュメントが存在していますが、中には2月以前のバージョン(v1.4)について言及しているものもありますので、2系を使う方はバージョンの違いに気をつけて下さい（クラス名など結構ガラっと変わっています）。 今回ご説明しているのは、Twitter Bootstrap 2に
2012年3月第4週号 1位は、Bootstrapを補完するツールや素材、気になるネタは、アマゾン、実際に商品を購入した人のレビューに「証明マーク」表示 | gihyo.jp
週刊Webテク通信 2012年3月第4週号1位は、Bootstrapを補完するツールや素材、気になるネタは、アマゾン、実際に商品を購入した人のレビューに「証明マーク」表示 ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2012年3月19日～2012年3月25日の間に見つけた記事のベスト5です。 1. 20+ Beautiful Resources That Complement Twitter Bootstraphttp://www.webresourcesdepot.com/20-beautiful-resources-that-complement-twitter-bootstrap/ Bootstrapを補完するツールや素材を多数紹介しています。 この連載でも何度も取り上げていますが
【第27回 HTML5とか勉強会レポート】 LESSやTwitter Bootstrapで簡単デザイン
【第27回 HTML5とか勉強会レポート】 LESSやTwitter Bootstrapで簡単デザイン：D89クリップ（42） LESSやTwitter Bootstrapなどのツールを利用した、スマートなデザイン方法など、デザイン面にフォーカスされたHTML5とか勉強会レポート LESS、Twitter Bootstrap！ 2012年3月13日、ニフティで「第27回 HTML5とか勉強会」が開催されました。HTML5とか勉強会は、HTML5に関心のあるエンジニアやデザイナー向けの勉強会です。今回のテーマは「リッチクライアントをデザインする」でした。 HTML5やCSS3を利用することで、インタラクティブなコンテンツを作れるようになりました。その代わりにコンテンツをどうデザインするか、どうアプローチするかといったことを、デザイナーだけでなくデベロッパーも意識する必要があります。セッション
Home
Just make cool sh** stuff. Current Stack – Back to basics. Going “build–step free” for a handcrafted experience. Feb 23 2024 @joshua Yearning for a simpler time – the artisanal web. Websites are too BIG, too complicated, and too hard. Reactive programing is conceptually easy to grasp – but the distance between the end result vs. frameworks & tooling is too far apart. I get it, the web is a compl
Twitter bootstrap入門 #twtr_hack
The document discusses Twitter Bootstrap, an open-source front-end web development framework. It provides information on Bootstrap's history and features, including its grid system, typography, forms, buttons, navigation and other components. The document also offers tips on getting started with Bootstrap, customizing it using LESS, and related tools and resources.Read less
これからTwitter Bootstrapをはじめる人のためのエントリまとめ - 小さい頃はエラ呼吸
はじめに 今、Twitter Bootstrapが一部のエンジニアで人気です。 Twitter BootstrapはWebデザインが得意ではないエンジニア向けにTwitter社が開発／提供するCSSフレームワークです。このTwitter Bootstrapを利用すると、簡単にTwitterっぽいデザインのWebサイトを作成できます。 そこで、これからTwitter Bootstrapをはじめてみようと思うエンジニアの人たち向けに、役立つ記事の数々をまとめてみました。 このエントリを書こうと思ったきっかけは、以下のスライドでした。とても分かりやすく、はじめて知るようなサービスなども網羅されており、とても参考になりました。 Twitter bootstrap入門 #twtr_hack jQueryプラグイン徹底活用 プロのデザインアイデアとテクニックposted with amazlet at
第3回 HTML5を使って情報を共有する
World Wide Webが登場してから今日まで、“見た目重視”なWebページが数多く作成されてきました。HTMLも、その要求に応えるべくデザイン重視で仕様が策定されてきたと言っても過言ではないでしょう。 ですが、HTMLで記述されるコンテンツを「データベース」としてとらえるべきであると言う人が、インターネットの初期のころからいたことも事実です。HTML5になって、HTMLをデータベースにするために、つまりセマンティックな記述を正しく行えるように、いくつかの仕様が追加されました。 セマンティックの記述が可能になったHTML5 Webサイトの管理者は、見た目だけでなく意味的な情報を記述するため、RDFやmicroformatといった仕様を利用してきました。しかし、残念ながら多くの管理者は「SEO対策で仕方なく記述している」といったモチベーションだったと思います。現在ではソーシャルメディアが
Bridge Word
This shop will be powered by Are you the store owner? Log in here
YAML CSS Framework — for truly flexible, accessible and responsive websites
A modular CSS framework for truly flexible, accessible and responsive websites Features Bulletproof flexible grid system Flexible forms toolkit with theme-support Focussed on web standards & accessibility Optimized typography for all standard elements Matched building blocks for rapid prototyping Namespacing avoids conflicts with third-party CSS Well prepared for HTML5 and CSS3 Very slim framework
2008/12/17 日記: Java: TagSoup を使った HTML正常化のサンプル
(xhtmlではない) HTML 4.01 は、仕様として終了タグがオプションとなっているものがあります。さらに、そもそも文法的に間違った HTML が世の中に多く存在しています。(だけれども HTMLブラウザが気合いで表示しています) このような背景もあり、世の中の HTML には、結構いいかげんなものがあります。これを プログラムで読み込もうとすると、いろいろ難しいのですが、これを解決するたに、HTML正常化をおこなうツールを利用したくなることがあります。 HTML正常化を実現する OSSツールのひとつが TagSoup です。この TagSoup を使った、単純な HTML正常化サンプルを作成しました。 import java.io.IOException; import java.io.StringReader; import java.io.StringWriter
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Brackets - Web デザインを認識する最新のオープンソースコードエディター
HTML5 Boilerplate: The web’s most popular front-end template
HTML5 Reset
Components · Twitter Bootstrap