dandelionS Blog

As part of our engineer blog, we’d like to share what we’ve been learning day by day.
This time, it’s Team 2, focusing on low-code development.

This Time’s Theme: ‘PDF Output Using Ultimate PDF

This time, we’ll show you how to export screen data within OutSystems as a PDF.

What is Ultimate PDF?

Ultimate PDF is one of the Forge components available in OutSystems. It allows you to export web pages (HTML + CSS) as PDFs.
For example, you can generate PDFs of formatted content like invoices, reports, business cards, and forms.

Installing Ultimate PDF

Launch Service Studio, search for ‘Ultimate PDF’ via Browse Forge, and install it.

Adding References to the Module

Open the module you want to use, go to Manage Dependencies (CTRL+Q), select the necessary elements from Ultimate PDF, and click the Apply button.
(This time, we selected PrintLayout, HideOnPrint, and PrintToPDF_Advanced.)

Descriptions of each element are as follows.

・PrintLayout: A layout template used to optimize screens for printing or PDF output.

・HideOnPrint: A CSS class (style setting) for screen design that, as the name suggests, hides specific elements during printing.

・PrintToPDF_Advanced: An advanced function that allows for more detailed settings when converting HTML screens (web pages) into PDFs.

Creating a Screen for Output

To create a screen for output, follow the same steps as when creating a regular Screen. Place ‘PrintLayout’ on the screen and design the layout you want to export as a PDF.

For any text you don’t want to appear in the PDF output, add ‘HideOnPrint’ to the screen and place the text inside it.

Creating a Server Action for PDF Output

This time, we’ll place an output button on the screen we created earlier and set up a Server Action that triggers a download when the button is pressed.

The properties for each action are as follows
・PrintToPDF_Advanced: Under Action, set the URL of the screen you want to export (in this case, we’re using the current screen’s URL), the PDF page size, and the PDF margins.

・Download: Under Action, set the return value from PrintToPDF_Advanced and the name of the PDF.

Here is the PDF we actually generated.

Important Notes

・Be careful when choosing between Client Action and Server Action. Since PDF generation is generally handled on the server side, calling it from a Client Action by mistake may result in it not working properly.

・Always enclose the FileName in double quotation marks (“”).If not specified like \”Test.pdf\”, it will result in an error

・Screens with a large amount of information are more likely to time out. If there are many tables or images, PDF generation may take longer.

Summary

In this article, we introduced how to generate PDF files from OutSystems using Ultimate PDF.
Since it can also output images and graphs, be sure to try it out in apps that generate reports or forms.
Team 2 will continue to share technical blogs using low-code tools like OutSystems, so stay tuned!

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回は、ローコード開発をテーマにしているチーム2です。

今回のテーマ：『Ultimate PDFを使ったPDF出力』

今回はOutSystems内にある画面データをPDFとして出力する方法をご紹介します。

Ultimate PDFとは

OutSystemsに搭載されているForgeコンポーネントのひとつで、
Webページ（HTML＋CSS）をPDFとして出力できます。
例えば、請求書・報告書・名刺・帳票などレイアウトされた内容をPDF化できます。

Ultimate PDFのインストール

Service Studioを起動しBrowse Forgeより”Ultimate PDF”で検索してインストールを行います。

モジュールへの参照追加

利用したいモジュールを開き、Manage Dependencies（CTRL+Q）よりUltimate PDFの要素を必要な分選択しApplyボタンをクリックします。
（今回はPrintLayout、HideOnPrint、PrintToPDF_Advancedを選択しました）

各要素の説明は以下の通りです。

・PrintLayout …”画面を印刷やPDF出力に最適化するためのレイアウトテンプレート” です。

・HideOnPrint …画面デザインで使えるCSSクラス（スタイル指定）のひとつで、その名の通り「印刷時に非表示にしたい要素」に付けるための機能です。

・PrintToPDF_Advanced …HTML画面（Webページ）をより細かく設定してPDF化できる拡張版の関数です

出力用の画面の作成

出力用の画面を作るときですがScreenを作る時と同じ要領で作成します。
画面に”PrintLayout”を配置しPDF出力したい画面を作成します。

PDF出力する際に出力されてほしくない文字は”HideOnPrint”を画面に追加しその中に文字を入力します。

PDF出力用のSever Actionの作成

今回は上記で作成した画面に出力ボタンを配置し押下時にダウンロードするServerActionを作成します。

各アクションのプロパティは以下の通りです。
・PrintToPDF_Advanced…Action＞出力したい画面のURL(今回は現在の画面URLを取得しています)、PDFの画面サイズ、PDFの余白をそれぞれ設定します。

・Download…Action＞PrintToPDF_Advancedの戻り値、PDFの名前をそれぞれ設定します。

実際に出力したPDFはこちら

注意事項

・Client Action と Server Action の使い分けに注意。
PDF生成は基本的にサーバー側で行うため、誤って Client Action から呼び出すと正しく動作しない場合があります。

・FileName には必ずダブルクォーテーション（””）を付ける。
"Test.pdf" のように指定しないとエラーになります。

