গত সপ্তাহের অ্যাপসিগন্যাল আপডেটে প্রতিটি স্ক্রিনের জন্য আপডেটেড ইন্টারফেস ডিজাইন ছিল। এর মানে আমাদের হোমপেজের সব স্ক্রিনশট আপডেট করতে হতো, যাতে সেগুলো অ্যাপের বর্তমান অবস্থা রিফলেক্ট করে। এই ব্যাপক ম্যানুয়াল লেবার কমাতে, আমরা প্রসেসটি অটোমেট করার সিদ্ধান্ত নিলাম।
সৌভাগ্য despre, আমরা তvirkল স্মরণ করলাম যে Selenium স্ক্রিনশট নিতে সক্ষম। আমরা ইতিমধ্যে Capybara-এর মাধ্যমে ফিচার টেস্টের জন্য Selenium অনেক বেশি ব্যবহার করি, তাই আমরা যাচাই করতে বসে যে এটি নতুন মুভিং পার্টস ছাড়া টাস্কটি অটোমেট করার উপায় কিনা। কিছু টিংকারের পর, আমরা জানলাম আমাদের প্ল্যানটি ফিজিবল।
স্ক্রিনশট নেওয়ার API খুব সরল। শুধু ব্রাউজার উইন্ডোকে আপনার কাঙ্ক্ষিত সাইজে সেট করুন, পেজ ভিজিট করুন এবং স্ক্রিনশট নিন:
require 'capybara' Capybara.default_driver = :selenium page.driver.browser.manage.window.resize_to(1600, 1200) visit 'https://appsignal.com' page.save_screenshot(file)এটি নির্দিষ্ট লোকেশনে একটি png ফাইল তৈরি করে। কিন্তু রেটিনা স্ক্রিনশট নিতে চাইলে একটি ক্যাভিয়াট রয়েছে: Chrome ড্রাইভার রেটিনা স্ক্রিনশট নেয়, কিন্তু শুধু ভিজিবল এরিয়া। Firefox ড্রাইভার অন্যদিকে পুরো পেজ শুট করে, কিন্তু রেটিনা রেজোলিউশনে নয়। এবং যেহেতু আমাদের টিমের সবাই রেটিনা স্ক্রিন ব্যবহার করে না, তারা স্ক্রিনশট আপডেট করতে পারত না।
কিছু খুঁজে বের করার পর, আমরা chrism-এর এই Gist-এ সমাধান পেলাম। এই চমৎকার হ্যাক ব্যবহার করে আমরা Firefox-কে স্ক্রিনশট নেওয়ার ঠিক আগে পেজকে নরমাল সাইজের দ্বিগুণে ব্লো-আপ করি:
page.driver.execute_script(' body = document.getElementsByTagName("body")[0]; body.style["transform-origin"] = "top left"; body.style["transform"] = "scale(2)"; ')পুরো পেজের রেটিনা স্ক্রিনশট হলে, পরবর্তী ধাপ হলো convert CLI টুল (ImageMagick-সহ আये) ব্যবহার করে কাঙ্ক্ষিত ডাইমেনশনে ক্রপ করা:
`convert #{file} -crop #{1600 * 2}x#{ 800 * 2}+0+0 #{to_file}`আমাদের ডাইমেনশন দ্বিগুণ করতে হয়েছে, কারণ ImageMagick জানেনা এটি রেটিনা ইমেজ। এটি শুধু 3200px by 1600px मानে। to_file` সরাসরি আমাদের অ্যাসেটস ফোল্ডারের ফাইলকে পয়েন্ট করে।
অবশেষে, আমরা pngquant ব্যবহার করে ফাইলটি অপ্টিমাইজ করি। আমাদের সাধারণ স্ক্রিনশট 220kB থেকে 250kB রেঞ্জে থাকে, যাতে আমাদের অবশ্যই সাইজ মিনিমাইজ করতে হবে:
`pngquant --force --output #{to_file} #{to_file}`এটাই সব। আমরা এই কমান্ডগুলো বেস করে একটি Rakefile লিখেছি যা ডিজাইন চেঞ্জ হলে বারবার চালানো যাবে। সম্পূর্ণ কোডসহ একটি Gist এখানে পাবেন।
এই প্রসেস অটোমেট করলে ইতিমধ্যে ফলদায়ক হয়েছে, এবং ভবিষ্যতেও আমাদের sane রাখবে। এখন, ট্যুর এবং অন্যান্য জায়গায় সকল রেটিনা গ্লোরিতে ফলাফলের ইমেজগুলো উপভোগ করুন!
