Make custom macOS apps: creating our own web development toolsMakecustommacOSapps:creatingourownwebdevelopmenttools

The two best use cases we’ve found for ai are

1. getting it to write regular expressions ¹
2. getting it to write ffmpeg commands ²

We so frequently create videos for the web, and each one needs

• an optimised .mp4
• an optimised .webm
• an optimised poster image

We blogged our ffmpeg commands for generating the two optimised videos last year but it’s a chore to run the commands in a shell for every video.

And like any good web developer, if you find yourself doing a boring computer task repeatedly…

Automate it

We can – and do – use Shortcuts and Automator, but sometimes it’s quicker and easier just to get AI to honk a wad of code up rather than use a drag-and-drop gui.

We’re fans of – but not very good at – AppleScript, so we prompted ChatGPT to combine those two commands, plus export an avif image of the first frame for the poster:

After a bit of trial and error it eventually came up with this script (code gist)

on open droppedFiles
	repeat with theFile in droppedFiles
		set posixPath to POSIX path of theFile
		set fileName to do shell script "basename " & quoted form of posixPath
		set baseName to text 1 thru ((offset of "." & "mp4" in fileName) - 1) of fileName
		set dirName to do shell script "dirname " & quoted form of posixPath

		-- Append .optim to baseName for output files
		set optimBaseName to baseName & ".optim"

		-- Set relative filenames
		set optimMP4File to optimBaseName & ".mp4"
		set optimWebMFile to optimBaseName & ".webm"
		set optimAVIFFile to optimBaseName & ".avif"

		-- Set full output paths
		set optimMP4Path to dirName & "/" & optimMP4File
		set optimWebMPath to dirName & "/" & optimWebMFile
		set optimAVIFPath to dirName & "/" & optimAVIFFile

		-- Path to ffmpeg binary
		set ffmpegPath to "/opt/homebrew/bin/ffmpeg"

		-- Run ffmpeg for H.264 optimization
		do shell script ffmpegPath & " -i " & quoted form of posixPath & " -vcodec h264 -acodec aac -crf 30 -strict -2 " & quoted form of optimMP4Path

		-- Run ffmpeg for VP9 WebM conversion
		do shell script ffmpegPath & " -i " & quoted form of posixPath & " -vcodec libvpx-vp9 -b:v 1M -acodec libvorbis " & quoted form of optimWebMPath

		-- Export first frame as high-quality AVIF
		do shell script ffmpegPath & " -i " & quoted form of posixPath & " -frames:v 1 -q:v 0 -still-picture 1 " & quoted form of optimAVIFPath

		-- Generate HTML video tag with relative paths
		set htmlCode to "<video autoplay loop muted playsinline controls poster=\"" & optimAVIFFile & "\">
  <source src=\"" & optimMP4File & "\" type=\"video/mp4\" />
  <source src=\"" & optimWebMFile & "\" type=\"video/webm\" />
</video>"

		-- Copy HTML to clipboard
		set the clipboard to htmlCode
	end repeat
end open

There was an issue with an incorrect path to ffmpeg, they originally suggested /usr/local/bin/ffmpeg – you can find the correct path on your system with the command which ffmpeg.

We later asked it to create an HTML video tag with the src’s set to the correct filenames and copy that to the clipboard ready for pasting.

Making the app

• Open the Script Editor app in your Applications > Utilities folder
• Paste in that code (gist)
• Export it as an Application

Test drag an mp4 onto it, stand back and admire your computer computing. You should find your clipboard contains the following HTML:

<video autoplay loop muted playsinline controls poster="test-video.optim.avif">
  <source src="test-video.optim.mp4" type="video/mp4" />
  <source src="test-video.optim.webm" type="video/webm" />
</video>

We hope this inspires you to make all sorts of web development tools, we have a whole bunch of single-use apps for generating Astro website JSON, optimising images, creating website folder structures and so on.

We’re sure you can save yourself some time by making your own macOS apps, please share yours with us on Bluesky or Mastodon!