In commemoration of the 100th follower milestone, Blog Application and Multilingualization

The other day, two days before the end of January, we successfully achieved our goal of 100 followers on Instagram and Twitter for the end of January🎊!

As I was planning to do something to commemorate the occasion, I saw and heard about “web apps” from IT specialist Mitta.

I thought, wouldn’t it be great if I could “appify” my blog as well? So I came up with the idea of implementing a website like an app.

Recently, I started to pursue various things about websites, and when I was analyzing the data in Google Analytics, I was surprised by the results!

As of February 7, 2022

We noticed a surprisingly large number of visitors from the U.S. and demand for English.

About 25% of the total users, or about a quarter of the total users, were from overseas.

Therefore, I decided to try to “multilingualize” my blog.

In this article, I’ll start with the basics of what an app is. In this article, I would like to introduce the basics of what an app is, how to browse with it, and how to switch languages.

What is an app?

The word “app” that we often hear in our daily lives is an abbreviation for “application,” meaning software that is installed on an OS and used in general. Whenever we use a smartphone, computer, or tablet to do something, we are running some kind of application to do the work.

OS: Operating System (basic software)

When it comes to operating systems for personal computers.

Microsoft’s “Windows” and Apple’s “Mac” OS

When it comes to smartphone operating systems

Apple’s “iOS” for iPhone and

Google’s “Android” is the mainstream OS.

Basically, there are two types of applications.

In addition, a new type of web technology called “PWA” has been gaining attention in recent years.

PWA is an innovative system announced by Google that combines the excellent characteristics of native apps and web apps!

I will now explain the characteristics of each.

Native Apps

Typical examples :

Excel, Word, PowerPoint, etc. often used at school or work

Design software (Adobe Illustrator, Photoshop, etc.)

Anything you install from the App Store or Google Play.

Development languages :

C language, C++, C#, VisualBasic, ASP

What is a web app?

Typical examples :

In the gourmet food industry, sites such as Shokuroku, Cookpad, Gurunavi, etc.

EC sites such as Amazon and Rakuten

Gmail, YouTube, and Google Maps from Google.

SNS: Instagram, Twitter, Facebook

Yahoo!, note, Dropbox, and Skype.

Development languages :

Ruby, PHP, Python, Go language, Java, JavaScript, HTML, CSS

HTML, CSS

PWA” recommended by Google

What is a PWA, which is a fusion of the two applications described above, and is a combination of the ease of a website and the high functionality of a native application?

With PWAs, you can put icons on your home screen, send push notifications, and implement “user-friendly and convenient functions” without having to use native apps ✨.

To put it simply, it’s like “turning a website into an app“.

To quote Google’s official website.

Using Progressive Web Apps

Progressive Web Apps (PWAs) allow you to quickly interact with the web on your computer or mobile device, install PWAs for easy access, and take advantage of additional features (such as extra storage for offline content).

Typical examples :

Retty, SUUMO, Twitter, Nikkei E-Edition, Spotify, Forbes JAPAN, The Weather Channel, Pinterest, The Washington Post

Development Languages :

HTML, CSS, JavaScript

Working with “ServiceWorker”

ServiceWorker continues to run in the background even when tabs are closed.

I have the impression that more and more companies are gradually adopting PWAs.

The weak point of PWAs is that push notifications are not yet supported on iOS💦.

If it is supported in the future, it will surely spread to the whole world at once!

PWA will change the way the web and apps work, and the conventional wisdom.

I think it will be a big turning point.

How do you compare the three apps on Instagram?

If you look at Instagram on your iPhone, you may think there is nothing wrong with it.

However, when you look at it on your iPad, have you ever found it a bit inconvenient?

In fact, let’s compare it with an example of Instagram on an iPad!

[Native App]

When you view it horizontally on an iPad, you have to turn the screen upright to see it at the size of a smartphone…it’s small and hard to see…you also get a little blank space.

[Web App]

There is a search bar at the top.

I can’t see it with the screen fully open…

[PWA]

I’ve been using it for a while now, and it’s really nice.