・画面の情報量が多いとタイムアウトしやすい。
テーブルや画像が多いと生成に時間がかかります。

まとめ

今回はUltimate PDFを使ってOutSystemsからPDFファイルを出力する方法をご紹介しました。
画像やグラフなども出力できますので帳票やレポート出力を行うアプリでぜひ活用してみてください。
チーム2ではこれからもOutSystemsなどのローコードツールを使った技術者ブログを展開していきますのでお楽しみに！

As an engineer’s blog, I’d like to share what I’m learning on a daily basis.
This time, I’ll introduce the popular video generation tool Sora2.

■ From Books to AI──The Evolution of Information Retrieval

In the old days, learning a skill meant frequenting bookstores and libraries. It was an era of poring over thick technical manuals and taking time to understand them. Then the spread of the internet gave birth to a culture of “searching,” and soon “Googling” became commonplace.
And now—
People have entered the era of “asking AI.”
In just a few decades, our relationship with knowledge has evolved this far.

■ How are you all using it?

Many people have tried out AI tools like ChatGPT, image generation AI, and voice synthesis tools. At Dandelions Japan, we’re already leveraging AI for video production for e-commerce sites. By incorporating AI-assisted video generation, we’ve significantly improved production costs and speed. AI is no longer just “research”—it’s become a “tool for the field.” And its adoption will only accelerate from here.

■ The Impact of SORA2’s “Life-Like Videos”

OpenAI’s “SORA2” is a technology that generates realistic videos from text. It has reached a level where it can create footage of people speaking and moving naturally from a single still image.
For example,
　・A speech video that does not actually exist
　・Unfilmed “dance” scenes
　・A video that seems to speak to you, based on photographs of the deceased
──These can be generated with just a few lines of text.
Technologically astonishing, yet simultaneously highlighting issues of copyright and portrait rights. “Even though it’s based only on the person’s image, a video that looks exactly like them is generated.” The boundary between reality and virtuality is becoming more ambiguous than ever before.

■ How to Leverage AI Videos?

When used correctly, this technology opens up endless possibilities for creativity.
　・Historical Reenactment in Education and Museum Fields
　・Sign language and language learning support
　・Streamlining Product Introduction and Advertising Videos
　・Artist Virtual Appearance
We are also gradually incorporating AI-generated content into product description videos and promotional footage on our e-commerce site, Dandelions Japan.

■ Three Proposals for Effective Utilization

1. Subject to the consent of the individual or creator
   AI-generated content must prioritize obtaining consent from the rights holders of the source material.
2. Disclose the generation of content
   By explicitly stating “This video was generated by AI,” we maintain transparency and trustworthiness.
3. Limited to use for educational, research, and expressive purposes
   Not for the purpose of faking, but solely as a “creative assistive technology.”

■ Summary: AI’s value changes based on “who uses it and how”

AI technology is evolving daily. “Hyper-realistic videos” like SORA2 expand creative possibilities while demanding new ethical frameworks for society as a whole. What’s required of us creators and businesses isn’t choosing “not to use” it, but adopting an attitude of designing “how to use it.” Rather than fearing AI, we should strive to understand it correctly and explore ways to utilize it for the future’s benefit.

Well then, stay tuned for the next blog post.

技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回は話題の動画生成ツールSora2の紹介です。

■ 書籍からAIへ──情報探索の進化
昔、技術を学ぶといえば本屋や図書館に通うものでした。分厚い専門書を読み込み、時間をかけて理解する時代。そこからインターネットの普及で「検索する」文化が生まれ、やがて“ググる”が当たり前に。
そして今──
人々は 「AIに聞く」 時代に突入しました。
たった数十年で、私たちの知識との付き合い方はここまで進化しています。

■ 皆さんはどう活用していますか？
ChatGPTや画像生成AI、音声合成ツールなど、「AIを触ってみた」という人は多いでしょう。私たち Dandelions Japan でも、ECサイト向けの動画制作にすでにAIを活用しています。映像生成の補助を取り入れることで、制作コストとスピードを大幅に改善しています。AIはもはや“研究”ではなく、“現場のツール”になりました。そして、今後はさらにその活用が加速していくでしょう。

■ SORA2がもたらす「本物そっくり動画」の衝撃
OpenAIが開発する 「SORA2」 は、テキストからリアルな動画を生成する技術です。静止画1枚から人物が自然に話したり、動いたりする映像を作れるレベルに到達しました。
たとえば、
　・実際には存在しない“演説”動画
　・撮影していない“ダンス”シーン
　・亡くなった人物の写真をもとに“語りかける”ような映像
──これらが、ほんの数行のテキストで生成可能です。
技術的には驚異的ですが、同時に 著作権・肖像権の問題 が浮き彫りになっています。「本人の画像を元にしただけなのに、本人そっくりの映像が生成されてしまう」。現実と仮想の境界が、かつてないほど曖昧になってきています。