If you want to view Instagram on your iPad, I suggest you convert it to a PWA!

Turning a website into an app

Chrome(PC)

First thing on any search engine, search the URL for [DEKOBOKO FRIENDS]!

You can bookmark (register as a favorite) sites you frequently visit with a star mark, but it would be more convenient if you could add them to your home screen as an app!

How to install the application

❶ Click on the icon next to the URL of the website in the search window that looks like a combination of a computer and the bottom arrow.

When you place the cursor over the icon, the message “Install DEKOBOKO FRIENDS” will appear.

❷Install the software.

❸The “PWA-ized application” has been launched!

The bar on top is gone, so it’s clean!

Returning to the home screen…

When you return to the home screen, you’ll see that DEKOBOKO FRIENDS app has been created☺.

What a website! The website has turned into an app!

When I opened the website from the home screen again, it was instantly up and running!

Edge(PC)

Follow the same procedure as Chrome.

You can convert a website into an application in Edge as well.

However, the shape of the symbol is different from Chrome.

Note that it has been changed to an icon with three squares and a + button!

Once you install it, allow it!

You can customize the ✓ by yourself if you like.

If you check Desktop Shortcut, it will be added to your home screen as an app as before.

iPad

Open a web site by searching the URL in Safari.

Share symbol that pops up at the top => Add to Home Screen

Add

The DEKOBOKO FRIENDS app has been added to your iPad!

This is the reason why there are two apps for Instagram as well. It’s your imagination that the colors are slightly different!

The native app and the app that was made into a PWA are side by side, so it’s too much.

It may look suspicious, but… it’s not a back-up (laughs).

It’s just an app of Instagram opened on a website!

If you look closely, Lightroom actually has two apps as well.

If you look closely, you’ll see that Lightroom actually has two apps, one for viewing, one for editing the admin screen (dashboard), and one for analyzing. You can even change the name for each use!

iPhone

You can also change the name for each use. First, search the URL in Safari.

Then, to add it to your home screen, click the share button with the up arrow that pops up.

Add to Home Screen

Add

The DEKOBOKO FRIENDS app has been added ♥.

Push Notifications

If you turn on push notifications, you will receive notifications of newly posted articles and notifications from the blog owner. This has the advantage of making it easier for you to notice new posts when you want to see them.

There are various browsers and models that support push notifications.

* Push notifications are not supported for iPhone.

How to set up push notifications is explained below.

PC (Chrome & Edge & PWA)

❶ Allow

❷ Allow

❸ Press the red bell.

If you get a notification at the bottom, OK.

Android

Push notifications seem to be possible on smartphones, even on Android!

Making the Blog Multilingual

How to change the display to English

If you are using a PC, you can change the language to English by clicking on the English button.

If you are using an iPad, you can view the blog in the same way as on a PC.

So, here is the bottom part of the screen for your reference.

If you are using an iPhone, the upper bar is within the three lines of a round circle, so please click on English from there.

I also added a language switcher not only in the header at the top of the site, but also in the footer at the bottom.

You can switch between English and Japanese.

If you are an English-speaking person, please use this site as a website to read in your own language, or to learn a foreign language other than your own.

DeepL Translation

I thought about using an automatic translation plugin for WordPress, but I was told that it uses Google and Microsoft translations.

If the accuracy is good, there is room to consider it.

However, “DeepL” has recently surpassed them and can provide native-like natural translations.

DeepL translation: the world’s most accurate translation tool

In order to meet the needs of a wide range of users so that people from overseas can read our website, we have decided to incorporate “DeepL”, which provides excellent, highly accurate automatic translation.

How far will translation technology go in 2022? The evolution of “DeepL” over Google Translate

I’ll be translating manually, but I’ll do my best to translate steadily in my free time!

I will also create an English translated article page, and will add articles in other languages if there is enough demand and capacity.

Without forgetting the original purpose of running DEKOBOKO FRIENDS, we aim to create a website that provides useful and fun information to people around the world.

We hope that everyone will try to convert the website into a PWA and turn it into an application so that you can view DEKOBOKO FRIENDS at any time♪