■ AI動画をどう活かすか？
この技術を正しく使えば、クリエイティブの幅は無限に広がります。
　・教育・博物館分野での歴史再現
　・手話や言語学習支援
　・商品紹介・広告ムービーの効率化
　・アーティストのバーチャル出演
私たちのECサイト「Dandelions Japan」でも、商品説明動画やイメージ映像に、AI生成を段階的に取り入れています。

■ 有用的な活用のための3つの提案
　１．本人・制作者の同意を前提とする
　　AI生成物は「素材の権利者の同意」を第一に考える。
　２．生成コンテンツの明示を行う
　　「この映像はAIで生成されています」と明示することで、透明性と信頼性を保つ。
　３．教育・研究・表現のための活用に限定する
　　フェイクを目的とせず、あくまで“創造的な支援技術”として使う。

■ まとめ：AIは“誰がどう使うか”で価値が変わる
AI技術は日々進化しています。SORA2のような「本物そっくり動画」は、創造の可能性を広げると同時に、社会全体に新しい倫理の枠組みを求めています。私たちクリエイターや事業者に求められるのは、「使わない」選択ではなく、「どう使うか」を設計する姿勢。AIを怖がるのではなく、正しく理解し、未来にとって“プラスになる活用”を模索していきたいですね。

では、次回のブログもお楽しみに。

Thank you for taking the time to read this article.
I’m “OZ,” and I’ll be your writer for this post.
Earlier this year, four of us who joined the company together visited Higashiyama Zoo and Botanical Gardens.
As part of a team-building event, we were given the following three missions
・Get to know our fellow new hires better
・Explore the zoo while discussing which areas could be improved with IT
・Find the sponsorship sign for the Dandelions

Get to know our fellow new hires better

The missions were super easy—almost like they didn’t even exist! Since we were already good friends at work, we completed them without any

Explore the zoo while discussing which areas could be improved with IT

This mission sparked a lot of ideas!
First, we noticed that tickets at the entrance gate were being handed out one by one in paper form. We discussed how switching to QR code tickets could reduce the workload and improve efficiency. However, some pointed out that not everyone owns a device capable of scanning QR codes, like a smartphone. Another idea was to add QR codes to the animal information signs, allowing visitors to watch videos of the animals in action or read more detailed descriptions. There was also a suggestion for a system where visitors could select the animals they want to see, and a map would display a recommended route—taking into account feeding times and other factors to create an efficient path.

Find the sponsorship sign for the Dandelions

While my teammates had been to the zoo before and seemed to know their way around, I was the only one unfamiliar with the place and ended up wandering on my own. I decided to explore without looking at the park map, just going wherever my feet took me—but then it started to rain. Without an umbrella and unable to continue exploring, I finally asked my teammates for help. Thanks to them, I was able to find my way and reach the destination.

Summary

During our visit to the zoo, I was able to bond more with my teammates and discover sides of them I hadn’t seen before, which made the experience really enjoyable. I’d never walked around while thinking about how things could be improved with IT, so it felt fresh and eye-opening. It made me wonder—maybe this is how new ideas for work are born?

That’s all for this time.
Stay tuned for the next article!

ご覧いただき、ありがとうございます。
今回の記事を担当します、「OZ」です。
今年入社した同期4人で東山動植物園に行ってきました。
今回は親睦会イベントとして、以下の3つの指令が出されました。
・同期のみんなと仲良くすること
・動物園のどこの部分がIT化できるか話し合いながら見ること
・ダンデライオンズのスポンサー看板を見つけること

同期のみんなと仲良くすること

この指令はとても簡単で、あってないようなものでした。
もともと社内にいるときから仲良しだったので、難なくクリアできました

動物園のどこの部分がIT化できるか話し合いながら見ること

この指令では、様々なアイデアが出ました。
まず、入園ゲートで紙のチケットを一枚ずつ手渡ししていたので、QRコードでのチケットを導入すれば負担も少なく効率化できるのではないかと話しました。
ただし、スマホなどのQRコードを読み取ることのできる機械を持っていない方が一定数いるという意見も出ました。
他にも、動物の紹介看板にQRコードを付けて、活発に動いている動画や詳しい説明が見られるようにすると良いのではという話も出ました。
また、自分が見たい動物を選択すると、マップに動線が表示されたり、エサやりの時間などを考慮した効率的なルートが提案されるシステムがあれば便利だという意見もありました。

ダンデライオンズのスポンサー看板を見つけること

同期は以前この動物園に来たことがあり場所を知っているようでしたが、自分だけ場所を知らずに散策することになりました。
園内マップを見ずに行き当たりばったりで歩き回っていると、雨が降り出しました。
傘を持っておらずこれ以上散策できないと判断し、最終的に同期に助けを借りて場所を教えてもらい、たどり着くことができました。

まとめ

今回動物園で、同期とより仲良くなり、みんなの知らない一面なども見ることができて楽しく回ることができました。
今までどこをIT化するかを考えながら行動したことがなかったので新鮮であり、こういうところから新しい仕事が生まれていくのかな？と勝手に思ったりしました。

今回は以上となります。
次回の記事もお楽しみに!